| 1 | import { STACKS_PER_SIDE, WALL_SIZE, WALL_STACKS } from './tiles'; |
| 2 | import type { SeatId } from './types'; |
| 3 | |
| 4 | /** |
| 5 | * What the wall square looks like right now. |
| 6 | * |
| 7 | * The square is eaten from both ends at once — normal draws come off the front, |
| 8 | * kong and flower replacements off the back — so how much of it is left is not |
| 9 | * one number but a per-stack question, and two things want the answer: the |
| 10 | * drawing of it (ui/WallRing) and the physics (table/geometry), since a stack |
| 11 | * still standing is something a thrown tile has to get past. |
| 12 | * |
| 13 | * Deliberately typed against the fields it reads rather than `GameState`, so it |
| 14 | * stays a function of the wall and nothing else. |
| 15 | */ |
| 16 | export interface WallProgress { |
| 17 | drawnFront: number; |
| 18 | drawnBack: number; |
| 19 | rules: { wallReserve: number }; |
| 20 | } |
| 21 | |
| 22 | export interface Stack { |
| 23 | /** Tiles still in this stack: 2 full, 1 half, 0 spent. */ |
| 24 | count: 0 | 1 | 2; |
| 25 | /** Part of the 16-tile 底牌 tail that ends the hand. */ |
| 26 | dead: boolean; |
| 27 | /** The break point — the stack the next draw comes off. */ |
| 28 | next: boolean; |
| 29 | } |
| 30 | |
| 31 | /** |
| 32 | * Position 0 is the break point. Stack `i` holds positions `2i` and `2i+1`, and |
| 33 | * a position is still there if it is past the front and short of the back. |
| 34 | */ |
| 35 | export function wallStacks(s: WallProgress): Stack[] { |
| 36 | const front = s.drawnFront; |
| 37 | const back = WALL_SIZE - s.drawnBack; |
| 38 | const deadFrom = back - s.rules.wallReserve; |
| 39 | |
| 40 | return Array.from({ length: WALL_STACKS }, (_, i) => { |
| 41 | const a = i * 2; |
| 42 | const b = a + 1; |
| 43 | const live = (p: number) => p >= front && p < back; |
| 44 | const count = ((live(a) ? 1 : 0) + (live(b) ? 1 : 0)) as 0 | 1 | 2; |
| 45 | return { count, dead: b >= deadFrom, next: front === a || front === b }; |
| 46 | }); |
| 47 | } |
| 48 | |
| 49 | /** |
| 50 | * Whether a stack is something a thrown tile has to get past. |
| 51 | * |
| 52 | * A stack of two stands as tall as the tile being thrown at it. One of one is |
| 53 | * low enough to sail over, and a spent one is not there at all — so only a full |
| 54 | * stack is a barrier. This is the rule behind both halves of the throw: the |
| 55 | * colliders the pile bounces off, and whether a seat may flick at all. |
| 56 | */ |
| 57 | export const isBarrier = (s: Stack) => s.count === 2; |
| 58 | |
| 59 | /** The four sides in the order WallRing lays them out, clockwise from the top. */ |
| 60 | export const WALL_SIDES = ['top', 'right', 'bottom', 'left'] as const; |
| 61 | export type WallSide = (typeof WALL_SIDES)[number]; |
| 62 | |
| 63 | /** |
| 64 | * Which side of the square sits in front of each seat — the one a seat has to |
| 65 | * throw over. Seats run bottom, right, top, left (see ui/rotation.ts) and the |
| 66 | * sides are drawn top, right, bottom, left, so the two orders are not the same. |
| 67 | */ |
| 68 | export const SEAT_WALL_SIDE: Record<SeatId, number> = { 0: 2, 1: 1, 2: 0, 3: 3 }; |
| 69 | |
| 70 | /** The stacks making up one quarter of the square as it was built. */ |
| 71 | export function sideStacks(stacks: Stack[], side: number): Stack[] { |
| 72 | return stacks.slice(side * STACKS_PER_SIDE, (side + 1) * STACKS_PER_SIDE); |
| 73 | } |
| 74 | |
| 75 | /** How many stacks a side of the square holds, once the middle is measured. */ |
| 76 | export interface RingCapacity { |
| 77 | /** Along the top and the bottom. */ |
| 78 | h: number; |
| 79 | /** Down the left and the right. */ |
| 80 | v: number; |
| 81 | } |
| 82 | |
| 83 | /** Dealt out before anybody looks at the table: sixteen tiles, four ways. */ |
| 84 | const DEALT = 64; |
| 85 | /** |
| 86 | * How much wall is left once a hand has been dealt. The square is built to the |
| 87 | * whole hundred and forty-four now rather than to this — see `RING` — so this |
| 88 | * is only a fact about the wall, and what the tests measure a fresh deal |
| 89 | * against. |
| 90 | */ |
| 91 | export const DEALT_STACKS = WALL_STACKS - DEALT / 2; |
| 92 | |
| 93 | /** |
| 94 | * The square is the whole wall: eighteen stacks of two a side, four sides, the |
| 95 | * hundred and forty-four tiles, exactly as it is built on a table. |
| 96 | * |
| 97 | * It used to be rebuilt to what was *left* after a hand had been dealt — barely |
| 98 | * half of it — because eighteen full-size stacks a side wants about 560px and no |
| 99 | * ordinary window has that between the top and bottom strips. That bought a |
| 100 | * square, at the price of it not being the wall: a side ran out of stacks before |
| 101 | * it reached its corner, so the four of them never met. |
| 102 | * |
| 103 | * What gives instead is the tile. A wall tile is not a hand tile — on a table it |
| 104 | * is the same tile, but on a screen the wall has to fit the middle and the hand |
| 105 | * has to be readable, and those are two different jobs. See `rhombus`. |
| 106 | */ |
| 107 | export const RING: RingCapacity = { h: STACKS_PER_SIDE, v: STACKS_PER_SIDE }; |
| 108 | |
| 109 | /** One wall, placed: where its own near corner sits from the middle of the |
| 110 | * ring, and which way it runs. Degrees clockwise from east, as CSS turns. */ |
| 111 | export interface WallPlace { |
| 112 | x: number; |
| 113 | y: number; |
| 114 | dir: number; |
| 115 | } |
| 116 | |
| 117 | export interface Rhombus { |
| 118 | places: WallPlace[]; |
| 119 | /** The whole thing's footprint, walls included — what has to fit the middle. */ |
| 120 | box: { w: number; h: number }; |
| 121 | /** The opening left in the middle of it, as a box round the four corners. */ |
| 122 | open: { x: number; y: number; w: number; h: number }; |
| 123 | } |
| 124 | |
| 125 | const rad = (deg: number) => (deg * Math.PI) / 180; |
| 126 | |
| 127 | /** |
| 128 | * Where the four walls stand. |
| 129 | * |
| 130 | * A rhombus of any corner angle, which at ninety degrees is the square everyone |
| 131 | * knows. Four walls of the same eighteen stacks, each pinned at the corner it is |
| 132 | * built from and running its whole length from there — which carries it past the |
| 133 | * far corner, over the outside of the next wall along. That overhang is the |
| 134 | * pinwheel, and it is the reason the corners are covered rather than mitred. |
| 135 | * |
| 136 | * How far a wall has to overrun to cover the next one depends on the corner it |
| 137 | * is turning: two bands of thickness `t` meeting at an interior angle ψ overlap |
| 138 | * by `t / tan(ψ/2)` along the edge. A rhombus has two different corner angles, |
| 139 | * so the four walls would each want a different overrun — and they cannot have |
| 140 | * one, because they are all the same eighteen stacks long. So all four take the |
| 141 | * *sharper* corner's overrun: the shallow corners then overlap by more than they |
| 142 | * strictly need, which is a thicker join and never a gap. At ninety degrees the |
| 143 | * two are equal and it comes out as exactly one wall-depth, which is where the |
| 144 | * square's own arithmetic came from. |
| 145 | * |
| 146 | * Everything is linear in `len` and `thick`, so the caller can solve for the |
| 147 | * tile by asking once at a size of one and scaling the answer. |
| 148 | */ |
| 149 | export function rhombus( |
| 150 | len: number, |
| 151 | thick: number, |
| 152 | angle: number, |
| 153 | turn = 0, |
| 154 | lapping = 1, |
| 155 | ): Rhombus { |
| 156 | // Interior angles alternate round a rhombus and come to a straight line. |
| 157 | const a = Math.min(179, Math.max(1, angle)); |
| 158 | const sharp = Math.min(a, 180 - a); |
| 159 | // What the corner needs, and then as much more of it as is asked for. Never |
| 160 | // less: below one the walls stop reaching each other, which is the gap. Above |
| 161 | // it they simply lie over each other further, and the corners close either |
| 162 | // way — the wall keeps its whole length whatever this is, so a longer overrun |
| 163 | // pulls the corners in rather than leaving anything behind. |
| 164 | const lap = (thick / Math.tan(rad(sharp) / 2)) * Math.max(1, lapping); |
| 165 | // Corner to corner. The wall is longer than this by the overrun. |
| 166 | const edge = Math.max(thick, len - lap); |
| 167 | |
| 168 | // Two pairs of parallel sides: turning by `a` then by `180 - a`, twice round. |
| 169 | const dirs = [turn, turn + a, turn + 180, turn + 180 + a]; |
| 170 | const u = (deg: number) => ({ x: Math.cos(rad(deg)), y: Math.sin(rad(deg)) }); |
| 171 | |
| 172 | // Corners, hung so the middle of them lands on the middle of the ring. |
| 173 | const u0 = u(dirs[0]); |
| 174 | const u1 = u(dirs[1]); |
| 175 | const corners = [{ x: (-edge * (u0.x + u1.x)) / 2, y: (-edge * (u0.y + u1.y)) / 2 }]; |
| 176 | corners.push({ x: corners[0].x + edge * u0.x, y: corners[0].y + edge * u0.y }); |
| 177 | corners.push({ x: corners[1].x + edge * u1.x, y: corners[1].y + edge * u1.y }); |
| 178 | corners.push({ x: corners[2].x - edge * u0.x, y: corners[2].y - edge * u0.y }); |
| 179 | |
| 180 | const places: WallPlace[] = []; |
| 181 | const xs: number[] = []; |
| 182 | const ys: number[] = []; |
| 183 | for (let i = 0; i < 4; i++) { |
| 184 | const dir = dirs[i]; |
| 185 | const along = u(dir); |
| 186 | // A box laid down at an angle grows along its own +y, which is its |
| 187 | // direction turned a quarter clockwise. Whichever way that points, the wall |
| 188 | // has to end up on the *outside*, so it is hung off the far side when it |
| 189 | // does not. |
| 190 | const nx = -Math.sin(rad(dir)); |
| 191 | const ny = Math.cos(rad(dir)); |
| 192 | const mid = { x: corners[i].x + (edge / 2) * along.x, y: corners[i].y + (edge / 2) * along.y }; |
| 193 | const outward = nx * mid.x + ny * mid.y >= 0; |
| 194 | const x = corners[i].x + (outward ? 0 : -thick * nx); |
| 195 | const y = corners[i].y + (outward ? 0 : -thick * ny); |
| 196 | places.push({ x, y, dir }); |
| 197 | // Its four corners, for the footprint. |
| 198 | for (const [dl, dt] of [[0, 0], [len, 0], [len, thick], [0, thick]]) { |
| 199 | xs.push(x + dl * along.x + dt * nx); |
| 200 | ys.push(y + dl * along.y + dt * ny); |
| 201 | } |
| 202 | } |
| 203 | |
| 204 | const cx = corners.map((c) => c.x); |
| 205 | const cy = corners.map((c) => c.y); |
| 206 | return { |
| 207 | places, |
| 208 | box: { w: Math.max(...xs) - Math.min(...xs), h: Math.max(...ys) - Math.min(...ys) }, |
| 209 | open: { |
| 210 | x: Math.min(...cx), |
| 211 | y: Math.min(...cy), |
| 212 | w: Math.max(...cx) - Math.min(...cx), |
| 213 | h: Math.max(...cy) - Math.min(...cy), |
| 214 | }, |
| 215 | }; |
| 216 | } |
| 217 | |
| 218 | /** A stack and which of the 72 it is — the index is what the physics reads. */ |
| 219 | export interface Placed { |
| 220 | index: number; |
| 221 | stack: Stack; |
| 222 | } |
| 223 | |
| 224 | /** |
| 225 | * Where what is left of the wall actually goes. |
| 226 | * |
| 227 | * Four walls of eighteen full-size stacks want about 560px a side, and the |
| 228 | * middle of the table is nothing like that in both directions at once — so a |
| 229 | * square built to the tile is a square that hangs out under the players. What |
| 230 | * saves it is that by the time anyone is looking, four hands have been dealt |
| 231 | * off the front and there is nothing like a whole wall left: only what is still |
| 232 | * standing is drawn, and it is laid out around a ring cut to the middle rather |
| 233 | * than to the tile. Players push the remaining stacks about to keep them tidy |
| 234 | * for exactly this reason. |
| 235 | * |
| 236 | * The rebuilt square is the size of the wall as it is dealt, so at the start |
| 237 | * the run fills it exactly, and from then on it is simply *eaten*: the tail is |
| 238 | * pinned to the end of the square and normal draws take stacks off the front, |
| 239 | * which leaves a growing gap where they were and moves nothing else. Kong and |
| 240 | * flower replacements come off the other end and shorten it from there. Both |
| 241 | * ends are where they would be on a table, and the square keeps the size it was |
| 242 | * built at — a square that shrank every draw would close in on the discards |
| 243 | * lying inside it. |
| 244 | */ |
| 245 | export function ringLayout(stacks: Stack[], cap: RingCapacity): Placed[][] { |
| 246 | const sides: Placed[][] = [[], [], [], []]; |
| 247 | const lengths = [cap.h, cap.v, cap.h, cap.v]; |
| 248 | const slots = 2 * (cap.h + cap.v); |
| 249 | if (slots <= 0) return sides; |
| 250 | |
| 251 | // Each stack has its own place in the square and keeps it: the far end is the |
| 252 | // far end of the square, and everything counts back from there. Draws off the |
| 253 | // front open a gap at the break point, draws off the tail shorten the other |
| 254 | // end, and no tile that is still standing ever has to move. |
| 255 | const offset = WALL_STACKS - slots; |
| 256 | |
| 257 | for (let index = 0; index < stacks.length; index++) { |
| 258 | const stack = stacks[index]; |
| 259 | // A wall too long for its square only happens before a hand is dealt, and |
| 260 | // then only for the frame it takes to deal it. What falls off the start is |
| 261 | // the part about to be drawn anyway. |
| 262 | let at = index - offset; |
| 263 | if (stack.count === 0 || at < 0 || at >= slots) continue; |
| 264 | let side = 0; |
| 265 | while (at >= lengths[side]) at -= lengths[side++]; |
| 266 | sides[side].push({ index, stack }); |
| 267 | } |
| 268 | return sides; |
| 269 | } |