collin/mahjong · 6293e66c
Size the wall off the tight way across the table
Collin Richards · 2026-08-21 22:19 UTC · 6293e66c149e342ece520c9a6b42948fb26b83cc · parent 3af57839 · browse files
modifiedsrc/styles.css+5 −4
| ⋯ 661 unchanged lines | |||
| 662 | 662 | `.wall-ring` is the opening, not the outside: the sides hang off its edges, | |
| 663 | 663 | so the square encloses the pool the way it does on a table. */ | |
| 664 | 664 | .wall-ring { | |
| 665 | - | /* A stack's short side — the same tile that is in a hand, because on a table | |
| 666 | - | it is the same tile. The square is then eighteen of them a side and comes | |
| 667 | - | out bigger than the middle between the strips; where it goes from there is | |
| 668 | - | `--wall-angle`, `--wall-turn` and `--wall-gap`, not a smaller tile. */ | |
| 665 | + | /* A stack's short side. Solved in ui/WallRing off the tight way across the | |
| 666 | + | *table* — its height — so that eighteen stacks fit it, rather than off the | |
| 667 | + | room the four strips leave in the middle, which a real wall never fitted | |
| 668 | + | and which had the tile down to under half a hand's. The fallback here is | |
| 669 | + | only for the frame before the first measure. */ | |
| 669 | 670 | --ws: var(--tile-w); | |
| 670 | 671 | --wd: calc(var(--ws) * 1.375); | |
| 671 | 672 | /* How far round the whole square is set. Four walls built the same way round | |
| ⋯ 1636 unchanged lines | |||
modifiedsrc/ui/WallRing.tsx+12 −7
| ⋯ 46 unchanged lines | |||
| 47 | 47 | ({ | |
| 48 | 48 | width: opening.w, | |
| 49 | 49 | height: opening.h, | |
| 50 | + | '--ws': `${cell}px`, | |
| 50 | 51 | // A side is its stacks and nothing else, so there is no sum for | |
| 51 | 52 | // the corners to come out of by a pixel. | |
| 52 | 53 | '--wall-len': `${RING.h * cell}px`, | |
| ⋯ 185 unchanged lines | |||
| 238 | 239 | const turn = parseFloat(style.getPropertyValue('--wall-turn')) || 0; | |
| 239 | 240 | const gap = parseFloat(style.getPropertyValue('--wall-gap')) || 0; | |
| 240 | 241 | ||
| 241 | - | // A wall tile is the same tile as a hand tile, so the stack is whatever | |
| 242 | - | // size CSS made it and there is nothing to solve for. The square comes out | |
| 243 | - | // as big as eighteen of them a side comes to, which is bigger than the | |
| 244 | - | // middle — where it then *goes* is a separate question, and not this | |
| 245 | - | // function's. | |
| 246 | - | const s = box.width; | |
| 247 | - | const from = `${middle.clientWidth}x${middle.clientHeight}/${s}/${ratio}/${angle}/${turn}/${gap}`; | |
| 242 | + | // Sized off the tight way across the table, not the room between the four | |
| 243 | + | // strips. Height is what a table is short of — 765 against 1396 — so that | |
| 244 | + | // is what eighteen stacks have to fit, and the tile is whatever that comes | |
| 245 | + | // to. It is the whole table because the square is bigger than the middle | |
| 246 | + | // and always was; where it goes from here is a separate question. | |
| 247 | + | const fit = (el.closest('.table') as HTMLElement | null) ?? middle; | |
| 248 | + | const room = fit.clientHeight; | |
| 249 | + | const from = `${room}/${ratio}/${angle}/${turn}/${gap}`; | |
| 248 | 250 | if (from === last) return; | |
| 249 | 251 | last = from; | |
| 250 | 252 | ||
| 253 | + | // Linear in the stack, so it is asked once at a stack of one and scaled. | |
| 254 | + | const unit = rhombus(STACKS_PER_SIDE, ratio, angle, turn, gap); | |
| 255 | + | const s = Math.max(1, room / unit.box.h); | |
| 251 | 256 | const shape = rhombus(STACKS_PER_SIDE * s, ratio * s, angle, turn, gap); | |
| 252 | 257 | setSquare({ opening: { w: shape.open.w, h: shape.open.h }, cell: s, shape }); | |
| 253 | 258 | }; | |
| ⋯ 22 unchanged lines | |||