| 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 `ringCell`. |
| 106 | */ |
| 107 | export const RING: RingCapacity = { h: STACKS_PER_SIDE, v: STACKS_PER_SIDE }; |
| 108 | |
| 109 | /** |
| 110 | * How big a stack may be, to build that square in the middle there is. |
| 111 | * |
| 112 | * A side of n stacks runs one wall-depth past its own corner — the overlap that |
| 113 | * makes the # — so it needs `n * s + d` across, and with `d = s * ratio` that is |
| 114 | * `(n + ratio) * s`. Square, so the tighter of the two directions decides. |
| 115 | * |
| 116 | * `ratio` is the stack's long side over its short one, measured off the element |
| 117 | * rather than restated here: it is CSS's business what shape a stack is. |
| 118 | */ |
| 119 | export function ringCell(space: { w: number; h: number }, ratio: number): number { |
| 120 | // A side is its eighteen stacks; the opening is that less one wall-depth, and |
| 121 | // a wall hangs off each side of the opening. So across the middle: |
| 122 | // opening = (n - ratio) * s walls = 2 * ratio * s |
| 123 | // outer = (n + ratio) * s |
| 124 | return Math.max(1, Math.min(space.w, space.h) / (STACKS_PER_SIDE + ratio)); |
| 125 | } |
| 126 | |
| 127 | /** |
| 128 | * The opening the square leaves in the middle — where the discards go. |
| 129 | * |
| 130 | * A side holds its stacks and then runs one wall-depth past its own corner — |
| 131 | * over the outside of the next wall along, which is the pinwheel — so what the |
| 132 | * opening is short by is exactly that depth. It is not a free number: any other |
| 133 | * value leaves the four walls either short of each other or thrown out past |
| 134 | * each other, and both of those are the gap. |
| 135 | */ |
| 136 | export const ringOpening = (cap: RingCapacity, cell: { s: number; d: number }) => ({ |
| 137 | w: Math.max(cell.s, cap.h * cell.s - cell.d), |
| 138 | h: Math.max(cell.s, cap.v * cell.s - cell.d), |
| 139 | }); |
| 140 | |
| 141 | /** A stack and which of the 72 it is — the index is what the physics reads. */ |
| 142 | export interface Placed { |
| 143 | index: number; |
| 144 | stack: Stack; |
| 145 | } |
| 146 | |
| 147 | /** |
| 148 | * Where what is left of the wall actually goes. |
| 149 | * |
| 150 | * Four walls of eighteen full-size stacks want about 560px a side, and the |
| 151 | * middle of the table is nothing like that in both directions at once — so a |
| 152 | * square built to the tile is a square that hangs out under the players. What |
| 153 | * saves it is that by the time anyone is looking, four hands have been dealt |
| 154 | * off the front and there is nothing like a whole wall left: only what is still |
| 155 | * standing is drawn, and it is laid out around a ring cut to the middle rather |
| 156 | * than to the tile. Players push the remaining stacks about to keep them tidy |
| 157 | * for exactly this reason. |
| 158 | * |
| 159 | * The rebuilt square is the size of the wall as it is dealt, so at the start |
| 160 | * the run fills it exactly, and from then on it is simply *eaten*: the tail is |
| 161 | * pinned to the end of the square and normal draws take stacks off the front, |
| 162 | * which leaves a growing gap where they were and moves nothing else. Kong and |
| 163 | * flower replacements come off the other end and shorten it from there. Both |
| 164 | * ends are where they would be on a table, and the square keeps the size it was |
| 165 | * built at — a square that shrank every draw would close in on the discards |
| 166 | * lying inside it. |
| 167 | */ |
| 168 | export function ringLayout(stacks: Stack[], cap: RingCapacity): Placed[][] { |
| 169 | const sides: Placed[][] = [[], [], [], []]; |
| 170 | const lengths = [cap.h, cap.v, cap.h, cap.v]; |
| 171 | const slots = 2 * (cap.h + cap.v); |
| 172 | if (slots <= 0) return sides; |
| 173 | |
| 174 | // Each stack has its own place in the square and keeps it: the far end is the |
| 175 | // far end of the square, and everything counts back from there. Draws off the |
| 176 | // front open a gap at the break point, draws off the tail shorten the other |
| 177 | // end, and no tile that is still standing ever has to move. |
| 178 | const offset = WALL_STACKS - slots; |
| 179 | |
| 180 | for (let index = 0; index < stacks.length; index++) { |
| 181 | const stack = stacks[index]; |
| 182 | // A wall too long for its square only happens before a hand is dealt, and |
| 183 | // then only for the frame it takes to deal it. What falls off the start is |
| 184 | // the part about to be drawn anyway. |
| 185 | let at = index - offset; |
| 186 | if (stack.count === 0 || at < 0 || at >= slots) continue; |
| 187 | let side = 0; |
| 188 | while (at >= lengths[side]) at -= lengths[side++]; |
| 189 | sides[side].push({ index, stack }); |
| 190 | } |
| 191 | return sides; |
| 192 | } |