collin/mahjong · 70c6c51e

Initial commit: 台灣麻將 hotseat table

Collin Richards · 2026-08-07 09:12 UTC · 70c6c51e71b2e032d9fb0042e260d72b165fe1ff · browse files

added.gitignore+24 −0

added.oxlintrc.json+8 −0

addedREADME.md+162 −0

addedTODO.md+23 −0

addedindex.html+13 −0

addedpackage-lock.json+1720 −0

addedpackage.json+27 −0

addedpublic/favicon.svg+1 −0

addedpublic/icons.svg+24 −0

addedpublic/tiles/back.pngbinary

Binary file

addedpublic/tiles/tiles.svg+513 −0

addedsrc/App.tsx+131 −0

addedsrc/assets/hero.pngbinary

Binary file

addedsrc/assets/vite.svg+1 −0

addedsrc/game/engine.test.ts+520 −0

addedsrc/game/engine.ts+928 −0

addedsrc/game/hu.ts+118 −0

addedsrc/game/prefs.ts+52 −0

addedsrc/game/save.ts+65 −0

addedsrc/game/sound.ts+168 −0

addedsrc/game/tai.ts+209 −0

addedsrc/game/tiles.ts+130 −0

addedsrc/game/types.ts+72 −0

addedsrc/main.tsx+9 −0

addedsrc/styles.css+1164 −0

addedsrc/ui/Bi.tsx+23 −0

addedsrc/ui/Center.tsx+148 −0

addedsrc/ui/Hand.tsx+109 −0

addedsrc/ui/Help.tsx+166 −0

addedsrc/ui/Seat.tsx+192 −0

addedsrc/ui/Settings.tsx+209 −0

addedsrc/ui/SoundToggle.tsx+36 −0

addedsrc/ui/TileView.tsx+35 −0

addedsrc/ui/WallRing.tsx+45 −0

addedsrc/ui/rotation.ts+15 −0

addedtsconfig.app.json+26 −0

addedtsconfig.json+7 −0

addedtsconfig.node.json+23 −0

addedvite.config.ts+7 −0

1	+	# Logs
2	+	logs
3	+	*.log
4	+	npm-debug.log*
5	+	yarn-debug.log*
6	+	yarn-error.log*
7	+	pnpm-debug.log*
8	+	lerna-debug.log*
9	+
10	+	node_modules
11	+	dist
12	+	dist-ssr
13	+	*.local
14	+
15	+	# Editor directories and files
16	+	.vscode/*
17	+	!.vscode/extensions.json
18	+	.idea
19	+	.DS_Store
20	+	*.suo
21	+	.ntvs
22	+	*.njsproj
23	+	*.sln
24	+	*.sw?

1	+	{
2	+	"$schema": "./node_modules/oxlint/configuration_schema.json",
3	+	"plugins": ["react", "typescript", "oxc"],
4	+	"rules": {
5	+	"react/rules-of-hooks": "error",
6	+	"react/only-export-components": ["warn", { "allowConstantExport": true }]
7	+	}
8	+	}

1	+	# 台灣麻將 — four-player hotseat on one touchscreen
2	+
3	+	Sixteen-tile Taiwanese mahjong for four people sitting around a single laptop.
4	+	All four hands are on screen at once, each rotated to face its own edge — put a
5	+	piece of card or plastic over your strip so the others can't see your tiles.
6	+	Every label is Chinese with English underneath; the tiles themselves stay
7	+	Chinese, because that is what the tiles say.
8	+
9	+	```
10	+	npm install
11	+	npm run dev # then open the browser full-screen (F11)
12	+	npm test # rules-engine tests, incl. 200 randomly-played hands
13	+	```
14	+
15	+	## Screen layout
16	+
17	+	```
18	+	┌──── 對家 (rotated 180°) ────┐
19	+	上家 (rotated 90°) │ wall / discards │ 下家 (rotated −90°)
20	+	└──── 自家 (upright, near you) ┘
21	+	```
22	+
23	+	Seat 0 is the bottom edge, and play runs 0 → 1 (right) → 2 (top) → 3 (left),
24	+	which is the normal counter-clockwise 東南西北 order.
25	+
26	+	Each strip shows, from the player's edge inwards: nameplate (seat wind, 莊
27	+	marker, 聽 badge, chip count) → concealed hand → action buttons → melds and
28	+	flowers → that player's discard row.
29	+
30	+	## Playing
31	+
32	+	- The tile you just drew is held apart from the sorted hand with a gold ring
33	+	and a 摸 label, instead of being sorted invisibly into it. It merges into the
34	+	hand once you discard. 補花 replacements and kong replacements are marked the
35	+	same way.
36	+	- The wall is drawn in the centre as a square: four staggered sides of 18
37	+	stacks of two, the way it's built on a real table. The gold stack is the break
38	+	point you draw from, stacks shrink to a single tile and then vanish as they're
39	+	used, and the dimmed tail is the 16-tile 底牌 that ends the hand — which is
40	+	also the end kong and flower replacements are taken from, so the square is
41	+	eaten from both directions at once.
42	+	- Discard — tap a tile to lift it, tap again (or the 打出 button) to throw it.
43	+	Action buttons sit on the right of your own strip, within thumb reach.
44	+	- Arranging — drag any tile in your hand to reorder it; 理牌 sorts it back
45	+	into suit order. Hands are never auto-sorted after the deal, so an arrangement
46	+	you set up survives draws, claims and kongs.
47	+	- Rules — the `?` on your nameplate opens a bilingual rules panel anchored to
48	+	your own edge of the table and rotated to face you.
49	+	- Claiming — after a discard, every seat that can claim gets 胡 / 槓 / 碰 /
50	+	吃 / 過 buttons on their own strip, and they resolve by priority (胡 > 槓/碰 >
51	+	吃; ties go to the player nearest the discarder in turn order).
52	+	The table never blocks on a claim. The next player gets a 摸牌 button and
53	+	may draw whenever they like, which shuts the window on anyone who hasn't
54	+	called — exactly like shouting 碰 before the next player picks up. A claim
55	+	already declared still stands, so calling in time always wins the tile. If
56	+	everyone answers first, play advances on its own without the extra tap.
57	+	- On your turn — 自摸, 暗槓 and 加槓 appear automatically when legal.
58	+	加槓 offers everyone else a 搶槓 chance.
59	+	- Undo — a 復原 button in the middle of the table takes back the last
60	+	action, naming what it will undo (`復原玩家 2 打五萬`). It sits in the
61	+	centre rather than on a seat because whoever spots the mis-tap should be
62	+	able to reach it. Twenty actions deep, cleared when the next hand is dealt.
63	+	Snapshots live outside the saved state, so an undo does not survive a
64	+	refresh: what you can take back is what happened while everyone was still
65	+	watching it happen.
66	+	- Sound — off by default. A dry clack as a tile goes down, and a distinct
67	+	two-note chime when a claim window opens, which is how a slow player notices
68	+	their 碰 is available before the next player draws it shut. Everything is
69	+	synthesised with a few oscillators (`src/game/sound.ts`) rather than sampled,
70	+	so there is nothing to load and the cue lands on the same frame as the tile.
71	+	Toggle it from the 🔊 button next to 復原, or from the settings screen.
72	+	- Settings — 設定 from the lobby, or from the game-over panel: player names,
73	+	底 / 台 / starting chips, the house-rule switches below, and sound. Kept in
74	+	`localStorage` separately from the save, so they carry over to the next game.
75	+	Stakes are locked once a game is under way — they'd otherwise rewrite chips
76	+	already won.
77	+
78	+	## Saving
79	+
80	+	The game state is plain data, so a save is just its JSON in `localStorage`,
81	+	rewritten after every move. Close the lid, refresh, or run the battery flat and
82	+	nothing is lost — the lobby offers 繼續對局 Resume alongside **開新局 New
83	+	game**, showing the round, hand number, chip counts and when it was saved. A
84	+	save is validated before it is offered (four players, 144 tiles accounted for),
85	+	so a truncated or hand-edited one is ignored rather than loaded into a broken
86	+	table. `VERSION` in `save.ts` retires old saves if the state shape changes.
87	+
88	+	## Rules implemented
89	+
90	+	- 144 tiles (four of each suit/honour, eight flowers), 16-tile hands, dealer
91	+	draws the 17th.
92	+	- 補花 at the deal and on every drawn flower, replacements from the back of the
93	+	wall.
94	+	- 吃 only from 上家; 碰/槓/胡 from anyone. 明槓, 暗槓, 加槓, 搶槓, 槓上開花.
95	+	- 流局 when 16 tiles remain (`Rules.wallReserve`); the dealer keeps the deal on a
96	+	draw or on a dealer win (連莊), otherwise the deal passes and the round wind
97	+	advances every four passes. A full 四圈 game is 16 dealer passes.
98	+
99	+	### House rules (switches in `Rules`, all on the settings screen)
100	+
101	+	- 過水 `sacredDiscard` (on) — pass on a tile you could have won with and it
102	+	is dead to you until your own next draw; the seat shows a 過水 badge listing
103	+	what it is locked out of, so the missing 胡 button is never a mystery. A draw
104	+	from either end of the wall lifts it. `sacredClearedByClaim` (off) decides
105	+	whether taking a 吃 / 碰 / 槓 lifts it too — tables genuinely differ.
106	+	- 一炮多響 `multipleWinners` (off) — one discard pays out to every seat that
107	+	calls on it, each settled separately against the discarder. With it off the
108	+	tile goes to the caller nearest the discarder. Either way the table now waits
109	+	for other seats that can win before settling, so the nearest seat wins the
110	+	tile rather than the quickest hand — and the 摸牌 button still closes the
111	+	window on anyone dithering.
112	+	- 包牌 `liability` (on) — feeding the pung that completes a visible 大三元
113	+	or 大四喜 makes the feeder answer for the whole hand, in place of all three
114	+	payers. Only the seat that fed the last of those sets is on the hook, and
115	+	only if it came off a discard: a hand that assembled them itself, or closed
116	+	the set with a 暗槓, has nobody to blame.
117	+
118	+	### 台 scoring (`src/game/tai.ts`)
119	+
120	+	自摸 1 · 門清 1 · 門清自摸 +1 · 全求人 2 · 平胡 2 · 五門齊 2 · 正花 1 each ·
121	+	花槓 2 · 八仙過海 8 · 圈風 / 門風 1 each · 三元牌 1 each · 小三元 4 · 大三元 8 ·
122	+	小四喜 8 · 大四喜 16 · 碰碰胡 4 · 混一色 4 · 清一色 8 · 字一色 16 ·
123	+	三暗刻 2 / 四暗刻 5 / 五暗刻 8 · 獨聽 · 單釣 1 · 搶槓 1 · 槓上開花 1 ·
124	+	海底撈月 1 · 河底撈魚 1 · 天胡 16 · 地胡 16 · 人胡 8 · 莊家 1 (連N拉N → 2N+1)
125	+
126	+	Ambiguous hands are decomposed every legal way and scored at the best reading.
127	+
128	+	Payment (`Game.settle`): one unit is `底 + 台 × 台值`
129	+	(`DEFAULT_RULES` = 底 3, 台 1, 100 chips each).
130	+	放槍一家付 — the discarder alone pays one unit; on 自摸 all three pay one unit
131	+	each. 拉莊 is billed to the dealer alone when the dealer is a payer, and added
132	+	to the whole hand when the dealer wins.
133	+
134	+	House rules vary a lot; the tai table and payments are plain data/functions in
135	+	`tai.ts` and `types.ts` if yours differ.
136	+
137	+	## Tile art
138	+
139	+	`public/tiles/tiles.svg` is the postmodern tileset from
140	+	[gnome-mahjongg](https://gitlab.gnome.org/GNOME/gnome-mahjongg), extracted from
141	+	the installed binary's GResource — a 43×2 sprite sheet (second row is the
142	+	highlighted variant, used for a lifted tile). `public/tiles/back.png` is the
143	+	blank tile from its smooth theme, tinted jade, since a solitaire game has no
144	+	face-down art of its own.
145	+
146	+	That art is GPL-2.0-or-later. Fine for playing at home; if you ever
147	+	distribute this app, either honour the GPL or swap the two files for art of your
148	+	own — `SPRITE_COL` in `tiles.ts` is the only mapping that would need updating.
149	+
150	+	Known gaps and house rules that aren't implemented yet are listed in
151	+	[TODO.md](TODO.md).
152	+
153	+	## Layout
154	+
155	+	```
156	+	public/tiles/ sprite sheet + tile back
157	+	src/game/tiles.ts tile codes, wall, shuffle, sprite mapping
158	+	src/game/hu.ts hand decomposition, 聽 detection, wait shapes
159	+	src/game/tai.ts 台 scoring
160	+	src/game/engine.ts state machine: deal, turns, claim resolution, settlement
161	+	src/ui/ TileView, Hand (drag), Seat (rotated strip), Center, Help
162	+	```

1	+	# TODO
2	+
3	+	Ordered by how much they'd matter at a real table.
4	+
5	+	## 1. Undo across a hand boundary
6	+
7	+	`undo()` is cleared by `startHand`, so a 下一局 tapped by mistake — and that
8	+	button sits right under someone's thumb — cannot be taken back. The deal is
9	+	already reshuffled by then. Would need the snapshot from before `nextHand` kept,
10	+	and the seed recorded, so the same wall could be rebuilt.
11	+
12	+	## 2. Settings mid-game
13	+
14	+	設定 is reachable from the lobby and the game-over panel, but not during a 將, so
15	+	a player who wants to fix a typo'd name has to wait it out. The `?` panel is
16	+	already anchored per-seat and rotated to face its own edge; settings could share
17	+	that treatment.
18	+
19	+	## 3. 花槓 and other flower house rules
20	+
21	+	Flowers score, but some tables pay 花槓 out the moment it completes rather than
22	+	at settlement, and some deal 補花 differently at the start. Both are `Rules`
23	+	flags plus a payment hook.

1	+	<!doctype html>
2	+	<html lang="zh-TW">
3	+	<head>
4	+	<meta charset="UTF-8" />
5	+	<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6	+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
7	+	<title>台灣麻將</title>
8	+	</head>
9	+	<body>
10	+	<div id="root"></div>
11	+	<script type="module" src="/src/main.tsx"></script>
12	+	</body>
13	+	</html>

1	+	{
2	+	"name": "mahjong",
3	+	"private": true,
4	+	"version": "0.0.0",
5	+	"type": "module",
6	+	"scripts": {
7	+	"dev": "vite",
8	+	"build": "tsc -b && vite build",
9	+	"lint": "oxlint",
10	+	"preview": "vite preview",
11	+	"test": "vitest run"
12	+	},
13	+	"dependencies": {
14	+	"react": "^19.2.8",
15	+	"react-dom": "^19.2.8"
16	+	},
17	+	"devDependencies": {
18	+	"@types/node": "^24.13.3",
19	+	"@types/react": "^19.2.17",
20	+	"@types/react-dom": "^19.2.3",
21	+	"@vitejs/plugin-react": "^6.0.4",
22	+	"oxlint": "^1.75.0",
23	+	"typescript": "~6.0.2",
24	+	"vite": "^8.2.0",
25	+	"vitest": "^4.1.10"
26	+	}
27	+	}

1	+	<svg xmlns="http://www.w3.org/2000/svg">
2	+	<symbol id="bluesky-icon" viewBox="0 0 16 17">
3	+	<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
4	+	<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
5	+	</symbol>
6	+	<symbol id="discord-icon" viewBox="0 0 20 19">
7	+	<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
8	+	</symbol>
9	+	<symbol id="documentation-icon" viewBox="0 0 21 20">
10	+	<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
11	+	<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
12	+	<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
13	+	</symbol>
14	+	<symbol id="github-icon" viewBox="0 0 19 19">
15	+	<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
16	+	</symbol>
17	+	<symbol id="social-icon" viewBox="0 0 20 20">
18	+	<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
19	+	<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
20	+	</symbol>
21	+	<symbol id="x-icon" viewBox="0 0 19 19">
22	+	<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
23	+	</symbol>
24	+	</svg>

1	+	import { useEffect, useState, useSyncExternalStore } from 'react';
2	+	import { Game } from './game/engine';
3	+	import { loadPrefs, savePrefs, type Prefs } from './game/prefs';
4	+	import { loadSave } from './game/save';
5	+	import { play, setSoundEnabled, setVolume } from './game/sound';
6	+	import { WIND_EN, WIND_NAMES } from './game/tiles';
7	+	import type { SeatId } from './game/types';
8	+	import { Center } from './ui/Center';
9	+	import { Help } from './ui/Help';
10	+	import { Seat } from './ui/Seat';
11	+	import { Settings } from './ui/Settings';
12	+	import { SoundToggle } from './ui/SoundToggle';
13	+	import './styles.css';
14	+
15	+	const SEATS: SeatId[] = [0, 1, 2, 3];
16	+
17	+	export default function App() {
18	+	const [prefs, setPrefs] = useState<Prefs>(loadPrefs);
19	+	// Built once, from the preferences as they stood at startup; after that the
20	+	// settings screen edits the live game rather than replacing it.
21	+	const [game] = useState(() => new Game(prefs.names, prefs.rules));
22	+	useSyncExternalStore(game.subscribe, game.getSnapshot);
23	+	const [helpSeat, setHelpSeat] = useState<SeatId \| null>(null);
24	+	const [settingsOpen, setSettingsOpen] = useState(false);
25	+	// Read once at startup; after that the live game is the source of truth.
26	+	const [saved] = useState(() => loadSave());
27	+	const phase = game.state.phase;
28	+
29	+	// Names and stakes live in the game state as well as in the preferences —
30	+	// saved games keep the settings they were played under.
31	+	const commitSettings = (p: Prefs) => {
32	+	setPrefs(p);
33	+	game.applySettings(p.names, p.rules);
34	+	setSettingsOpen(false);
35	+	};
36	+	// The panel auditions sound changes as you make them, so cancelling has to
37	+	// put the audio back the way it was.
38	+	const cancelSettings = () => {
39	+	setSoundEnabled(prefs.sound);
40	+	setVolume(prefs.volume);
41	+	setSettingsOpen(false);
42	+	};
43	+	const settingsPanel = settingsOpen && (
44	+	<Settings
45	+	prefs={prefs}
46	+	onSave={commitSettings}
47	+	onClose={cancelSettings}
48	+	stakesLocked={phase !== 'lobby' && phase !== 'gameEnd'}
49	+	/>
50	+	);
51	+
52	+	// Preferences are written straight through, so a mute survives a refresh.
53	+	useEffect(() => {
54	+	savePrefs(prefs);
55	+	setSoundEnabled(prefs.sound);
56	+	setVolume(prefs.volume);
57	+	}, [prefs]);
58	+	useEffect(() => game.onSound(play), [game]);
59	+
60	+	if (phase === 'lobby') {
61	+	const round = saved ? Math.floor(saved.state.rotations / 4) % 4 : 0;
62	+	return (
63	+	<div className="lobby">
64	+	<h1>台灣麻將</h1>
65	+	<p className="sub">Taiwanese Mahjong · 16 tiles · four players, one screen</p>
66	+	<p className="hint">
67	+	把擋板放在螢幕四邊，各自遮住自己的牌。
68	+	<br />
69	+	Stand a card over your edge of the screen to hide your hand.
70	+	</p>
71	+
72	+	{saved && (
73	+	<div className="resume">
74	+	<div className="resume-line">
75	+	{WIND_NAMES[round]}圈 · 第 {saved.state.handNumber} 局 · {WIND_EN[round]} round, hand{' '}
76	+	{saved.state.handNumber}
77	+	</div>
78	+	<div className="resume-scores">
79	+	{saved.state.players.map((p, i) => (
80	+	<span key={i}>
81	+	{p.name} <b>{p.score}</b>
82	+	</span>
83	+	))}
84	+	</div>
85	+	<div className="resume-when">存於 saved {relativeTime(saved.savedAt)}</div>
86	+	</div>
87	+	)}
88	+
89	+	<div className="lobby-buttons">
90	+	{saved && (
91	+	<button className="btn big-btn" onClick={() => game.restore(saved.state)}>
92	+	繼續對局 Resume
93	+	</button>
94	+	)}
95	+	<button className={`btn big-btn ${saved ? 'ghost' : ''}`} onClick={() => game.newGame()}>
96	+	{saved ? '開新局 New game' : '開始 Start'}
97	+	</button>
98	+	</div>
99	+
100	+	<div className="lobby-extras">
101	+	<button className="btn ghost sound-toggle" onClick={() => setSettingsOpen(true)}>
102	+	⚙ 設定 Settings
103	+	</button>
104	+	<SoundToggle prefs={prefs} onPrefs={setPrefs} />
105	+	</div>
106	+	{settingsPanel}
107	+	</div>
108	+	);
109	+	}
110	+
111	+	return (
112	+	<div className="table">
113	+	{SEATS.map((s) => (
114	+	<Seat key={s} game={game} seat={s} onHelp={() => setHelpSeat(s)} />
115	+	))}
116	+	<Center game={game} prefs={prefs} onPrefs={setPrefs} onSettings={() => setSettingsOpen(true)} />
117	+	{helpSeat !== null && <Help seat={helpSeat} onClose={() => setHelpSeat(null)} />}
118	+	{settingsPanel}
119	+	</div>
120	+	);
121	+	}
122	+
123	+	function relativeTime(ts: number): string {
124	+	const mins = Math.round((Date.now() - ts) / 60000);
125	+	if (mins < 1) return '剛剛 just now';
126	+	if (mins < 60) return `${mins} 分鐘前 · ${mins} min ago`;
127	+	const hours = Math.round(mins / 60);
128	+	if (hours < 24) return `${hours} 小時前 · ${hours} h ago`;
129	+	const days = Math.round(hours / 24);
130	+	return `${days} 天前 · ${days} d ago`;
131	+	}

1	+	import { describe, expect, it } from 'vitest';
2	+	import { Game } from './engine';
3	+	import { decompose, isWinningHand, waits } from './hu';
4	+	import { scoreHand } from './tai';
5	+	import { buildWall, NUM_BASIC, type Tile } from './tiles';
6	+	import { DEFAULT_RULES, type Meld, type SeatId } from './types';
7	+
8	+	const SEATS: SeatId[] = [0, 1, 2, 3];
9	+
10	+	/**
11	+	* Force a seat one tile from home: four pungs down and `hand` concealed, so
12	+	* the hand turns on a single tile. Tile conservation goes out of the window,
13	+	* which is fine — the tests that care about it deal properly.
14	+	*/
15	+	function setUpReadyHand(game: Game, seat: SeatId, hand: Tile[]) {
16	+	const p = game.state.players[seat];
17	+	const from = ((seat + 1) % 4) as SeatId;
18	+	p.melds = [9, 12, 15, 18].map(
19	+	(t): Meld => ({ kind: 'pung', tiles: [t, t, t], from }),
20	+	);
21	+	p.hand = [...hand];
22	+	}
23	+
24	+	describe('wall', () => {
25	+	it('has 144 tiles with the right multiplicities', () => {
26	+	const w = buildWall();
27	+	expect(w.length).toBe(144);
28	+	for (let t = 0; t < NUM_BASIC; t++) expect(w.filter((x) => x === t).length).toBe(4);
29	+	for (let t = NUM_BASIC; t < 42; t++) expect(w.filter((x) => x === t).length).toBe(1);
30	+	});
31	+	});
32	+
33	+	describe('hu detection', () => {
34	+	it('accepts a 17-tile hand of five sets and a pair', () => {
35	+	// 123m 456m 789m 111s 東東東 + 白白 → 5 sets + pair
36	+	const h: Tile[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9, 9, 27, 27, 27, 33, 33];
37	+	expect(isWinningHand(h, 0)).toBe(true);
38	+	});
39	+
40	+	it('rejects a hand one tile short of a set', () => {
41	+	const h: Tile[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9, 9, 27, 27, 28, 33, 33];
42	+	expect(isWinningHand(h, 0)).toBe(false);
43	+	});
44	+
45	+	it('works with melds already exposed', () => {
46	+	const h: Tile[] = [0, 1, 2, 3, 4, 5, 33, 33]; // 2 sets + pair, 3 melds down
47	+	expect(isWinningHand(h, 3)).toBe(true);
48	+	});
49	+
50	+	it('finds both readings of 111222333', () => {
51	+	const d = decompose([0, 0, 0, 1, 1, 1, 2, 2, 2, 33, 33], 3);
52	+	const kinds = d.map((x) => x.sets.map((s) => s.type).sort().join(''));
53	+	expect(kinds).toContain('pungpungpung');
54	+	expect(kinds).toContain('chowchowchow');
55	+	});
56	+
57	+	it('computes waits', () => {
58	+	const h: Tile[] = [0, 1, 2, 3, 4, 5, 33]; // 2 melds down, waiting to pair 白
59	+	expect(waits(h, 3)).toEqual([33]);
60	+	});
61	+	});
62	+
63	+	describe('scoring', () => {
64	+	const baseCtx = {
65	+	winner: 0 as SeatId,
66	+	dealer: 1 as SeatId,
67	+	dealerStreak: 0,
68	+	roundWind: 0,
69	+	melds: [],
70	+	concealed: [] as Tile[],
71	+	winTile: 0,
72	+	selfDraw: false,
73	+	loser: 1 as SeatId,
74	+	flowers: [] as Tile[],
75	+	robKong: false,
76	+	afterKong: false,
77	+	lastTile: false,
78	+	lastDiscard: false,
79	+	heavenly: false,
80	+	earthly: false,
81	+	humanly: false,
82	+	};
83	+
84	+	it('scores 清一色 + 碰碰胡', () => {
85	+	// 111m 222m 333m 444m 555m + 66m, all concealed, won on a discard
86	+	const concealed: Tile[] = [0, 0, 0, 1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 5, 5];
87	+	const r = scoreHand({ ...baseCtx, concealed, winTile: 4 });
88	+	const names = r.items.map((i) => i.name);
89	+	expect(names).toContain('清一色');
90	+	expect(names).toContain('碰碰胡');
91	+	expect(names).toContain('門清');
92	+	});
93	+
94	+	it('scores 大三元', () => {
95	+	const concealed: Tile[] = [31, 31, 31, 32, 32, 32, 33, 33, 0, 1, 2, 3, 4, 5, 9, 9];
96	+	const r = scoreHand({ ...baseCtx, concealed, winTile: 33 });
97	+	expect(r.items.map((i) => i.name)).toContain('大三元');
98	+	});
99	+
100	+	it('counts seat flowers', () => {
101	+	const concealed: Tile[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 9, 9, 27, 27, 27, 33];
102	+	// winner is seat 0, dealer is seat 1 → seat wind index 3 → 冬(37) and 竹(41)
103	+	const r = scoreHand({ ...baseCtx, concealed, winTile: 33, flowers: [37, 41] });
104	+	expect(r.items.find((i) => i.name.startsWith('正花'))?.tai).toBe(2);
105	+	});
106	+	});
107	+
108	+	/**
109	+	* Plays whole hands with a simple bot to shake out state-machine bugs.
110	+	* `hurry` exercises the non-blocking path: at most one seat answers a discard
111	+	* before the next player draws and closes the window on everyone else.
112	+	*/
113	+	function playRandomHand(game: Game, rng: () => number, maxSteps = 4000, hurry = false) {
114	+	let steps = 0;
115	+	while (game.state.phase !== 'handEnd' && steps++ < maxSteps) {
116	+	const s = game.state;
117	+	if (s.phase === 'turn') {
118	+	const seat = s.turn;
119	+	if (game.canSelfDrawWin(seat)) {
120	+	game.declareSelfDraw(seat);
121	+	continue;
122	+	}
123	+	const ak = game.concealedKongs(seat);
124	+	if (ak.length && rng() < 0.5) {
125	+	game.declareConcealedKong(seat, ak[0]);
126	+	continue;
127	+	}
128	+	const gk = game.addedKongs(seat);
129	+	if (gk.length && rng() < 0.5) {
130	+	game.declareAddedKong(seat, gk[0]);
131	+	continue;
132	+	}
133	+	const hand = s.players[seat].hand;
134	+	game.discard(seat, hand[Math.floor(rng() * hand.length)]);
135	+	} else if (s.phase === 'claims' \|\| s.phase === 'robkong') {
136	+	const seat = (Object.keys(s.options) as unknown as number[])
137	+	.map(Number)
138	+	.find((k) => s.responses[k as SeatId] === undefined) as SeatId \| undefined;
139	+	if (seat === undefined) throw new Error('claims phase with no pending seat');
140	+	const opts = s.options[seat]!;
141	+	const hu = opts.find((o) => o.type === 'hu');
142	+	if (hu) game.respond(seat, { type: 'hu' });
143	+	else if (rng() < 0.35) game.respond(seat, { type: opts[0].type, with: opts[0].with });
144	+	else if (hurry) game.resolveNow();
145	+	else game.respond(seat, 'pass');
146	+	} else {
147	+	break;
148	+	}
149	+	}
150	+	if (steps >= maxSteps) throw new Error('hand did not terminate');
151	+	}
152	+
153	+	describe('saving', () => {
154	+	it('round-trips the whole game through JSON', () => {
155	+	let seed = 555;
156	+	const rng = () => {
157	+	seed = (seed * 1103515245 + 12345) & 0x7fffffff;
158	+	return seed / 0x7fffffff;
159	+	};
160	+	const game = new Game();
161	+	game.startHand(99);
162	+	// Play part of a hand so melds, flowers and discards are all populated.
163	+	for (let i = 0; i < 40 && game.state.phase !== 'handEnd'; i++) {
164	+	const s = game.state;
165	+	if (s.phase === 'turn') {
166	+	const hand = s.players[s.turn].hand;
167	+	game.discard(s.turn, hand[Math.floor(rng() * hand.length)]);
168	+	} else {
169	+	game.resolveNow();
170	+	}
171	+	}
172	+
173	+	const clone = JSON.parse(JSON.stringify(game.state));
174	+	expect(clone).toEqual(game.state);
175	+
176	+	// A restored game keeps playing from exactly where it left off.
177	+	const resumed = new Game();
178	+	resumed.restore(clone);
179	+	expect(resumed.state.turn).toBe(game.state.turn);
180	+	expect(resumed.state.players[0].hand).toEqual(game.state.players[0].hand);
181	+	if (resumed.state.phase === 'turn') {
182	+	const hand = resumed.state.players[resumed.state.turn].hand;
183	+	const before = hand.length;
184	+	resumed.discard(resumed.state.turn, hand[0]);
185	+	expect(resumed.state.players.some((p) => p.discards.length > 0)).toBe(true);
186	+	expect(before).toBeGreaterThan(0);
187	+	}
188	+	});
189	+	});
190	+
191	+	describe('full hands', () => {
192	+	it('lets the next player close the claim window without waiting', () => {
193	+	let seed = 4242;
194	+	const rng = () => {
195	+	seed = (seed * 1103515245 + 12345) & 0x7fffffff;
196	+	return seed / 0x7fffffff;
197	+	};
198	+	const game = new Game();
199	+	for (let h = 0; h < 60; h++) {
200	+	game.startHand(h * 104729 + 11);
201	+	playRandomHand(game, rng, 4000, true);
202	+	const s = game.state;
203	+	expect(s.phase).toBe('handEnd');
204	+	expect(s.drawnFront + s.drawnBack + s.wall.length).toBe(144);
205	+	expect(s.players.reduce((a, p) => a + p.score, 0)).toBe(400);
206	+	game.nextHand();
207	+	if (game.state.phase === 'gameEnd') break;
208	+	}
209	+	});
210	+
211	+	it('honours a claim already declared when the window is closed', () => {
212	+	const game = new Game();
213	+	game.startHand(7);
214	+	const s = game.state;
215	+	// Give the seat to the dealer's right a pair to pung with.
216	+	const victim = ((s.dealer + 2) % 4) as SeatId;
217	+	const tile = s.players[s.dealer].hand[0];
218	+	s.players[victim].hand = [tile, tile, ...s.players[victim].hand.slice(2)];
219	+	game.discard(s.dealer, tile);
220	+	expect(s.phase).toBe('claims');
221	+	game.respond(victim, { type: 'pung' });
222	+	// The other seats never answer; the next player draws anyway.
223	+	game.resolveNow();
224	+	expect(s.players[victim].melds.some((m) => m.kind === 'pung')).toBe(true);
225	+	expect(s.turn).toBe(victim);
226	+	});
227	+
228	+	it('takes back a mis-tapped discard', () => {
229	+	const game = new Game();
230	+	game.startHand(11);
231	+	const s = game.state;
232	+	const before = JSON.parse(JSON.stringify(s));
233	+	expect(game.undoable()).toBeNull();
234	+
235	+	game.discard(s.dealer, s.players[s.dealer].hand[0]);
236	+	expect(game.undoable()).not.toBeNull();
237	+	game.undo();
238	+
239	+	expect(game.state).toEqual(before);
240	+	expect(game.undoable()).toBeNull();
241	+	});
242	+
243	+	it('takes back a pass, handing the claim buttons back', () => {
244	+	const game = new Game();
245	+	game.startHand(7);
246	+	const s = game.state;
247	+	const victim = ((s.dealer + 2) % 4) as SeatId;
248	+	const tile = s.players[s.dealer].hand[0];
249	+	s.players[victim].hand = [tile, tile, ...s.players[victim].hand.slice(2)];
250	+	game.discard(s.dealer, tile);
251	+
252	+	game.respond(victim, 'pass');
253	+	expect(game.state.responses[victim]).toBe('pass');
254	+	game.undo();
255	+	expect(game.state.responses[victim]).toBeUndefined();
256	+	expect(game.state.options[victim]).toBeTruthy();
257	+
258	+	// ...and the claim can then be made for real.
259	+	game.respond(victim, { type: 'pung' });
260	+	game.resolveNow();
261	+	expect(game.state.players[victim].melds.some((m) => m.kind === 'pung')).toBe(true);
262	+	});
263	+
264	+	it('caps the undo stack and forgets the previous hand', () => {
265	+	const game = new Game();
266	+	game.startHand(3);
267	+	for (let i = 0; i < 30; i++) {
268	+	const s = game.state;
269	+	if (s.phase === 'turn') game.discard(s.turn, s.players[s.turn].hand[0]);
270	+	else game.resolveNow();
271	+	}
272	+	let depth = 0;
273	+	while (game.undoable()) {
274	+	game.undo();
275	+	depth++;
276	+	}
277	+	expect(depth).toBe(20);
278	+
279	+	game.startHand(4);
280	+	expect(game.undoable()).toBeNull();
281	+	});
282	+
283	+	it('過水 locks a declined win out until the next draw', () => {
284	+	const game = new Game();
285	+	game.startHand(21);
286	+	const s = game.state;
287	+	// Put a seat one tile from home: four melds down, 123m + 白白 in hand,
288	+	// so it wins on 一萬 or 四萬.
289	+	const victim = ((s.dealer + 2) % 4) as SeatId;
290	+	setUpReadyHand(game, victim, [1, 2, 33, 33]); // 聽一萬 / 四萬
291	+	const tile = 3; // 四萬
292	+
293	+	game.state.players[s.dealer].hand = [tile, ...game.state.players[s.dealer].hand.slice(1)];
294	+	game.discard(s.dealer, tile);
295	+	expect(s.options[victim]?.some((o) => o.type === 'hu')).toBe(true);
296	+	game.respond(victim, 'pass');
297	+	game.resolveNow();
298	+	expect(game.sacredTiles(victim)).toContain(tile);
299	+
300	+	// Same tile again from the next seat round: no 胡 on offer this time.
301	+	const other = s.turn;
302	+	expect(other).not.toBe(victim);
303	+	game.state.players[other].hand = [tile, ...game.state.players[other].hand.slice(1)];
304	+	game.discard(other, tile);
305	+	expect(s.options[victim]?.some((o) => o.type === 'hu')).toBeFalsy();
306	+	});
307	+
308	+	it('過水 lifts once the locked seat draws again', () => {
309	+	const game = new Game();
310	+	game.startHand(21);
311	+	const s = game.state;
312	+	const victim = ((s.dealer + 2) % 4) as SeatId;
313	+	setUpReadyHand(game, victim, [1, 2, 33, 33]); // 聽一萬 / 四萬
314	+	s.sacred[victim] = [3];
315	+
316	+	// Walk the table round until the locked seat draws.
317	+	for (let i = 0; i < 40 && !(s.phase === 'turn' && s.turn === victim); i++) {
318	+	if (s.phase === 'turn') game.discard(s.turn, s.players[s.turn].hand[0]);
319	+	else game.resolveNow();
320	+	}
321	+	expect(s.turn).toBe(victim);
322	+	expect(game.sacredTiles(victim)).toEqual([]);
323	+	});
324	+
325	+	it('過水 can be switched off, or lifted by a claim', () => {
326	+	for (const clearedByClaim of [false, true]) {
327	+	const game = new Game(undefined, { ...DEFAULT_RULES, sacredClearedByClaim: clearedByClaim });
328	+	game.startHand(21);
329	+	const s = game.state;
330	+	const victim = ((s.dealer + 1) % 4) as SeatId; // to the discarder's left, so it can chow
331	+	setUpReadyHand(game, victim, [1, 2, 33, 33]); // 聽一萬 / 四萬
332	+	s.sacred[victim] = [3];
333	+	game.state.players[s.dealer].hand = [3, ...game.state.players[s.dealer].hand.slice(1)];
334	+	game.discard(s.dealer, 3);
335	+	game.respond(victim, { type: 'chow', with: [1, 2] });
336	+	game.resolveNow();
337	+	expect(game.sacredTiles(victim)).toEqual(clearedByClaim ? [] : [3]);
338	+	}
339	+
340	+	const off = new Game(undefined, { ...DEFAULT_RULES, sacredDiscard: false });
341	+	off.startHand(21);
342	+	const seat = ((off.state.dealer + 2) % 4) as SeatId;
343	+	off.state.sacred[seat] = [3];
344	+	expect(off.sacredTiles(seat)).toEqual([]);
345	+	});
346	+
347	+	it('一炮多響 pays every seat that calls on the tile', () => {
348	+	const game = new Game(undefined, { ...DEFAULT_RULES, multipleWinners: true });
349	+	game.startHand(41);
350	+	const s = game.state;
351	+	const a = ((s.dealer + 1) % 4) as SeatId;
352	+	const b = ((s.dealer + 2) % 4) as SeatId;
353	+	setUpReadyHand(game, a, [1, 2, 33, 33]);
354	+	setUpReadyHand(game, b, [1, 2, 32, 32]);
355	+	s.players[s.dealer].hand = [3, ...s.players[s.dealer].hand.slice(1)];
356	+
357	+	game.discard(s.dealer, 3);
358	+	game.respond(a, { type: 'hu' });
359	+	// The nearer seat does not get to close the door on the further one.
360	+	expect(s.phase).toBe('claims');
361	+	game.respond(b, { type: 'hu' });
362	+
363	+	const r = s.result!;
364	+	expect(r.winners.map((w) => w.seat).sort()).toEqual([a, b].sort());
365	+	expect(r.loser).toBe(s.dealer);
366	+	expect(r.deltas[a]).toBeGreaterThan(0);
367	+	expect(r.deltas[b]).toBeGreaterThan(0);
368	+	expect(r.deltas[s.dealer]).toBe(-(r.deltas[a] + r.deltas[b]));
369	+	expect(r.deltas.reduce((x, y) => x + y, 0)).toBe(0);
370	+	});
371	+
372	+	it('awards the discard to the nearest caller when 一炮多響 is off', () => {
373	+	const game = new Game();
374	+	game.startHand(41);
375	+	const s = game.state;
376	+	const a = ((s.dealer + 1) % 4) as SeatId;
377	+	const b = ((s.dealer + 2) % 4) as SeatId;
378	+	setUpReadyHand(game, a, [1, 2, 33, 33]);
379	+	setUpReadyHand(game, b, [1, 2, 32, 32]);
380	+	s.players[s.dealer].hand = [3, ...s.players[s.dealer].hand.slice(1)];
381	+
382	+	game.discard(s.dealer, 3);
383	+	game.respond(b, { type: 'hu' });
384	+	game.respond(a, { type: 'hu' });
385	+	expect(s.result!.winners.map((w) => w.seat)).toEqual([a]);
386	+	});
387	+
388	+	it('包牌 — whoever fed the third dragon answers for the whole hand', () => {
389	+	for (const liability of [true, false]) {
390	+	const game = new Game(undefined, { ...DEFAULT_RULES, liability });
391	+	game.startHand(31);
392	+	const s = game.state;
393	+	const winner = ((s.dealer + 1) % 4) as SeatId;
394	+	const feeder = ((s.dealer + 2) % 4) as SeatId;
395	+	const other = ((s.dealer + 3) % 4) as SeatId;
396	+
397	+	const p = s.players[winner];
398	+	p.melds = [
399	+	{ kind: 'pung', tiles: [31, 31, 31], from: other }, // 中
400	+	{ kind: 'pung', tiles: [9, 9, 9], from: other },
401	+	{ kind: 'pung', tiles: [32, 32, 32], from: other }, // 發
402	+	{ kind: 'pung', tiles: [33, 33, 33], from: feeder }, // 白 — the third dragon
403	+	];
404	+	p.hand = [1, 2, 5, 5, 3];
405	+	s.turn = winner;
406	+	s.phase = 'turn';
407	+	s.drawnTile = 3;
408	+
409	+	game.declareSelfDraw(winner);
410	+	const r = s.result!;
411	+	expect(r.winners[0].items.map((i) => i.name)).toContain('大三元');
412	+	expect(r.winners[0].liable).toBe(liability ? feeder : null);
413	+	if (liability) {
414	+	// Everyone else is out of it; the feeder covers all three shares.
415	+	expect(r.deltas[other]).toBe(0);
416	+	expect(r.deltas[s.dealer]).toBe(0);
417	+	expect(r.deltas[feeder]).toBe(-r.deltas[winner]);
418	+	} else {
419	+	expect(r.deltas[other]).toBeLessThan(0);
420	+	expect(r.deltas[feeder]).toBeLessThan(0);
421	+	}
422	+	expect(r.deltas.reduce((x, y) => x + y, 0)).toBe(0);
423	+	}
424	+	});
425	+
426	+	it('lets 包牌 go when the third dragon came from the winner’s own hand', () => {
427	+	const game = new Game();
428	+	game.startHand(31);
429	+	const s = game.state;
430	+	const winner = ((s.dealer + 1) % 4) as SeatId;
431	+	const other = ((s.dealer + 3) % 4) as SeatId;
432	+	const p = s.players[winner];
433	+	p.melds = [
434	+	{ kind: 'pung', tiles: [31, 31, 31], from: other },
435	+	{ kind: 'pung', tiles: [9, 9, 9], from: other },
436	+	{ kind: 'pung', tiles: [32, 32, 32], from: other },
437	+	{ kind: 'ankong', tiles: [33, 33, 33, 33] }, // 暗槓, nobody handed it over
438	+	];
439	+	p.hand = [1, 2, 5, 5, 3];
440	+	s.turn = winner;
441	+	s.phase = 'turn';
442	+	s.drawnTile = 3;
443	+
444	+	game.declareSelfDraw(winner);
445	+	expect(s.result!.winners[0].items.map((i) => i.name)).toContain('大三元');
446	+	expect(s.result!.winners[0].liable).toBeNull();
447	+	});
448	+
449	+	it('keeps the chips zero-sum under every house rule', () => {
450	+	const variants = [
451	+	{ multipleWinners: true },
452	+	{ multipleWinners: true, sacredDiscard: false },
453	+	{ liability: false, sacredClearedByClaim: true },
454	+	];
455	+	for (const [v, patch] of variants.entries()) {
456	+	let seed = 900 + v;
457	+	const rng = () => {
458	+	seed = (seed * 1103515245 + 12345) & 0x7fffffff;
459	+	return seed / 0x7fffffff;
460	+	};
461	+	const game = new Game(undefined, { ...DEFAULT_RULES, ...patch });
462	+	for (let h = 0; h < 30; h++) {
463	+	game.startHand(h * 7919 + v);
464	+	playRandomHand(game, rng);
465	+	const s = game.state;
466	+	expect(s.phase).toBe('handEnd');
467	+	expect(s.players.reduce((a, p) => a + p.score, 0)).toBe(400);
468	+	expect(s.drawnFront + s.drawnBack + s.wall.length).toBe(144);
469	+	game.nextHand();
470	+	if (game.state.phase === 'gameEnd') break;
471	+	}
472	+	}
473	+	});
474	+
475	+	it('plays 200 random hands without corrupting state', () => {
476	+	let seed = 12345;
477	+	const rng = () => {
478	+	seed = (seed * 1103515245 + 12345) & 0x7fffffff;
479	+	return seed / 0x7fffffff;
480	+	};
481	+	const game = new Game();
482	+	let wins = 0;
483	+	let draws = 0;
484	+
485	+	for (let h = 0; h < 200; h++) {
486	+	game.startHand(h * 7919 + 3);
487	+	playRandomHand(game, rng);
488	+	const s = game.state;
489	+	expect(s.phase).toBe('handEnd');
490	+	if (s.result!.drawGame) draws++;
491	+	else wins++;
492	+
493	+	// the wall square's bookkeeping matches the array it draws from
494	+	expect(s.drawnFront + s.drawnBack + s.wall.length).toBe(144);
495	+	expect(s.drawnFront).toBeGreaterThanOrEqual(65); // the deal
496	+
497	+	// tile conservation: every tile is accounted for exactly once
498	+	const all: Tile[] = [...s.wall];
499	+	for (const p of s.players) all.push(...p.hand, ...p.flowers, ...p.discards, ...p.melds.flatMap((m) => m.tiles));
500	+	expect(all.length).toBe(144);
501	+	for (let t = 0; t < NUM_BASIC; t++) expect(all.filter((x) => x === t).length).toBe(4);
502	+
503	+	// hand sizes are legal
504	+	for (const seat of SEATS) {
505	+	const p = s.players[seat];
506	+	const expected = 16 - p.melds.length * 3;
507	+	expect(p.hand.length).toBeGreaterThanOrEqual(expected);
508	+	expect(p.hand.length).toBeLessThanOrEqual(expected + 1);
509	+	}
510	+
511	+	// chips are zero-sum
512	+	const total = s.players.reduce((a, p) => a + p.score, 0);
513	+	expect(total).toBe(400);
514	+
515	+	game.nextHand();
516	+	if (game.state.phase === 'gameEnd') break;
517	+	}
518	+	expect(wins + draws).toBeGreaterThan(0);
519	+	});
520	+	});

1	+	import { NUM_BASIC, NUM_SUITED, toCounts, type Tile } from './tiles';
2	+
3	+	export type SetType = 'chow' \| 'pung';
4	+
5	+	/** A completed set. `tile` is the pung tile, or the lowest tile of a chow. */
6	+	export interface TileSet {
7	+	type: SetType;
8	+	tile: Tile;
9	+	concealed: boolean;
10	+	kong?: boolean;
11	+	}
12	+
13	+	export interface Decomposition {
14	+	sets: TileSet[];
15	+	pair: Tile;
16	+	}
17	+
18	+	/** Every way the concealed tiles split into `needSets` sets + one pair. */
19	+	export function decompose(tiles: Tile[], needSets: number): Decomposition[] {
20	+	const counts = toCounts(tiles);
21	+	const total = counts.reduce((a, b) => a + b, 0);
22	+	if (total !== needSets * 3 + 2) return [];
23	+
24	+	const out: Decomposition[] = [];
25	+	const seen = new Set<string>();
26	+
27	+	for (let p = 0; p < NUM_BASIC; p++) {
28	+	if (counts[p] < 2) continue;
29	+	counts[p] -= 2;
30	+	const found: TileSet[][] = [];
31	+	splitSets(counts, needSets, [], found);
32	+	counts[p] += 2;
33	+	for (const sets of found) {
34	+	const key = p + '\|' + sets.map((s) => s.type + s.tile).sort().join(',');
35	+	if (seen.has(key)) continue;
36	+	seen.add(key);
37	+	out.push({ sets, pair: p });
38	+	}
39	+	}
40	+	return out;
41	+	}
42	+
43	+	function splitSets(counts: number[], need: number, acc: TileSet[], out: TileSet[][]) {
44	+	if (need === 0) {
45	+	for (const c of counts) if (c !== 0) return;
46	+	out.push(acc.slice());
47	+	return;
48	+	}
49	+	let i = 0;
50	+	while (i < NUM_BASIC && counts[i] === 0) i++;
51	+	if (i === NUM_BASIC) return;
52	+
53	+	if (counts[i] >= 3) {
54	+	counts[i] -= 3;
55	+	acc.push({ type: 'pung', tile: i, concealed: true });
56	+	splitSets(counts, need - 1, acc, out);
57	+	acc.pop();
58	+	counts[i] += 3;
59	+	}
60	+	if (i < NUM_SUITED && i % 9 <= 6 && counts[i + 1] > 0 && counts[i + 2] > 0) {
61	+	counts[i]--;
62	+	counts[i + 1]--;
63	+	counts[i + 2]--;
64	+	acc.push({ type: 'chow', tile: i, concealed: true });
65	+	splitSets(counts, need - 1, acc, out);
66	+	acc.pop();
67	+	counts[i]++;
68	+	counts[i + 1]++;
69	+	counts[i + 2]++;
70	+	}
71	+	}
72	+
73	+	export function isWinningHand(tiles: Tile[], meldCount: number): boolean {
74	+	return decompose(tiles, 5 - meldCount).length > 0;
75	+	}
76	+
77	+	/** Tiles that would complete the hand if drawn/claimed. `tiles` is the concealed hand. */
78	+	export function waits(tiles: Tile[], meldCount: number): Tile[] {
79	+	const need = 5 - meldCount;
80	+	if (tiles.length !== need * 3 + 1) return [];
81	+	const out: Tile[] = [];
82	+	for (let t = 0; t < NUM_BASIC; t++) {
83	+	if (decompose([...tiles, t], need).length > 0) out.push(t);
84	+	}
85	+	return out;
86	+	}
87	+
88	+	export type WaitShape = 'pair' \| 'edge' \| 'closed' \| 'open';
89	+
90	+	/**
91	+	* How the winning tile was waited on — used for 獨聽 / 單釣.
92	+	* Only meaningful when the hand has a single wait.
93	+	*/
94	+	export function waitShape(concealedBefore: Tile[], winTile: Tile, meldCount: number): WaitShape {
95	+	const need = 5 - meldCount;
96	+	const decs = decompose([...concealedBefore, winTile], need);
97	+	let best: WaitShape = 'open';
98	+	const rank = { pair: 3, edge: 2, closed: 2, open: 1 } as const;
99	+	for (const d of decs) {
100	+	let shape: WaitShape \| null = null;
101	+	if (d.pair === winTile) {
102	+	// could be 單釣 only if the pair really needed this tile
103	+	const c = toCounts(concealedBefore);
104	+	if (c[winTile] === 1) shape = 'pair';
105	+	}
106	+	if (!shape) {
107	+	for (const s of d.sets) {
108	+	if (s.type === 'chow') {
109	+	if (s.tile === winTile && s.tile % 9 === 6) shape = 'edge'; // 7-8 waiting 9? (789 low=7)
110	+	else if (s.tile + 2 === winTile && s.tile % 9 === 0) shape = 'edge'; // 1-2 waiting 3
111	+	else if (s.tile + 1 === winTile) shape = 'closed';
112	+	}
113	+	}
114	+	}
115	+	if (shape && rank[shape] > rank[best]) best = shape;
116	+	}
117	+	return best;
118	+	}

1	+	import { DEFAULT_NAMES, DEFAULT_RULES, type Rules } from './types';
2	+
3	+	const KEY = 'taiwanese-mahjong/prefs';
4	+
5	+	/**
6	+	* Preferences belong to the table, not to a hand: they outlive a save, survive
7	+	* 開新局, and are what a fresh `Game` is built from.
8	+	*/
9	+	export interface Prefs {
10	+	/** Master mute. Off by default — a shared screen should not surprise a room. */
11	+	sound: boolean;
12	+	/** 0..1 */
13	+	volume: number;
14	+	names: string[];
15	+	rules: Rules;
16	+	}
17	+
18	+	export const DEFAULT_PREFS: Prefs = {
19	+	sound: false,
20	+	volume: 0.7,
21	+	names: DEFAULT_NAMES,
22	+	rules: DEFAULT_RULES,
23	+	};
24	+
25	+	export function loadPrefs(): Prefs {
26	+	try {
27	+	const raw = localStorage.getItem(KEY);
28	+	if (!raw) return DEFAULT_PREFS;
29	+	const p = JSON.parse(raw) as Partial<Prefs>;
30	+	return {
31	+	sound: typeof p.sound === 'boolean' ? p.sound : DEFAULT_PREFS.sound,
32	+	volume: clamp(typeof p.volume === 'number' ? p.volume : DEFAULT_PREFS.volume, 0, 1),
33	+	names:
34	+	Array.isArray(p.names) && p.names.length === 4 && p.names.every((n) => typeof n === 'string')
35	+	? p.names
36	+	: DEFAULT_NAMES,
37	+	rules: { ...DEFAULT_RULES, ...(p.rules ?? {}) },
38	+	};
39	+	} catch {
40	+	return DEFAULT_PREFS;
41	+	}
42	+	}
43	+
44	+	export function savePrefs(p: Prefs) {
45	+	try {
46	+	localStorage.setItem(KEY, JSON.stringify(p));
47	+	} catch {
48	+	// Storage unavailable — the settings just don't outlive the tab.
49	+	}
50	+	}
51	+
52	+	export const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));

1	+	import type { GameState } from './engine';
2	+	import { NUM_BASIC, WALL_SIZE } from './tiles';
3	+
4	+	const KEY = 'taiwanese-mahjong/save';
5	+	/** Bump when GameState changes shape; older saves are then ignored rather than crashing. */
6	+	const VERSION = 2;
7	+
8	+	export interface SavedGame {
9	+	version: number;
10	+	savedAt: number;
11	+	state: GameState;
12	+	}
13	+
14	+	/**
15	+	* The game state is plain data, so a save is just its JSON. Written after every
16	+	* move, so a closed lid or a stray refresh costs nothing.
17	+	*/
18	+	export function saveGame(state: GameState) {
19	+	if (state.phase === 'lobby') return;
20	+	try {
21	+	const payload: SavedGame = { version: VERSION, savedAt: Date.now(), state };
22	+	localStorage.setItem(KEY, JSON.stringify(payload));
23	+	} catch {
24	+	// Storage unavailable or full — play carries on unsaved rather than dying.
25	+	}
26	+	}
27	+
28	+	export function loadSave(): SavedGame \| null {
29	+	try {
30	+	const raw = localStorage.getItem(KEY);
31	+	if (!raw) return null;
32	+	const parsed = JSON.parse(raw) as SavedGame;
33	+	if (parsed?.version !== VERSION) return null;
34	+	if (!isPlausible(parsed.state)) return null;
35	+	return parsed;
36	+	} catch {
37	+	return null;
38	+	}
39	+	}
40	+
41	+	export function clearSave() {
42	+	try {
43	+	localStorage.removeItem(KEY);
44	+	} catch {
45	+	// nothing to do
46	+	}
47	+	}
48	+
49	+	/** Guards against a truncated or hand-edited save putting the table in a bad state. */
50	+	function isPlausible(s: GameState \| undefined): boolean {
51	+	if (!s \|\| !Array.isArray(s.players) \|\| s.players.length !== 4) return false;
52	+	if (!Array.isArray(s.wall) \|\| typeof s.phase !== 'string') return false;
53	+	if (s.phase === 'lobby') return false;
54	+	if (!Array.isArray(s.sacred) \|\| s.sacred.length !== 4) return false;
55	+	if (!s.rules \|\| typeof s.rules.base !== 'number') return false;
56	+
57	+	let tiles = s.wall.length;
58	+	for (const p of s.players) {
59	+	if (!p \|\| !Array.isArray(p.hand) \|\| !Array.isArray(p.melds)) return false;
60	+	tiles += p.hand.length + p.flowers.length + p.discards.length;
61	+	for (const m of p.melds) tiles += m.tiles.length;
62	+	}
63	+	if (tiles !== WALL_SIZE) return false;
64	+	return s.players.every((p) => p.hand.every((t) => t >= 0 && t < NUM_BASIC + 8));
65	+	}

1	+	import type { SoundEvent } from './engine';
2	+
3	+	/**
4	+	* Table noise, synthesised rather than sampled — a handful of oscillators is
5	+	* smaller than one .wav and needs no loading, which matters when the whole
6	+	* point is that the cue lands the instant the tile hits the table.
7	+	*
8	+	* Nothing here touches the audio hardware until `play` is first called, so the
9	+	* module is safe to import in tests and safe to load before the user has
10	+	* gestured at the page (browsers refuse to start audio before that).
11	+	*/
12	+
13	+	let ctx: AudioContext \| null = null;
14	+	let master: GainNode \| null = null;
15	+	let noise: AudioBuffer \| null = null;
16	+	let enabled = false;
17	+	let volume = 0.7;
18	+
19	+	function audio(): AudioContext \| null {
20	+	if (typeof window === 'undefined') return null;
21	+	if (!ctx) {
22	+	const Ctor = window.AudioContext ?? (window as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
23	+	if (!Ctor) return null;
24	+	try {
25	+	ctx = new Ctor();
26	+	} catch {
27	+	return null;
28	+	}
29	+	master = ctx.createGain();
30	+	master.gain.value = volume;
31	+	master.connect(ctx.destination);
32	+	}
33	+	// Chrome parks the context until a gesture, and again when the tab sleeps.
34	+	if (ctx.state === 'suspended') void ctx.resume();
35	+	return ctx;
36	+	}
37	+
38	+	/** One second of white noise, reused by every clack. */
39	+	function noiseBuffer(c: AudioContext): AudioBuffer {
40	+	if (!noise) {
41	+	noise = c.createBuffer(1, c.sampleRate, c.sampleRate);
42	+	const d = noise.getChannelData(0);
43	+	for (let i = 0; i < d.length; i++) d[i] = Math.random() * 2 - 1;
44	+	}
45	+	return noise;
46	+	}
47	+
48	+	export function setSoundEnabled(on: boolean) {
49	+	enabled = on;
50	+	if (on) audio(); // unlock now, while we are still inside the click that toggled it
51	+	}
52	+
53	+	export function setVolume(v: number) {
54	+	volume = v;
55	+	if (master && ctx) master.gain.setTargetAtTime(v, ctx.currentTime, 0.01);
56	+	}
57	+
58	+	/** Envelope helper: a tone that starts at `gain` and decays away over `dur`. */
59	+	function tone(
60	+	c: AudioContext,
61	+	opts: {
62	+	freq: number;
63	+	at: number;
64	+	dur: number;
65	+	gain: number;
66	+	type?: OscillatorType;
67	+	/** Slide to this frequency over the life of the note. */
68	+	to?: number;
69	+	},
70	+	) {
71	+	const o = c.createOscillator();
72	+	const g = c.createGain();
73	+	o.type = opts.type ?? 'sine';
74	+	const t = c.currentTime + opts.at;
75	+	o.frequency.setValueAtTime(opts.freq, t);
76	+	if (opts.to !== undefined) o.frequency.exponentialRampToValueAtTime(opts.to, t + opts.dur);
77	+	g.gain.setValueAtTime(0.0001, t);
78	+	g.gain.exponentialRampToValueAtTime(opts.gain, t + 0.004);
79	+	g.gain.exponentialRampToValueAtTime(0.0001, t + opts.dur);
80	+	o.connect(g).connect(master!);
81	+	o.start(t);
82	+	o.stop(t + opts.dur + 0.02);
83	+	}
84	+
85	+	/** Bamboo-on-bamboo: a filtered noise burst with a short woody body under it. */
86	+	function clack(c: AudioContext, at: number, gain = 1) {
87	+	const t = c.currentTime + at;
88	+	const src = c.createBufferSource();
89	+	src.buffer = noiseBuffer(c);
90	+	src.playbackRate.value = 1;
91	+	const bp = c.createBiquadFilter();
92	+	bp.type = 'bandpass';
93	+	bp.frequency.value = 2100;
94	+	bp.Q.value = 1.1;
95	+	const g = c.createGain();
96	+	g.gain.setValueAtTime(0.55 * gain, t);
97	+	g.gain.exponentialRampToValueAtTime(0.0001, t + 0.075);
98	+	src.connect(bp).connect(g).connect(master!);
99	+	src.start(t, Math.random() * 0.5);
100	+	src.stop(t + 0.1);
101	+	tone(c, { freq: 320, to: 160, at, dur: 0.09, gain: 0.28 * gain, type: 'triangle' });
102	+	}
103	+
104	+	/** Struck-metal chime: a fundamental with two inharmonic partials over it. */
105	+	function bell(c: AudioContext, freq: number, at: number, gain = 1, dur = 0.55) {
106	+	tone(c, { freq, at, dur, gain: 0.3 * gain, type: 'sine' });
107	+	tone(c, { freq: freq * 2.02, at, dur: dur * 0.7, gain: 0.13 * gain, type: 'sine' });
108	+	tone(c, { freq: freq * 3.01, at, dur: dur * 0.4, gain: 0.06 * gain, type: 'sine' });
109	+	}
110	+
111	+	/**
112	+	* Each cue has its own shape so it is identifiable without looking up — the
113	+	* whole reason for the feature is a player noticing across the table.
114	+	*/
115	+	export function play(e: SoundEvent) {
116	+	if (!enabled) return;
117	+	const c = audio();
118	+	if (!c \|\| !master) return;
119	+
120	+	switch (e) {
121	+	// A tile laid down. Dry and short so it never masks the chime after it.
122	+	case 'discard':
123	+	clack(c, 0);
124	+	break;
125	+	// Somebody's claim window is open. Rising two-note bell, easy to hear over
126	+	// talk, and deliberately unlike the clack that precedes it.
127	+	case 'claimWindow':
128	+	bell(c, 784, 0.06, 1, 0.4); // G5
129	+	bell(c, 1047, 0.19, 0.9, 0.55); // C6
130	+	break;
131	+	case 'claim':
132	+	clack(c, 0, 0.8);
133	+	clack(c, 0.055, 0.9);
134	+	bell(c, 660, 0.02, 0.5, 0.3);
135	+	break;
136	+	// Four tiles going down, plus a replacement off the back of the wall.
137	+	case 'kong':
138	+	clack(c, 0, 0.7);
139	+	clack(c, 0.05, 0.8);
140	+	clack(c, 0.1, 0.9);
141	+	clack(c, 0.15, 1);
142	+	bell(c, 523, 0.16, 0.55, 0.5);
143	+	break;
144	+	case 'flower':
145	+	bell(c, 1319, 0, 0.45, 0.35);
146	+	break;
147	+	// 胡牌 — a rising figure, the only cue that takes its time.
148	+	case 'win':
149	+	bell(c, 523, 0, 1, 0.5);
150	+	bell(c, 659, 0.11, 1, 0.5);
151	+	bell(c, 784, 0.22, 1, 0.6);
152	+	bell(c, 1047, 0.33, 1.1, 1.1);
153	+	break;
154	+	// 流局 — the same figure, falling and dulled.
155	+	case 'drawGame':
156	+	bell(c, 523, 0, 0.7, 0.5);
157	+	bell(c, 415, 0.13, 0.7, 0.6);
158	+	bell(c, 330, 0.26, 0.7, 0.9);
159	+	break;
160	+	// Sixteen tiles apiece, so a scatter rather than a beat.
161	+	case 'deal':
162	+	for (let i = 0; i < 9; i++) clack(c, i * 0.045 + Math.random() * 0.02, 0.4);
163	+	break;
164	+	case 'undo':
165	+	tone(c, { freq: 700, to: 330, at: 0, dur: 0.22, gain: 0.18, type: 'triangle' });
166	+	break;
167	+	}
168	+	}

1	+	import { decompose, waits, waitShape, type Decomposition, type TileSet } from './hu';
2	+	import {
3	+	EAST,
4	+	NUM_SUITED,
5	+	RED,
6	+	WHITE,
7	+	flowerSeat,
8	+	flowerSet,
9	+	isHonor,
10	+	isSuited,
11	+	suitOf,
12	+	type Tile,
13	+	} from './tiles';
14	+	import { meldIsConcealed, meldIsKong, type Meld, type SeatId } from './types';
15	+
16	+	export interface WinContext {
17	+	winner: SeatId;
18	+	dealer: SeatId;
19	+	/** 連莊 count: 0 on a fresh dealer, 1 after one repeat, ... */
20	+	dealerStreak: number;
21	+	/** 圈風 0=東 1=南 2=西 3=北 */
22	+	roundWind: number;
23	+	melds: Meld[];
24	+	/** Concealed tiles, NOT including the winning tile. */
25	+	concealed: Tile[];
26	+	winTile: Tile;
27	+	selfDraw: boolean;
28	+	/** Discarder, when won off a discard. */
29	+	loser: SeatId \| null;
30	+	flowers: Tile[];
31	+	robKong: boolean;
32	+	afterKong: boolean;
33	+	lastTile: boolean;
34	+	lastDiscard: boolean;
35	+	heavenly: boolean;
36	+	earthly: boolean;
37	+	humanly: boolean;
38	+	}
39	+
40	+	export interface TaiItem {
41	+	/** The term as it is called at the table. */
42	+	name: string;
43	+	/** Plain-English gloss for players still learning the terms. */
44	+	en: string;
45	+	tai: number;
46	+	}
47	+
48	+	export interface TaiResult {
49	+	tai: number;
50	+	items: TaiItem[];
51	+	}
52	+
53	+	/** Score the hand, taking the highest-value interpretation of ambiguous hands. */
54	+	export function scoreHand(ctx: WinContext): TaiResult {
55	+	const need = 5 - ctx.melds.length;
56	+	const decs = decompose([...ctx.concealed, ctx.winTile], need);
57	+	if (decs.length === 0) return { tai: 0, items: [] };
58	+
59	+	let best: TaiResult = { tai: -1, items: [] };
60	+	for (const d of decs) {
61	+	const r = scoreDecomposition(ctx, d);
62	+	if (r.tai > best.tai) best = r;
63	+	}
64	+	return best;
65	+	}
66	+
67	+	function seatWindOf(seat: SeatId, dealer: SeatId): number {
68	+	return (seat - dealer + 4) % 4;
69	+	}
70	+
71	+	function scoreDecomposition(ctx: WinContext, d: Decomposition): TaiResult {
72	+	const items: TaiItem[] = [];
73	+	const add = (name: string, en: string, tai: number) => {
74	+	if (tai !== 0) items.push({ name, en, tai });
75	+	};
76	+
77	+	// ---- assemble the five sets -------------------------------------------
78	+	const sets: TileSet[] = ctx.melds.map((m) => ({
79	+	type: m.kind === 'chow' ? 'chow' : 'pung',
80	+	tile: m.kind === 'chow' ? Math.min(...m.tiles) : m.tiles[0],
81	+	concealed: meldIsConcealed(m),
82	+	kong: meldIsKong(m),
83	+	}));
84	+	for (const s of d.sets) sets.push({ ...s });
85	+
86	+	// A set completed by someone else's discard is not concealed.
87	+	if (!ctx.selfDraw) {
88	+	const i = sets.findIndex(
89	+	(s) =>
90	+	s.concealed &&
91	+	!s.kong &&
92	+	(s.type === 'pung'
93	+	? s.tile === ctx.winTile
94	+	: ctx.winTile >= s.tile && ctx.winTile <= s.tile + 2),
95	+	);
96	+	if (i >= 0) sets[i].concealed = false;
97	+	}
98	+
99	+	const exposedCount = ctx.melds.filter((m) => !meldIsConcealed(m)).length;
100	+	const fullyConcealed = exposedCount === 0; // 門清 (暗槓 still counts)
101	+	const seatWind = seatWindOf(ctx.winner, ctx.dealer);
102	+
103	+	const allTiles: Tile[] = [];
104	+	for (const m of ctx.melds) allTiles.push(...m.tiles);
105	+	allTiles.push(...ctx.concealed, ctx.winTile);
106	+
107	+	// ---- flowers ----------------------------------------------------------
108	+	if (ctx.flowers.length === 8) {
109	+	add('八仙過海', 'All eight flowers', 8);
110	+	} else {
111	+	const own = ctx.flowers.filter((f) => flowerSeat(f) === seatWind).length;
112	+	if (own) add(`正花 ×${own}`, `Seat flowers ×${own}`, own);
113	+	for (const set of [0, 1]) {
114	+	if (ctx.flowers.filter((f) => flowerSet(f) === set).length === 4) {
115	+	add(set === 0 ? '花槓 (四季)' : '花槓 (四花)', set === 0 ? 'Four seasons' : 'Four flowers', 2);
116	+	}
117	+	}
118	+	}
119	+
120	+	// ---- honor sets -------------------------------------------------------
121	+	const pungs = sets.filter((s) => s.type === 'pung');
122	+	const dragonPungs = pungs.filter((s) => s.tile >= RED && s.tile <= WHITE).length;
123	+	const windPungs = pungs.filter((s) => s.tile >= EAST && s.tile < RED);
124	+	const dragonPair = d.pair >= RED && d.pair <= WHITE;
125	+	const windPair = d.pair >= EAST && d.pair < RED;
126	+
127	+	if (dragonPungs === 3) add('大三元', 'Big three dragons', 8);
128	+	else if (dragonPungs === 2 && dragonPair) add('小三元', 'Little three dragons', 4);
129	+	else if (dragonPungs > 0) add(`三元牌 ×${dragonPungs}`, `Dragon pung ×${dragonPungs}`, dragonPungs);
130	+
131	+	const windPungCount = windPungs.length;
132	+	if (windPungCount === 4) add('大四喜', 'Big four winds', 16);
133	+	else if (windPungCount === 3 && windPair) add('小四喜', 'Little four winds', 8);
134	+	else {
135	+	if (windPungs.some((s) => s.tile - EAST === ctx.roundWind)) add('圈風', 'Round wind', 1);
136	+	if (windPungs.some((s) => s.tile - EAST === seatWind)) add('門風', 'Seat wind', 1);
137	+	}
138	+
139	+	// ---- shape ------------------------------------------------------------
140	+	const allPungs = sets.every((s) => s.type === 'pung');
141	+	const allChows = sets.every((s) => s.type === 'chow');
142	+	if (allPungs) add('碰碰胡', 'All pungs', 4);
143	+
144	+	const suits = new Set(allTiles.filter(isSuited).map(suitOf));
145	+	const hasHonor = allTiles.some(isHonor);
146	+	if (!allTiles.some(isSuited)) add('字一色', 'All honors', 16);
147	+	else if (suits.size === 1)
148	+	add(hasHonor ? '混一色' : '清一色', hasHonor ? 'Half flush' : 'Full flush', hasHonor ? 4 : 8);
149	+
150	+	const kinds = new Set(allTiles.map(suitOf));
151	+	if (kinds.has('m') && kinds.has('s') && kinds.has('p') && kinds.has('wind') && kinds.has('dragon')) {
152	+	add('五門齊', 'All five types', 2);
153	+	}
154	+
155	+	const concealedPungs = sets.filter((s) => s.type === 'pung' && s.concealed).length;
156	+	if (concealedPungs === 5) add('五暗刻', 'Five concealed pungs', 8);
157	+	else if (concealedPungs === 4) add('四暗刻', 'Four concealed pungs', 5);
158	+	else if (concealedPungs === 3) add('三暗刻', 'Three concealed pungs', 2);
159	+
160	+	const pairIsValuable =
161	+	dragonPair \|\| (windPair && (d.pair - EAST === ctx.roundWind \|\| d.pair - EAST === seatWind));
162	+	if (allChows && !pairIsValuable && !ctx.selfDraw && !hasHonorSet(sets)) add('平胡', 'All chows', 2);
163	+
164	+	// ---- how it was won ---------------------------------------------------
165	+	if (ctx.heavenly) add('天胡', 'Blessing of heaven', 16);
166	+	else if (ctx.earthly) add('地胡', 'Blessing of earth', 16);
167	+	else if (ctx.humanly) add('人胡', 'Blessing of man', 8);
168	+
169	+	if (ctx.selfDraw) add('自摸', 'Self-draw', 1);
170	+	if (fullyConcealed) add('門清', 'Fully concealed', 1);
171	+	if (fullyConcealed && ctx.selfDraw) add('門清自摸', 'Concealed self-draw', 1);
172	+	if (!ctx.selfDraw && exposedCount === 5) add('全求人', 'All melded', 2);
173	+
174	+	if (ctx.robKong) add('搶槓', 'Robbing the kong', 1);
175	+	if (ctx.afterKong) add('槓上開花', 'Win off a kong', 1);
176	+	if (ctx.lastTile) add('海底撈月', 'Last tile of the wall', 1);
177	+	if (ctx.lastDiscard) add('河底撈魚', 'Last discard', 1);
178	+
179	+	const w = waits(ctx.concealed, ctx.melds.length);
180	+	if (w.length === 1) {
181	+	const shape = waitShape(ctx.concealed, ctx.winTile, ctx.melds.length);
182	+	add(shape === 'pair' ? '單釣' : '獨聽', shape === 'pair' ? 'Single pair wait' : 'Sole wait', 1);
183	+	}
184	+
185	+	// ---- dealer -----------------------------------------------------------
186	+	// 莊家 tai only applies when the dealer is the winner; when the dealer is a
187	+	// payer the same amount is billed to the dealer alone (see settleHand).
188	+	if (ctx.winner === ctx.dealer)
189	+	add(dealerLabel(ctx.dealerStreak), dealerLabelEn(ctx.dealerStreak), dealerTai(ctx.dealerStreak));
190	+
191	+	return { tai: items.reduce((a, i) => a + i.tai, 0), items };
192	+	}
193	+
194	+	function hasHonorSet(sets: TileSet[]): boolean {
195	+	return sets.some((s) => s.tile >= NUM_SUITED);
196	+	}
197	+
198	+	/** 莊 1台, 連N拉N → 2N+1台. */
199	+	export function dealerTai(streak: number): number {
200	+	return 1 + 2 * streak;
201	+	}
202	+
203	+	export function dealerLabel(streak: number): string {
204	+	return streak > 0 ? `莊家連${streak}拉${streak}` : '莊家';
205	+	}
206	+
207	+	export function dealerLabelEn(streak: number): string {
208	+	return streak > 0 ? `Dealer, ${streak} in a row` : 'Dealer';
209	+	}

1	+	// Tile codes 0..41
2	+	// 0..8 萬 (characters) 1-9
3	+	// 9..17 條 (bamboo) 1-9
4	+	// 18..26 筒 (dots) 1-9
5	+	// 27..30 winds 東南西北
6	+	// 31..33 dragons 中發白
7	+	// 34..37 seasons 春夏秋冬 (seat 0..3)
8	+	// 38..41 flowers 梅蘭菊竹 (seat 0..3)
9	+
10	+	export type Tile = number;
11	+
12	+	export const NUM_SUITED = 27;
13	+	export const NUM_BASIC = 34; // everything except flowers
14	+	export const FIRST_FLOWER = 34;
15	+	export const NUM_TILES = 42;
16	+	/** Tiles in a full wall: 34 basic × 4 + 8 flowers. */
17	+	export const WALL_SIZE = 144;
18	+	/** Stacks of two, 18 to a side of the square. */
19	+	export const WALL_STACKS = WALL_SIZE / 2;
20	+	export const STACKS_PER_SIDE = WALL_STACKS / 4;
21	+
22	+	export const EAST = 27;
23	+	export const SOUTH = 28;
24	+	export const WEST = 29;
25	+	export const NORTH = 30;
26	+	export const RED = 31;
27	+	export const GREEN = 32;
28	+	export const WHITE = 33;
29	+
30	+	export type SuitKind = 'm' \| 's' \| 'p' \| 'wind' \| 'dragon' \| 'flower';
31	+
32	+	export function suitOf(t: Tile): SuitKind {
33	+	if (t < 9) return 'm';
34	+	if (t < 18) return 's';
35	+	if (t < 27) return 'p';
36	+	if (t < 31) return 'wind';
37	+	if (t < 34) return 'dragon';
38	+	return 'flower';
39	+	}
40	+
41	+	export const isFlower = (t: Tile) => t >= FIRST_FLOWER;
42	+	export const isHonor = (t: Tile) => t >= NUM_SUITED && t < NUM_BASIC;
43	+	export const isSuited = (t: Tile) => t < NUM_SUITED;
44	+	/** 1..9 for suited tiles, 0 otherwise */
45	+	export const rankOf = (t: Tile) => (isSuited(t) ? (t % 9) + 1 : 0);
46	+	export const isTerminal = (t: Tile) => isSuited(t) && (rankOf(t) === 1 \|\| rankOf(t) === 9);
47	+
48	+	/** The seat (0..3) a flower belongs to. */
49	+	export const flowerSeat = (t: Tile) => (t - FIRST_FLOWER) % 4;
50	+	/** 0 = 春夏秋冬 set, 1 = 梅蘭菊竹 set */
51	+	export const flowerSet = (t: Tile) => (t - FIRST_FLOWER < 4 ? 0 : 1);
52	+
53	+	const DIGITS = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
54	+	const HONORS = ['東', '南', '西', '北', '中', '發', '白'];
55	+	const FLOWERS = ['春', '夏', '秋', '冬', '梅', '蘭', '菊', '竹'];
56	+	const SUIT_MARK = { m: '萬', s: '條', p: '筒' } as const;
57	+
58	+	/** Big glyph shown on the tile face. */
59	+	export function faceOf(t: Tile): { main: string; sub?: string } {
60	+	const s = suitOf(t);
61	+	if (s === 'm' \|\| s === 's' \|\| s === 'p') {
62	+	return { main: DIGITS[rankOf(t) - 1], sub: SUIT_MARK[s] };
63	+	}
64	+	if (s === 'flower') return { main: FLOWERS[t - FIRST_FLOWER] };
65	+	return { main: HONORS[t - NUM_SUITED] };
66	+	}
67	+
68	+	/** Short text label, e.g. "五萬", "東", "春". */
69	+	export function labelOf(t: Tile): string {
70	+	const f = faceOf(t);
71	+	return f.main + (f.sub ?? '');
72	+	}
73	+
74	+	export const WIND_NAMES = ['東', '南', '西', '北'];
75	+	export const WIND_EN = ['East', 'South', 'West', 'North'];
76	+
77	+	/**
78	+	* Column of each tile in the sprite sheet (gnome-mahjongg's "postmodern"
79	+	* theme, 43 columns × 2 rows; the second row is the highlighted variant).
80	+	* Its order is dots, winds, dragons, characters, bamboo, seasons, flowers —
81	+	* not ours, so this is the lookup between the two.
82	+	*/
83	+	export const SPRITE_COL: number[] = [
84	+	15, 16, 17, 18, 19, 20, 21, 22, 23, // 萬 1-9
85	+	24, 25, 26, 27, 28, 29, 30, 31, 32, // 條 1-9
86	+	0, 1, 2, 3, 4, 5, 6, 7, 8, // 筒 1-9
87	+	12, 11, 10, 9, // 東南西北
88	+	13, 14, 37, // 中發白
89	+	33, 34, 35, 36, // 春夏秋冬
90	+	38, 39, 40, 41, // 梅蘭菊竹
91	+	];
92	+	export const SPRITE_COLS = 43;
93	+
94	+	/** A full Taiwanese wall: 4× each basic tile + 1× each flower = 144. */
95	+	export function buildWall(): Tile[] {
96	+	const w: Tile[] = [];
97	+	for (let t = 0; t < NUM_BASIC; t++) for (let i = 0; i < 4; i++) w.push(t);
98	+	for (let t = FIRST_FLOWER; t < NUM_TILES; t++) w.push(t);
99	+	return w;
100	+	}
101	+
102	+	/** mulberry32 — small deterministic PRNG so hands can be replayed from a seed. */
103	+	export function makeRng(seed: number) {
104	+	let a = seed >>> 0;
105	+	return () => {
106	+	a = (a + 0x6d2b79f5) \| 0;
107	+	let t = Math.imul(a ^ (a >>> 15), 1 \| a);
108	+	t = (t + Math.imul(t ^ (t >>> 7), 61 \| t)) ^ t;
109	+	return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
110	+	};
111	+	}
112	+
113	+	export function shuffle<T>(arr: T[], rng: () => number): T[] {
114	+	const a = arr.slice();
115	+	for (let i = a.length - 1; i > 0; i--) {
116	+	const j = Math.floor(rng() * (i + 1));
117	+	[a[i], a[j]] = [a[j], a[i]];
118	+	}
119	+	return a;
120	+	}
121	+
122	+	export function sortTiles(tiles: Tile[]): Tile[] {
123	+	return tiles.slice().sort((a, b) => a - b);
124	+	}
125	+
126	+	export function toCounts(tiles: Tile[]): number[] {
127	+	const c = new Array(NUM_BASIC).fill(0);
128	+	for (const t of tiles) if (t < NUM_BASIC) c[t]++;
129	+	return c;
130	+	}

1	+	{
2	+	"name": "mahjong",
3	+	"version": "0.0.0",
4	+	"lockfileVersion": 3,
5	+	"requires": true,
6	+	"packages": {
7	+	"": {
8	+	"name": "mahjong",
9	+	"version": "0.0.0",
10	+	"dependencies": {
11	+	"react": "^19.2.8",
12	+	"react-dom": "^19.2.8"
13	+	},
14	+	"devDependencies": {
15	+	"@types/node": "^24.13.3",
16	+	"@types/react": "^19.2.17",
17	+	"@types/react-dom": "^19.2.3",
18	+	"@vitejs/plugin-react": "^6.0.4",
19	+	"oxlint": "^1.75.0",
20	+	"typescript": "~6.0.2",
21	+	"vite": "^8.2.0",
22	+	"vitest": "^4.1.10"
23	+	}
24	+	},
25	+	"node_modules/@jridgewell/sourcemap-codec": {
26	+	"version": "1.5.5",
27	+	"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
28	+	"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
29	+	"dev": true,
30	+	"license": "MIT"
31	+	},
32	+	"node_modules/@oxc-project/types": {
33	+	"version": "0.143.0",
34	+	"resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.143.0.tgz",
35	+	"integrity": "sha512-u6JZdLBTLotrNC9Vd6vPssINdzcCzleKAH6EJKImQb7GtYvX5keN2dxkoK44stCc4tffE6QQRtZTXVSzsLUlWA==",
36	+	"dev": true,
37	+	"license": "MIT",
38	+	"funding": {
39	+	"url": "https://github.com/sponsors/Boshen"
40	+	}

1	+	<?xml version="1.0" encoding="utf-8"?>
2	+	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3	+	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="5504" height="352" viewBox="0 0 2752 176" version="1.1">
4	+	<defs>
5	+	<g id="bt1">
6	+	<path d="M9,0C8.47,0,7.96,0.21,7.59,0.59l-7,7C0.21,7.96,0,8.47,0,9v77c0,1.1,0.9,2,2,2h53c0.53,0,1.04-0.21,1.41-0.59l7-7C63.79,80.04,64,79.53,64,79V2c0-1.1-0.9-2-2-2H9z"/>
7	+	<path fill="#9F9F9F" d="M11.75,78.25l-9,9h9H55c0.33,0,0.65-0.13,0.88-0.37l7-7c0.23-0.23,0.37-1.3,0.37-1.63H11.75z"/>
8	+	<path fill="#D7D7D7" d="M8.12,1.12l-7,7C0.88,8.35,0.75,8.67,0.75,9v66.25v1v9l2,2l7-7v-4v-1V0.75C9.42,0.75,8.35,0.88,8.12,1.12z"/>
9	+	<path fill="#BFBFBF" d="M1.61,86.89l10.14-10.14v-0.5L1.34,86.66C1.42,86.75,1.51,86.82,1.61,86.89z"/>
10	+	<path fill="#B7B7B7" d="M1.93,87.07l9.82-9.82v-0.5L1.61,86.89C1.71,86.96,1.82,87.02,1.93,87.07z"/>
11	+	<path fill="#AFAFAF" d="M2.3,87.2l9.45-9.45v-0.5l-9.82,9.82C2.05,87.12,2.17,87.17,2.3,87.2z"/>
12	+	<path fill="#A7A7A7" d="M11.75,77.75L2.3,87.2c0.14,0.03,0.29,0.05,0.45,0.05l9-9V77.75z"/>
13	+	<path fill="#C7C7C7" d="M1.34,86.66l10.41-10.41h-0.5L1.11,86.39C1.18,86.49,1.25,86.58,1.34,86.66z"/>
14	+	<path fill="#CDCDCD" d="M1.11,86.39l10.14-10.14h-0.5l-9.82,9.82C0.98,86.18,1.04,86.29,1.11,86.39z"/>
15	+	<path fill="#D2D2D2" d="M0.93,86.07l9.82-9.82h-0.5L0.8,85.7C0.83,85.83,0.88,85.95,0.93,86.07z"/>
16	+	<path fill="#D7D7D7" d="M10.25,76.25h-0.5l-9,9c0,0.15,0.02,0.3,0.05,0.45L10.25,76.25z"/>
17	+	<path fill="#F6F6F6" d="M63.25,78.25V2.75c0-1.1-0.9-2-2-2h-50.5c-1.1,0-2,0.9-2,2v75.5c0,1.1,0.9,2,2,2h50.5C62.35,80.25,63.25,79.35,63.25,78.25z"/>
18	+	<path fill="#FFFFFF" d="M8.75,78.25V2.75c0-1.1,0.9-2,2-2h-1c-1.1,0-2,0.9-2,2v75.5c0,1.1,0.9,2,2,2h1C9.65,80.25,8.75,79.35,8.75,78.25z"/>
19	+	</g>
20	+	<g id="bt2">
21	+	<path fill="#0000FF" d="M9,0C8.47,0,7.96,0.21,7.59,0.59l-7,7C0.21,7.96,0,8.47,0,9v77c0,1.1,0.9,2,2,2h53c0.53,0,1.04-0.21,1.41-0.59l7-7C63.79,80.04,64,79.53,64,79V2c0-1.1-0.9-2-2-2H9z"/>
22	+	<path fill="#8F8FFF" d="M11.75,78.25l-9,9h9H55c0.33,0,0.65-0.13,0.88-0.37l7-7c0.23-0.23,0.37-1.3,0.37-1.63H11.75z"/>
23	+	<path fill="#C7C7FF" d="M8.12,1.12l-7,7C0.88,8.35,0.75,8.67,0.75,9v66.25v1v9l2,2l7-7v-4v-1V0.75C9.42,0.75,8.35,0.88,8.12,1.12z"/>
24	+	<path fill="#AFAFFF" d="M1.61,86.89l10.14-10.14v-0.5L1.34,86.66C1.42,86.75,1.51,86.82,1.61,86.89z"/>
25	+	<path fill="#A7A7FF" d="M1.93,87.07l9.82-9.82v-0.5L1.61,86.89C1.71,86.96,1.82,87.02,1.93,87.07z"/>
26	+	<path fill="#9F9FFF" d="M2.3,87.2l9.45-9.45v-0.5l-9.82,9.82C2.05,87.12,2.17,87.17,2.3,87.2z"/>
27	+	<path fill="#9797FF" d="M11.75,77.75L2.3,87.2c0.14,0.03,0.29,0.05,0.45,0.05l9-9V77.75z"/>
28	+	<path fill="#B7B7FF" d="M1.34,86.66l10.41-10.41h-0.5L1.11,86.39C1.18,86.49,1.25,86.58,1.34,86.66z"/>
29	+	<path fill="#BDBDFF" d="M1.11,86.39l10.14-10.14h-0.5l-9.82,9.82C0.98,86.18,1.04,86.29,1.11,86.39z"/>
30	+	<path fill="#C2C2FF" d="M0.93,86.07l9.82-9.82h-0.5L0.8,85.7C0.83,85.83,0.88,85.95,0.93,86.07z"/>
31	+	<path fill="#C7C7FF" d="M10.25,76.25h-0.5l-9,9c0,0.15,0.02,0.3,0.05,0.45L10.25,76.25z"/>
32	+	<path fill="#E3E3FF" d="M61.25,0.75H9.75c-1.1,0-2,0.9-2,2v75.5c0,1.1,0.9,2,2,2h51.5c1.1,0,2-0.9,2-2V2.75C63.25,1.65,62.35,0.75,61.25,0.75z"/>
33	+	<path fill="#FFFFFF" stroke="#0000FF" stroke-width="3" d="M60,74.19c0,1.55-1.22,2.81-2.72,2.81H13.72c-1.5,0-2.72-1.26-2.72-2.81V6.81C11,5.26,12.22,4,13.72,4h43.56C58.78,4,60,5.26,60,6.81V74.19z"/>
34	+	</g>
35	+	<path id="bams" fill="#006C00" d="M11,13.5c0-0.92-1.25-1.71-3.06-2.09V4.44C9.75,4.06,11,3.27,11,2.35C11,1.05,8.54,0,5.5,0S0,1.05,0,2.35c0,0.92,1.25,1.71,3.06,2.09v6.97C1.25,11.79,0,12.58,0,13.5c0,0.92,1.25,1.71,3.06,2.09v6.96C1.25,22.94,0,23.73,0,24.65C0,25.95,2.46,27,5.5,27s5.5-1.05,5.5-2.35c0-0.92-1.25-1.71-3.06-2.09v-6.96C9.75,15.21,11,14.42,11,13.5z M5.5,1.47c1.35,0,2.44,0.39,2.44,0.88c0,0.41-0.78,0.75-1.83,0.85v5.94c0,0.46-0.28,0.84-0.61,0.84S4.89,9.6,4.89,9.14V3.2C3.84,3.1,3.06,2.76,3.06,2.35C3.06,1.86,4.15,1.47,5.5,1.47z M5.5,25.53c-1.35,0-2.44-0.39-2.44-0.88c0-0.41,0.78-0.75,1.83-0.85v-5.94c0-0.46,0.28-0.84,0.61-0.84s0.61,0.38,0.61,0.84v5.94c1.05,0.1,1.83,0.44,1.83,0.85C7.94,25.14,6.85,25.53,5.5,25.53z M5.5,14.38c-1.86,0-3.36-0.39-3.36-0.88c0-0.49,1.5-0.88,3.36-0.88s3.36,0.39,3.36,0.88C8.86,13.99,7.36,14.38,5.5,14.38z"/>
36	+	<path id="bams2" fill="#9C0000" d="M11,13.5c0-0.92-1.25-1.71-3.06-2.09V4.44C9.75,4.06,11,3.27,11,2.35C11,1.05,8.54,0,5.5,0S0,1.05,0,2.35c0,0.92,1.25,1.71,3.06,2.09v6.97C1.25,11.79,0,12.58,0,13.5c0,0.92,1.25,1.71,3.06,2.09v6.96C1.25,22.94,0,23.73,0,24.65C0,25.95,2.46,27,5.5,27s5.5-1.05,5.5-2.35c0-0.92-1.25-1.71-3.06-2.09v-6.96C9.75,15.21,11,14.42,11,13.5z M5.5,1.47c1.35,0,2.44,0.39,2.44,0.88c0,0.41-0.78,0.75-1.83,0.85v5.94c0,0.46-0.28,0.84-0.61,0.84S4.89,9.6,4.89,9.14V3.2C3.84,3.1,3.06,2.76,3.06,2.35C3.06,1.86,4.15,1.47,5.5,1.47z M5.5,25.53c-1.35,0-2.44-0.39-2.44-0.88c0-0.41,0.78-0.75,1.83-0.85v-5.94c0-0.46,0.28-0.84,0.61-0.84s0.61,0.38,0.61,0.84v5.94c1.05,0.1,1.83,0.44,1.83,0.85C7.94,25.14,6.85,25.53,5.5,25.53z M5.5,14.38c-1.86,0-3.36-0.39-3.36-0.88c0-0.49,1.5-0.88,3.36-0.88s3.36,0.39,3.36,0.88C8.86,13.99,7.36,14.38,5.5,14.38z"/>
37	+	<g id="dots">
38	+	<path fill="#10106C" d="M9,1.42c-4.18,0-7.58,3.4-7.58,7.58s3.4,7.58,7.58,7.58c4.18,0,7.58-3.4,7.58-7.58S13.18,1.42,9,1.42zM9,15.11c-1.36,0-2.49-0.97-2.75-2.25c0.78,0.56,1.72,0.89,2.75,0.89c1.03,0,1.97-0.34,2.75-0.89C11.49,14.14,10.36,15.11,9,15.11z M9,2.89c1.36,0,2.49,0.97,2.75,2.25C10.97,4.59,10.03,4.25,9,4.25c-1.03,0-1.97,0.34-2.75,0.89C6.51,3.86,7.64,2.89,9,2.89z M12.75,9c0,0.57-0.14,1.11-0.37,1.59C12.04,9.92,11.51,9.37,10.85,9c0.66-0.37,1.19-0.92,1.53-1.59C12.61,7.89,12.75,8.43,12.75,9z M5.25,9c0-0.57,0.14-1.11,0.37-1.59C5.96,8.08,6.49,8.63,7.15,9c-0.66,0.37-1.19,0.92-1.53,1.59C5.39,10.11,5.25,9.57,5.25,9z M11.59,11.7c-1.02-0.27-1.82-1.1-2.03-2.14c1.04,0.21,1.87,1.01,2.14,2.03C11.66,11.63,11.63,11.66,11.59,11.7z M6.3,11.59c0.27-1.02,1.1-1.82,2.15-2.03c-0.21,1.04-1.01,1.87-2.03,2.14C6.37,11.66,6.34,11.63,6.3,11.59z M6.41,6.3c1.02,0.27,1.82,1.1,2.03,2.15C7.4,8.23,6.57,7.43,6.3,6.41C6.34,6.37,6.37,6.34,6.41,6.3z M11.7,6.41c-0.27,1.02-1.1,1.82-2.14,2.03c0.21-1.05,1.01-1.87,2.03-2.15C11.63,6.34,11.66,6.37,11.7,6.41z M9,7.15C8.63,6.49,8.08,5.96,7.41,5.62C7.89,5.39,8.43,5.25,9,5.25s1.11,0.14,1.59,0.37C9.92,5.96,9.37,6.49,9,7.15z M9,10.85c0.37,0.66,0.92,1.19,1.59,1.53c-0.49,0.23-1.02,0.37-1.59,0.37s-1.11-0.14-1.59-0.37C8.08,12.04,8.63,11.51,9,10.85z M5.14,11.75C3.86,11.49,2.89,10.36,2.89,9s0.97-2.49,2.25-2.75C4.59,7.03,4.25,7.97,4.25,9C4.25,10.03,4.59,10.97,5.14,11.75z M12.86,6.25c1.28,0.26,2.25,1.39,2.25,2.75s-0.97,2.49-2.25,2.75c0.56-0.78,0.89-1.72,0.89-2.75C13.75,7.97,13.41,7.03,12.86,6.25z M15.01,6.33c-0.59-0.6-1.38-0.99-2.25-1.09c-0.11-0.88-0.49-1.66-1.09-2.25C13.15,3.65,14.35,4.85,15.01,6.33z M6.33,2.99c-0.6,0.59-0.98,1.38-1.09,2.25C4.36,5.35,3.58,5.73,2.99,6.33C3.65,4.85,4.85,3.65,6.33,2.99z M2.99,11.67c0.59,0.6,1.38,0.99,2.25,1.09c0.11,0.88,0.49,1.66,1.09,2.25C4.85,14.35,3.65,13.15,2.99,11.67z M11.67,15.01c0.6-0.59,0.99-1.38,1.09-2.25c0.88-0.11,1.66-0.49,2.25-1.09C14.35,13.15,13.15,14.35,11.67,15.01z"/>
39	+	<path fill="#10106C" d="M9,0C4.04,0,0,4.04,0,9c0,4.96,4.04,9,9,9c4.96,0,9-4.04,9-9C18,4.04,13.96,0,9,0z M9,17c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8S13.41,17,9,17z"/>
40	+	</g>

1	+	import { StrictMode } from 'react'
2	+	import { createRoot } from 'react-dom/client'
3	+	import App from './App.tsx'
4	+
5	+	createRoot(document.getElementById('root')!).render(
6	+	<StrictMode>
7	+	<App />
8	+	</StrictMode>,
9	+	)

1	+	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600;900&display=swap');
2	+
3	+	:root {
4	+	--depth: clamp(232px, 30vh, 330px);
5	+	--h-len: calc(100vw - 2 * var(--depth));
6	+	--v-len: 100vh;
7	+
8	+	--felt: #0f4534;
9	+	--felt-2: #0a3126;
10	+	--ivory: #f6f0e2;
11	+	--ivory-edge: #d9cfb6;
12	+	--ink: #21262b;
13	+	--gold: #d9b45c;
14	+	--red: #b3261e;
15	+	--green: #1c7a4b;
16	+	--blue: #1d5aa8;
17	+	}
18	+
19	+	* {
20	+	box-sizing: border-box;
21	+	-webkit-tap-highlight-color: transparent;
22	+	}
23	+
24	+	html,
25	+	body,
26	+	#root {
27	+	height: 100%;
28	+	margin: 0;
29	+	overflow: hidden;
30	+	overscroll-behavior: none;
31	+	touch-action: manipulation;
32	+	user-select: none;
33	+	}
34	+
35	+	body {
36	+	font-family: 'Noto Sans TC', system-ui, sans-serif;
37	+	color: var(--ivory);
38	+	background: var(--felt-2);
39	+	}
40	+

1	+	import type { Tile } from './tiles';
2	+
3	+	export type SeatId = 0 \| 1 \| 2 \| 3;
4	+
5	+	/** Placeholder names, until somebody types their own on the settings screen. */
6	+	export const DEFAULT_NAMES = ['玩家 1', '玩家 2', '玩家 3', '玩家 4'];
7	+
8	+	export type MeldKind =
9	+	\| 'chow' // 吃
10	+	\| 'pung' // 碰
11	+	\| 'kong' // 明槓 (claimed from a discard)
12	+	\| 'ankong' // 暗槓 (four from hand)
13	+	\| 'addkong'; // 加槓 (fourth tile added to an exposed pung)
14	+
15	+	export interface Meld {
16	+	kind: MeldKind;
17	+	/** Sorted tiles making up the meld. */
18	+	tiles: Tile[];
19	+	/** Whose discard it came from, if any. */
20	+	from?: SeatId;
21	+	}
22	+
23	+	export const meldIsConcealed = (m: Meld) => m.kind === 'ankong';
24	+	export const meldIsKong = (m: Meld) => m.kind === 'kong' \|\| m.kind === 'ankong' \|\| m.kind === 'addkong';
25	+
26	+	export interface Player {
27	+	name: string;
28	+	hand: Tile[]; // concealed, sorted
29	+	melds: Meld[];
30	+	flowers: Tile[];
31	+	discards: Tile[];
32	+	score: number;
33	+	}
34	+
35	+	export interface Rules {
36	+	/** 底 — flat amount every payer contributes. */
37	+	base: number;
38	+	/** 台 — value of one tai. */
39	+	taiValue: number;
40	+	/** Tiles left in the wall when the hand is declared a draw (流局). */
41	+	wallReserve: number;
42	+	/** Starting chips per player. */
43	+	startingScore: number;
44	+	/**
45	+	* 過水 — pass on a tile you could have won on and it is dead to you until
46	+	* your own next draw.
47	+	*/
48	+	sacredDiscard: boolean;
49	+	/**
50	+	* Whether taking a 碰/吃/槓 also lifts a 過水 lock, or only drawing does.
51	+	* Tables genuinely differ, hence the flag.
52	+	*/
53	+	sacredClearedByClaim: boolean;
54	+	/** 一炮多響 — one discard pays out to every seat that declares on it. */
55	+	multipleWinners: boolean;
56	+	/**
57	+	* 包牌 — feed the third dragon or wind pung to an obvious 大三元 / 大四喜
58	+	* and you answer for the whole hand yourself.
59	+	*/
60	+	liability: boolean;
61	+	}
62	+
63	+	export const DEFAULT_RULES: Rules = {
64	+	base: 3,
65	+	taiValue: 1,
66	+	wallReserve: 16,
67	+	startingScore: 100,
68	+	sacredDiscard: true,
69	+	sacredClearedByClaim: false,
70	+	multipleWinners: false,
71	+	liability: true,
72	+	};

1	+	import type { ClaimType } from '../game/engine';
2	+
3	+	/**
4	+	* Bilingual label: the Chinese term players call at the table, with the English
5	+	* underneath for anyone still learning it. Tile faces stay pure Chinese — those
6	+	* are the tiles themselves, not UI chrome.
7	+	*/
8	+	export function Bi({ zh, en, sub }: { zh: string; en: string; sub?: string }) {
9	+	return (
10	+	<span className="bi">
11	+	<span className="zh">{zh}</span>
12	+	<span className="en">{en}</span>
13	+	{sub && <span className="bi-sub">{sub}</span>}
14	+	</span>
15	+	);
16	+	}
17	+
18	+	export const CLAIM_LABEL: Record<ClaimType, [string, string]> = {
19	+	hu: ['胡', 'Win'],
20	+	kong: ['槓', 'Kong'],
21	+	pung: ['碰', 'Pung'],
22	+	chow: ['吃', 'Chow'],
23	+	};

1	+	import type { Game } from '../game/engine';
2	+	import type { Prefs } from '../game/prefs';
3	+	import type { SeatId } from '../game/types';
4	+	import { labelOf } from '../game/tiles';
5	+	import { Bi } from './Bi';
6	+	import { SoundToggle } from './SoundToggle';
7	+	import { TileView } from './TileView';
8	+	import { SEAT_ROT } from './rotation';
9	+	import { WallRing } from './WallRing';
10	+
11	+	interface Props {
12	+	game: Game;
13	+	prefs: Prefs;
14	+	onPrefs: (p: Prefs) => void;
15	+	onSettings: () => void;
16	+	}
17	+
18	+	export function Center({ game, prefs, onPrefs, onSettings }: Props) {
19	+	const s = game.state;
20	+	const r = s.result;
21	+	// Point the live readout at whoever can move the game along.
22	+	const pending = (Object.keys(s.options) as unknown as number[])
23	+	.map(Number)
24	+	.filter((k) => s.responses[k as SeatId] === undefined) as SeatId[];
25	+	const facing = game.nextDrawer() ?? s.turn;
26	+	// Deliberately not per-seat: whoever spots the mis-tap should be able to
27	+	// reach it, not just the player who made it.
28	+	const undoable = s.phase === 'gameEnd' ? null : game.undoable();
29	+
30	+	return (
31	+	<div className="center">
32	+	{s.phase !== 'gameEnd' && <WallRing state={s} />}
33	+
34	+	<div className="facing" style={{ transform: `rotate(${SEAT_ROT[facing]}deg)` }}>
35	+	{s.lastDiscard && s.phase !== 'handEnd' && (
36	+	<div className="last-discard">
37	+	<div className="ld-label">{s.players[s.lastDiscard.from].name} 打 discarded</div>
38	+	<TileView tile={s.lastDiscard.tile} size="hand" highlight />
39	+	</div>
40	+	)}
41	+
42	+	{s.phase === 'claims' && (
43	+	<div className="prompt">
44	+	{pending.length} 家可吃碰 · {pending.length} may claim
45	+	</div>
46	+	)}
47	+	{s.phase === 'robkong' && <div className="prompt warn">搶槓機會 · Rob the kong?</div>}
48	+	</div>
49	+
50	+	{r && s.phase !== 'gameEnd' && (
51	+	<div className="result">
52	+	{r.drawGame ? (
53	+	<h2>流局 · Draw</h2>
54	+	) : (
55	+	<>
56	+	{/* One block per winner — more than one only under 一炮多響. */}
57	+	{r.winners.map((w) => (
58	+	<div className="win" key={w.seat}>
59	+	<h2>
60	+	{s.players[w.seat].name} {w.selfDraw ? '自摸' : '胡牌'} · {w.tai} 台
61	+	<span className="wt"> {labelOf(w.winTile)}</span>
62	+	</h2>
63	+	{w.liable !== null && (
64	+	<div className="liable">
65	+	包牌 · {s.players[w.liable].name} pays the whole hand
66	+	</div>
67	+	)}
68	+	<div className="tai-list">
69	+	{w.items.map((it, i) => (
70	+	<div key={i} className="tai-item">
71	+	<span className="tai-name">
72	+	{it.name}
73	+	<em>{it.en}</em>
74	+	</span>
75	+	<span className="tai-val">{it.tai}</span>
76	+	</div>
77	+	))}
78	+	</div>
79	+	</div>
80	+	))}
81	+	{r.winners.length > 1 && (
82	+	<div className="multi">一炮多響 · one discard, {r.winners.length} winners</div>
83	+	)}
84	+	<div className="deltas">
85	+	{r.deltas.map((d, i) => (
86	+	<span key={i} className={d > 0 ? 'up' : d < 0 ? 'down' : ''}>
87	+	{s.players[i].name} {d > 0 ? `+${d}` : d}
88	+	</span>
89	+	))}
90	+	</div>
91	+	</>
92	+	)}
93	+	<button className="btn big-btn" onClick={() => game.nextHand()}>
94	+	<Bi zh="下一局" en="Next hand" />
95	+	</button>
96	+	</div>
97	+	)}
98	+
99	+	{s.phase === 'gameEnd' && (
100	+	<div className="result">
101	+	<h2>一將終了 · Game over</h2>
102	+	<div className="deltas">
103	+	{[...s.players]
104	+	.map((p, i) => ({ p, i }))
105	+	.sort((a, b) => b.p.score - a.p.score)
106	+	.map(({ p, i }) => (
107	+	<span key={i} className={p.score > s.rules.startingScore ? 'up' : p.score < s.rules.startingScore ? 'down' : ''}>
108	+	{p.name} {p.score}
109	+	</span>
110	+	))}
111	+	</div>
112	+	<div className="over-buttons">
113	+	<button className="btn big-btn" onClick={() => game.newGame()}>
114	+	<Bi zh="再來一將" en="New game" />
115	+	</button>
116	+	{/* The moment anyone is going to want the names or the stakes changed. */}
117	+	<button className="btn ghost big-btn" onClick={onSettings}>
118	+	<Bi zh="設定" en="Settings" />
119	+	</button>
120	+	</div>
121	+	</div>
122	+	)}
123	+
124	+	<div className="table-controls">
125	+	{undoable && (
126	+	<button className="btn ghost undo" onClick={() => game.undo()}>
127	+	<span className="undo-arrow" aria-hidden>
128	+	↺
129	+	</span>
130	+	<span className="undo-what">
131	+	<span className="zh">復原 {undoable.zh}</span>
132	+	<span className="en">Undo · {undoable.en}</span>
133	+	</span>
134	+	</button>
135	+	)}
136	+	<SoundToggle prefs={prefs} onPrefs={onPrefs} compact />
137	+	</div>
138	+
139	+	<div className="log">
140	+	{s.log.slice(0, 5).map((l, i) => (
141	+	<div key={i} style={{ opacity: 1 - i * 0.18 }}>
142	+	{l}
143	+	</div>
144	+	))}
145	+	</div>
146	+	</div>
147	+	);
148	+	}

1	+	import { useRef, useState } from 'react';
2	+	import type { Tile } from '../game/tiles';
3	+	import { TileView } from './TileView';
4	+
5	+	interface Props {
6	+	tiles: Tile[];
7	+	/** Index of the tile held apart from the rest, if any. */
8	+	drawnIndex: number \| null;
9	+	selected: number \| null;
10	+	canDiscard: boolean;
11	+	onSelect: (i: number) => void;
12	+	onDiscard: (i: number) => void;
13	+	onMove: (from: number, to: number) => void;
14	+	}
15	+
16	+	/** How far a pointer must travel before a tap becomes a drag. */
17	+	const DRAG_SLOP = 12;
18	+
19	+	/**
20	+	* Finds the tile nearest the pointer. Works whatever the seat's rotation:
21	+	* bounding rects are always screen-axis-aligned, so we read the row's direction
22	+	* off the first two tiles rather than assuming it runs left-to-right.
23	+	*/
24	+	function nearestIndex(container: HTMLElement, x: number, y: number): number \| null {
25	+	const els = Array.from(container.querySelectorAll<HTMLElement>('[data-idx]'));
26	+	if (els.length < 2) return null;
27	+	const centers = els.map((el) => {
28	+	const r = el.getBoundingClientRect();
29	+	return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
30	+	});
31	+	const horizontal = Math.abs(centers[1].x - centers[0].x) >= Math.abs(centers[1].y - centers[0].y);
32	+	const along = (p: { x: number; y: number }) => (horizontal ? p.x : p.y);
33	+	const p = along({ x, y });
34	+
35	+	let best = 0;
36	+	let bestD = Infinity;
37	+	centers.forEach((c, i) => {
38	+	const d = Math.abs(along(c) - p);
39	+	if (d < bestD) {
40	+	bestD = d;
41	+	best = i;
42	+	}
43	+	});
44	+	return best;
45	+	}
46	+
47	+	export function Hand({
48	+	tiles,
49	+	drawnIndex,
50	+	selected,
51	+	canDiscard,
52	+	onSelect,
53	+	onDiscard,
54	+	onMove,
55	+	}: Props) {
56	+	const ref = useRef<HTMLDivElement>(null);
57	+	const drag = useRef<{ from: number; cur: number; x: number; y: number; moved: boolean } \| null>(null);
58	+	const [dragging, setDragging] = useState<number \| null>(null);
59	+
60	+	const down = (e: React.PointerEvent, i: number) => {
61	+	(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
62	+	drag.current = { from: i, cur: i, x: e.clientX, y: e.clientY, moved: false };
63	+	};
64	+
65	+	const move = (e: React.PointerEvent) => {
66	+	const d = drag.current;
67	+	if (!d \|\| !ref.current) return;
68	+	if (!d.moved && Math.hypot(e.clientX - d.x, e.clientY - d.y) < DRAG_SLOP) return;
69	+	if (!d.moved) {
70	+	d.moved = true;
71	+	setDragging(d.cur);
72	+	}
73	+	const to = nearestIndex(ref.current, e.clientX, e.clientY);
74	+	if (to !== null && to !== d.cur) {
75	+	onMove(d.cur, to);
76	+	d.cur = to;
77	+	setDragging(to);
78	+	}
79	+	};
80	+
81	+	const up = () => {
82	+	const d = drag.current;
83	+	drag.current = null;
84	+	setDragging(null);
85	+	if (!d \|\| d.moved \|\| !canDiscard) return;
86	+	if (selected === d.from) onDiscard(d.from);
87	+	else onSelect(d.from);
88	+	};
89	+
90	+	return (
91	+	<div className="hand" ref={ref} onPointerMove={move} onPointerUp={up} onPointerCancel={up}>
92	+	{tiles.map((t, i) => (
93	+	<div
94	+	key={i}
95	+	data-idx={i}
96	+	className={
97	+	'hand-cell' +
98	+	(i === drawnIndex ? ' drawn-slot' : '') +
99	+	(i === dragging ? ' dragging' : '')
100	+	}
101	+	onPointerDown={(e) => down(e, i)}
102	+	>
103	+	{i === drawnIndex && <span className="drawn-tag">摸 Drew</span>}
104	+	<TileView tile={t} raised={selected === i} />
105	+	</div>
106	+	))}
107	+	</div>
108	+	);
109	+	}

1	+	import type { SeatId } from '../game/types';
2	+	import { SEAT_ROT, SEAT_SLOT } from './rotation';
3	+
4	+	interface Section {
5	+	zh: string;
6	+	en: string;
7	+	body: [string, string][];
8	+	}
9	+
10	+	/** Rules reference, shown inside one player's own strip so only they read it. */
11	+	const SECTIONS: Section[] = [
12	+	{
13	+	zh: '目標',
14	+	en: 'The goal',
15	+	body: [
16	+	['十六張牌，湊成五組加一對眼。', 'Build five sets plus one pair from 16 tiles.'],
17	+	['一組＝順子（三張同花色連號）或刻子（三張相同）。', 'A set is a run of three in one suit, or three of a kind.'],
18	+	['摸進第十七張後打出一張。', 'You draw a 17th tile each turn, then discard one.'],
19	+	],
20	+	},
21	+	{
22	+	zh: '牌',
23	+	en: 'The tiles',
24	+	body: [
25	+	['萬 · 條 · 筒一到九，各四張。', 'Characters, bamboo and dots, 1–9, four of each.'],
26	+	['字牌：東南西北中發白，各四張。', 'Honours: four winds and three dragons, four of each.'],
27	+	['花牌八張，摸到自動補牌，還能算台。', 'Eight flowers: drawn ones replace themselves and score.'],
28	+	],
29	+	},
30	+	{
31	+	zh: '輪到你',
32	+	en: 'Your turn',
33	+	body: [
34	+	['點一張牌抬起，再點一次打出。', 'Tap a tile to lift it, tap again to discard it.'],
35	+	['剛摸的牌會分開放在最右邊，標著「摸」。', 'The tile you just drew sits apart on the right, marked 摸.'],
36	+	['牌可以拖曳重排，或按「理牌」自動排序。', 'Drag tiles to rearrange, or press 理牌 to sort.'],
37	+	],
38	+	},
39	+	{
40	+	zh: '吃碰槓',
41	+	en: 'Claiming a discard',
42	+	body: [
43	+	['碰：手上兩張相同，可碰任何人打的牌。', 'Pung: two matching tiles, from anyone’s discard.'],
44	+	['吃：只能吃上家（左手邊）打的牌。', 'Chow: a run, and only from the player to your left.'],
45	+	['優先序：胡＞碰／槓＞吃。', 'Priority: win beats pung/kong, which beat chow.'],
46	+	['吃碰之後不用摸牌，直接打一張。', 'After claiming you do not draw — just discard.'],
47	+	[
48	+	'要碰要快：下家一摸牌就來不及了，桌子不會等你。',
49	+	'Call fast — the window shuts when the next player draws. Nobody waits.',
50	+	],
51	+	],
52	+	},
53	+	{
54	+	zh: '槓',
55	+	en: 'Kongs',
56	+	body: [
57	+	['四張相同：明槓、暗槓、或碰後加槓。', 'Four of a kind, claimed, concealed, or added to a pung.'],
58	+	['槓完從牌尾補一張，胡了算「槓上開花」。', 'You draw from the tail; winning on it scores 槓上開花.'],
59	+	['別人加槓時你剛好能胡，可以搶槓。', 'You may rob an added kong if that tile completes your hand.'],
60	+	],
61	+	},
62	+	{
63	+	zh: '胡牌',
64	+	en: 'Winning',
65	+	body: [
66	+	['自摸：自己摸到，三家各付一份。', 'Self-draw: all three opponents pay you.'],
67	+	['放槍：胡別人打的牌，放槍者一家付。', 'Off a discard: the discarder alone pays.'],
68	+	['一份＝底＋台數 × 台值。', 'One share is the base plus your tai count.'],
69	+	['牌牆剩十六張還沒人胡就流局。', 'If 16 tiles remain undrawn, the hand is a draw.'],
70	+	],
71	+	},
72	+	{
73	+	zh: '常見台數',
74	+	en: 'Common tai',
75	+	body: [
76	+	['自摸 1 · 門清 1 · 門清自摸 +1', 'Self-draw 1 · concealed 1 · both together +1'],
77	+	['正花每張 1 · 圈風 1 · 門風 1 · 三元牌每組 1', 'Own flower 1 · round wind 1 · seat wind 1 · dragon pung 1'],
78	+	['碰碰胡 4 · 混一色 4 · 清一色 8 · 字一色 16', 'All pungs 4 · half flush 4 · full flush 8 · all honours 16'],
79	+	['大三元 8 · 小四喜 8 · 大四喜 16', 'Big three dragons 8 · little four winds 8 · big four winds 16'],
80	+	['莊家 1 台，連莊每次再加 2 台。', 'Dealer scores 1, plus 2 more for each repeat deal.'],
81	+	],
82	+	},
83	+	{
84	+	zh: '房規',
85	+	en: 'House rules',
86	+	body: [
87	+	[
88	+	'過水：不胡的牌，到自己再摸牌前都不能胡。',
89	+	'Sacred discard: pass on a winning tile and it is dead to you until your next draw.',
90	+	],
91	+	[
92	+	'一炮多響：一張放槍牌，幾家胡就付幾家。',
93	+	'Multiple winners: one discard can pay out to every seat that calls on it.',
94	+	],
95	+	[
96	+	'包牌：放第三張三元／四喜刻子的人，一人付全部。',
97	+	'Liability: feed the third dragon or wind pung to a big hand and you pay for it alone.',
98	+	],
99	+	['以上都可以在設定裡開關。', 'All three are switches on the settings screen.'],
100	+	],
101	+	},
102	+	{
103	+	zh: '拿錯了',
104	+	en: 'Mis-taps',
105	+	body: [
106	+	['桌子中央有「復原」，可以退回上一步。', 'The 復原 button in the middle takes back the last action.'],
107	+	['誰看到誰按，不限於按錯的那個人。', 'Anyone can press it — not just whoever made the mistake.'],
108	+	],
109	+	},
110	+	{
111	+	zh: '莊家',
112	+	en: 'The dealer',
113	+	body: [
114	+	['莊家胡牌或流局就連莊。', 'The dealer keeps the deal on a win or a draw.'],
115	+	['否則換下家做莊，四家輪完換一圈風。', 'Otherwise it passes on; the round wind turns every four passes.'],
116	+	],
117	+	},
118	+	];
119	+
120	+	/**
121	+	* Rules panel for one seat. Rendered at table level rather than inside the
122	+	* seat strip so it can be deep enough to read, but still rotated to face only
123	+	* that player.
124	+	*/
125	+	export function Help({ seat, onClose }: { seat: SeatId; onClose: () => void }) {
126	+	return (
127	+	<div className={`help-slot ${SEAT_SLOT[seat]}`} onClick={onClose}>
128	+	<div
129	+	className="help"
130	+	style={{ transform: `translate(-50%, -50%) rotate(${SEAT_ROT[seat]}deg)` }}
131	+	onClick={(e) => e.stopPropagation()}
132	+	>
133	+	<div className="help-head">
134	+	<h3>台灣麻將規則 · How to play</h3>
135	+	<button className="btn ghost" onClick={onClose}>
136	+	關閉 Close
137	+	</button>
138	+	</div>
139	+	<div className="help-body">
140	+	{SECTIONS.map((sec) => (
141	+	<section key={sec.zh}>
142	+	<h4>
143	+	{sec.zh} <em>{sec.en}</em>
144	+	</h4>
145	+	{sec.body.map(([zh, en], i) => (
146	+	<p key={i}>
147	+	<span>{zh}</span>
148	+	<em>{en}</em>
149	+	</p>
150	+	))}
151	+	</section>
152	+	))}
153	+	<section className="credit">
154	+	<h4>
155	+	牌面 <em>Tile art</em>
156	+	</h4>
157	+	<p>
158	+	<span>gnome-mahjongg「postmodern」牌組</span>
159	+	<em>From gnome-mahjongg’s postmodern theme, GPL-2.0-or-later.</em>
160	+	</p>
161	+	</section>
162	+	</div>
163	+	</div>
164	+	</div>
165	+	);
166	+	}

1	+	import { useEffect, useState } from 'react';
2	+	import type { Game } from '../game/engine';
3	+	import { labelOf, WIND_EN, WIND_NAMES } from '../game/tiles';
4	+	import type { SeatId } from '../game/types';
5	+	import { Bi, CLAIM_LABEL } from './Bi';
6	+	import { Hand } from './Hand';
7	+	import { TileView } from './TileView';
8	+
9	+	const ROT: Record<SeatId, number> = { 0: 0, 1: -90, 2: 180, 3: 90 };
10	+	// seat 0 = bottom (near edge of the laptop), then counter-clockwise on screen:
11	+	// 1 = right, 2 = top, 3 = left — which is the natural 東南西北 seating order.
12	+	const SLOT: Record<SeatId, string> = { 0: 'slot-bottom', 1: 'slot-right', 2: 'slot-top', 3: 'slot-left' };
13	+
14	+	interface Props {
15	+	game: Game;
16	+	seat: SeatId;
17	+	onHelp: () => void;
18	+	}
19	+
20	+	export function Seat({ game, seat, onHelp }: Props) {
21	+	const s = game.state;
22	+	const p = s.players[seat];
23	+	const [sel, setSel] = useState<number \| null>(null);
24	+	const myTurn = s.phase === 'turn' && s.turn === seat;
25	+	const opts = s.options[seat];
26	+	const responded = s.responses[seat] !== undefined;
27	+	const claiming = (s.phase === 'claims' \|\| s.phase === 'robkong') && !!opts && !responded;
28	+	// Whoever draws next closes the claim window — nobody has to wait on a
29	+	// player who hasn't noticed their buttons.
30	+	const canProceed = game.nextDrawer() === seat;
31	+
32	+	useEffect(() => {
33	+	setSel(null);
34	+	}, [myTurn, s.handNumber, p.hand.length, s.drawnTile]);
35	+
36	+	const seatWind = (seat - s.dealer + 4) % 4;
37	+	const isDealer = seat === s.dealer;
38	+	const live = s.phase !== 'handEnd' && s.phase !== 'lobby';
39	+	const tenpai = live ? game.tenpai(seat) : [];
40	+	const sacred = live ? game.sacredTiles(seat) : [];
41	+	const concealedKongs = myTurn ? game.concealedKongs(seat) : [];
42	+	const addedKongs = myTurn ? game.addedKongs(seat) : [];
43	+	const canHu = myTurn && game.canSelfDrawWin(seat);
44	+	const delta = s.phase === 'handEnd' ? s.result?.deltas[seat] ?? 0 : 0;
45	+
46	+	const doDiscard = (i: number) => {
47	+	game.discard(seat, p.hand[i]);
48	+	setSel(null);
49	+	};
50	+
51	+	// The tile just drawn is held apart at the end of the hand until it is played
52	+	// or the player slides it in, so it stays obvious which tile just arrived.
53	+	const drawnIndex = myTurn && s.drawnSeparate && s.drawnTile !== null ? p.hand.length - 1 : null;
54	+	const selTile = sel === null ? null : p.hand[sel] ?? null;
55	+
56	+	return (
57	+	<div className={`slot ${SLOT[seat]}`}>
58	+	<div
59	+	className={`seat ${myTurn ? 'active' : ''} ${claiming ? 'claiming' : ''}`}
60	+	style={{ transform: `translate(-50%, -50%) rotate(${ROT[seat]}deg)` }}
61	+	>
62	+	<div className="discards">
63	+	{p.discards.map((t, i) => (
64	+	<TileView
65	+	key={i}
66	+	tile={t}
67	+	size="small"
68	+	highlight={s.lastDiscard?.from === seat && i === p.discards.length - 1}
69	+	/>
70	+	))}
71	+	</div>
72	+
73	+	<div className="melds">
74	+	{p.melds.map((m, i) => (
75	+	<div className="meld" key={i}>
76	+	{m.tiles.map((t, j) => (
77	+	<TileView key={j} tile={t} size="meld" faceDown={m.kind === 'ankong' && j > 0 && j < 3} />
78	+	))}
79	+	</div>
80	+	))}
81	+	{p.flowers.length > 0 && (
82	+	<div className="meld flowers">
83	+	{p.flowers.map((t, i) => (
84	+	<TileView key={i} tile={t} size="meld" />
85	+	))}
86	+	</div>
87	+	)}
88	+	</div>
89	+
90	+	<div className="actionbar">
91	+	{claiming && (
92	+	<>
93	+	{opts!.map((o, i) => (
94	+	<button
95	+	key={i}
96	+	className={`btn claim ${o.type}`}
97	+	onClick={() => game.respond(seat, { type: o.type, with: o.with })}
98	+	>
99	+	<Bi
100	+	zh={CLAIM_LABEL[o.type][0]}
101	+	en={CLAIM_LABEL[o.type][1]}
102	+	sub={o.with && o.with.map(labelOf).join(' ')}
103	+	/>
104	+	</button>
105	+	))}
106	+	<button className="btn pass" onClick={() => game.respond(seat, 'pass')}>
107	+	<Bi zh="過" en="Pass" />
108	+	</button>
109	+	</>
110	+	)}
111	+	{canProceed && (
112	+	<button className="btn proceed" onClick={() => game.resolveNow()}>
113	+	<Bi
114	+	zh={s.phase === 'robkong' ? '繼續' : '摸牌'}
115	+	en={s.phase === 'robkong' ? 'Continue' : 'Draw'}
116	+	/>
117	+	</button>
118	+	)}
119	+	{!claiming && !canProceed && responded && s.phase !== 'turn' && (
120	+	<div className="waiting">已回應 Responded</div>
121	+	)}
122	+	{myTurn && (
123	+	<>
124	+	{canHu && (
125	+	<button className="btn claim hu" onClick={() => game.declareSelfDraw(seat)}>
126	+	<Bi zh="自摸" en="Self-draw" />
127	+	</button>
128	+	)}
129	+	{concealedKongs.map((t) => (
130	+	<button key={`ak${t}`} className="btn claim kong" onClick={() => game.declareConcealedKong(seat, t)}>
131	+	<Bi zh="暗槓" en="Concealed kong" sub={labelOf(t)} />
132	+	</button>
133	+	))}
134	+	{addedKongs.map((t) => (
135	+	<button key={`gk${t}`} className="btn claim kong" onClick={() => game.declareAddedKong(seat, t)}>
136	+	<Bi zh="加槓" en="Added kong" sub={labelOf(t)} />
137	+	</button>
138	+	))}
139	+	{selTile !== null && sel !== null && (
140	+	<button className="btn discard" onClick={() => doDiscard(sel)}>
141	+	<Bi zh="打出" en="Discard" sub={labelOf(selTile)} />
142	+	</button>
143	+	)}
144	+	</>
145	+	)}
146	+	{delta !== 0 && <div className={`delta ${delta > 0 ? 'up' : 'down'}`}>{delta > 0 ? `+${delta}` : delta}</div>}
147	+	</div>
148	+
149	+	<Hand
150	+	tiles={p.hand}
151	+	drawnIndex={drawnIndex}
152	+	selected={sel}
153	+	canDiscard={myTurn}
154	+	onSelect={setSel}
155	+	onDiscard={doDiscard}
156	+	onMove={(from, to) => game.reorderHand(seat, from, to)}
157	+	/>
158	+
159	+	<div className="nameplate">
160	+	<span className={`wind ${isDealer ? 'dealer' : ''}`}>
161	+	{WIND_NAMES[seatWind]}
162	+	<em>{WIND_EN[seatWind]}</em>
163	+	</span>
164	+	<span className="pname">{p.name}</span>
165	+	{isDealer && (
166	+	<span className="tag">
167	+	莊 Dealer{s.dealerStreak > 0 ? ` 連${s.dealerStreak}` : ''}
168	+	</span>
169	+	)}
170	+	{tenpai.length > 0 && (
171	+	<span className="tag ting">聽 Ready {tenpai.map(labelOf).join('·')}</span>
172	+	)}
173	+	{/* Without this the 胡 button just quietly fails to appear. */}
174	+	{sacred.length > 0 && (
175	+	<span className="tag sacred" title="過水 — passed on winning with these until your next draw">
176	+	過水 {sacred.map(labelOf).join('·')}
177	+	</span>
178	+	)}
179	+	<span className="chips">{p.score}</span>
180	+	{p.hand.length > 0 && s.phase !== 'handEnd' && (
181	+	<button className="btn ghost sort" onClick={() => game.sortHand(seat)}>
182	+	理牌 Sort
183	+	</button>
184	+	)}
185	+	<button className="helpbtn" onClick={onHelp} aria-label="規則 rules">
186	+	?
187	+	</button>
188	+	</div>
189	+	</div>
190	+	</div>
191	+	);
192	+	}

1	+	import { useState } from 'react';
2	+	import { clamp, type Prefs } from '../game/prefs';
3	+	import { play, setSoundEnabled, setVolume } from '../game/sound';
4	+	import { DEFAULT_NAMES, type Rules } from '../game/types';
5	+
6	+	interface Props {
7	+	prefs: Prefs;
8	+	onSave: (p: Prefs) => void;
9	+	onClose: () => void;
10	+	/** Stakes are only editable before the first hand of a game is dealt. */
11	+	stakesLocked: boolean;
12	+	}
13	+
14	+	interface Toggle {
15	+	key: keyof Rules;
16	+	zh: string;
17	+	en: string;
18	+	note: string;
19	+	}
20	+
21	+	/** The house rules tables actually argue about before they start. */
22	+	const TOGGLES: Toggle[] = [
23	+	{
24	+	key: 'sacredDiscard',
25	+	zh: '過水',
26	+	en: 'Sacred discard',
27	+	note: 'Pass on a tile you could have won on and it is dead to you until your own next draw.',
28	+	},
29	+	{
30	+	key: 'sacredClearedByClaim',
31	+	zh: '吃碰解過水',
32	+	en: 'A claim lifts it',
33	+	note: 'Taking a 吃 / 碰 / 槓 counts as a fresh start, rather than making you wait to draw.',
34	+	},
35	+	{
36	+	key: 'multipleWinners',
37	+	zh: '一炮多響',
38	+	en: 'Multiple winners',
39	+	note: 'One discard pays out to every seat that calls on it, not just the nearest.',
40	+	},
41	+	{
42	+	key: 'liability',
43	+	zh: '包牌',
44	+	en: 'Liability',
45	+	note: 'Feed the third dragon or wind pung to a 大三元 / 大四喜 and you pay for the whole hand.',
46	+	},
47	+	];
48	+
49	+	export function Settings({ prefs, onSave, onClose, stakesLocked }: Props) {
50	+	// Edited locally and committed on 完成, so a half-typed name never reaches
51	+	// the table and 取消 really does mean cancel.
52	+	const [draft, setDraft] = useState<Prefs>(prefs);
53	+	const rules = draft.rules;
54	+	const setRules = (patch: Partial<Rules>) => setDraft({ ...draft, rules: { ...rules, ...patch } });
55	+
56	+	const num = (
57	+	key: 'base' \| 'taiValue' \| 'startingScore',
58	+	zh: string,
59	+	en: string,
60	+	min: number,
61	+	max: number,
62	+	) => (
63	+	<label className="field">
64	+	<span className="f-label">
65	+	{zh}
66	+	<em>{en}</em>
67	+	</span>
68	+	<input
69	+	type="number"
70	+	inputMode="numeric"
71	+	min={min}
72	+	max={max}
73	+	disabled={stakesLocked}
74	+	value={rules[key]}
75	+	onChange={(e) => setRules({ [key]: clamp(Math.round(+e.target.value \|\| 0), min, max) })}
76	+	/>
77	+	</label>
78	+	);
79	+
80	+	return (
81	+	<div className="settings-scrim" onClick={onClose}>
82	+	<div className="settings" onClick={(e) => e.stopPropagation()}>
83	+	<div className="settings-head">
84	+	<h3>設定 · Settings</h3>
85	+	<div className="settings-head-btns">
86	+	<button className="btn ghost" onClick={onClose}>
87	+	取消 Cancel
88	+	</button>
89	+	<button className="btn" onClick={() => onSave(draft)}>
90	+	完成 Done
91	+	</button>
92	+	</div>
93	+	</div>
94	+
95	+	<div className="settings-body">
96	+	<section>
97	+	<h4>
98	+	玩家 <em>Players</em>
99	+	</h4>
100	+	<div className="names">
101	+	{draft.names.map((n, i) => (
102	+	<label className="field" key={i}>
103	+	<span className="f-label">{i + 1}</span>
104	+	<input
105	+	value={n}
106	+	maxLength={12}
107	+	placeholder={DEFAULT_NAMES[i]}
108	+	onChange={(e) => {
109	+	const names = draft.names.slice();
110	+	names[i] = e.target.value;
111	+	setDraft({ ...draft, names });
112	+	}}
113	+	/>
114	+	</label>
115	+	))}
116	+	</div>
117	+	</section>
118	+
119	+	<section>
120	+	<h4>
121	+	籌碼 <em>Stakes</em>
122	+	</h4>
123	+	{num('base', '底', 'Base', 0, 999)}
124	+	{num('taiValue', '台', 'Per tai', 0, 999)}
125	+	{num('startingScore', '起始籌碼', 'Starting chips', 0, 99999)}
126	+	{stakesLocked && (
127	+	<p className="note lock">
128	+	對局進行中不能改動籌碼。
129	+	<br />
130	+	Stakes are fixed once a game is under way — finish it, or start a new one.
131	+	</p>
132	+	)}
133	+	</section>
134	+
135	+	<section>
136	+	<h4>
137	+	規則 <em>House rules</em>
138	+	</h4>
139	+	{TOGGLES.map((t) => {
140	+	const on = rules[t.key] as boolean;
141	+	// 過水 has to be on for the rule about lifting it to mean anything.
142	+	const dead = t.key === 'sacredClearedByClaim' && !rules.sacredDiscard;
143	+	return (
144	+	<label className={`switch ${dead ? 'dead' : ''}`} key={t.key}>
145	+	<input
146	+	type="checkbox"
147	+	checked={on}
148	+	disabled={dead}
149	+	onChange={(e) => setRules({ [t.key]: e.target.checked })}
150	+	/>
151	+	<span className="sw-name">
152	+	{t.zh}
153	+	<em>{t.en}</em>
154	+	</span>
155	+	<span className="note">{t.note}</span>
156	+	</label>
157	+	);
158	+	})}
159	+	</section>
160	+
161	+	<section>
162	+	<h4>
163	+	音效 <em>Sound</em>
164	+	</h4>
165	+	<label className="switch">
166	+	<input
167	+	type="checkbox"
168	+	checked={draft.sound}
169	+	onChange={(e) => {
170	+	// Start the audio hardware inside the click, not after it.
171	+	setSoundEnabled(e.target.checked);
172	+	setDraft({ ...draft, sound: e.target.checked });
173	+	if (e.target.checked) play('claimWindow');
174	+	}}
175	+	/>
176	+	<span className="sw-name">
177	+	開啟音效
178	+	<em>Sound on</em>
179	+	</span>
180	+	<span className="note">
181	+	A click as a tile goes down, and a chime when someone's claim window opens.
182	+	</span>
183	+	</label>
184	+	<label className="field">
185	+	<span className="f-label">
186	+	音量
187	+	<em>Volume</em>
188	+	</span>
189	+	<input
190	+	type="range"
191	+	min={0}
192	+	max={100}
193	+	value={Math.round(draft.volume * 100)}
194	+	disabled={!draft.sound}
195	+	onChange={(e) => {
196	+	const v = +e.target.value / 100;
197	+	setVolume(v);
198	+	setDraft({ ...draft, volume: v });
199	+	}}
200	+	onMouseUp={() => draft.sound && play('discard')}
201	+	onTouchEnd={() => draft.sound && play('discard')}
202	+	/>
203	+	</label>
204	+	</section>
205	+	</div>
206	+	</div>
207	+	</div>
208	+	);
209	+	}

1	+	import type { Prefs } from '../game/prefs';
2	+	import { play, setSoundEnabled } from '../game/sound';
3	+
4	+	interface Props {
5	+	prefs: Prefs;
6	+	onPrefs: (p: Prefs) => void;
7	+	/** Icon only, for the cramped row of controls in the middle of the table. */
8	+	compact?: boolean;
9	+	}
10	+
11	+	/**
12	+	* Mute. Turning sound on plays the chime straight away — partly so the room
13	+	* hears how loud it is before a hand starts, partly because the browser will
14	+	* only start the audio hardware from inside a click like this one.
15	+	*/
16	+	export function SoundToggle({ prefs, onPrefs, compact }: Props) {
17	+	const on = prefs.sound;
18	+	return (
19	+	<button
20	+	className={`btn ghost sound-toggle ${compact ? 'compact' : ''} ${on ? 'on' : ''}`}
21	+	aria-pressed={on}
22	+	onClick={() => {
23	+	// Unlock the audio hardware here, inside the click, rather than
24	+	// waiting for the effect that persists the preference.
25	+	setSoundEnabled(!on);
26	+	onPrefs({ ...prefs, sound: !on });
27	+	if (!on) play('claimWindow');
28	+	}}
29	+	>
30	+	<span className="spk" aria-hidden>
31	+	{on ? '🔊' : '🔇'}
32	+	</span>
33	+	{!compact && <span>{on ? '音效開 Sound on' : '靜音 Muted'}</span>}
34	+	</button>
35	+	);
36	+	}

1	+	import { labelOf, SPRITE_COL, type Tile } from '../game/tiles';
2	+
3	+	interface Props {
4	+	tile?: Tile;
5	+	faceDown?: boolean;
6	+	size?: 'hand' \| 'meld' \| 'small';
7	+	raised?: boolean;
8	+	dim?: boolean;
9	+	highlight?: boolean;
10	+	onClick?: () => void;
11	+	}
12	+
13	+	export function TileView({ tile, faceDown, size = 'hand', raised, dim, highlight, onClick }: Props) {
14	+	const down = faceDown \|\| tile === undefined;
15	+	const cls = [
16	+	'tile',
17	+	`t-${size}`,
18	+	down ? 'back' : 'face',
19	+	raised ? 'raised' : '',
20	+	dim ? 'dim' : '',
21	+	highlight ? 'hl' : '',
22	+	onClick ? 'tappable' : '',
23	+	]
24	+	.filter(Boolean)
25	+	.join(' ');
26	+
27	+	return (
28	+	<div
29	+	className={cls}
30	+	onClick={onClick}
31	+	aria-label={down ? undefined : labelOf(tile!)}
32	+	style={down ? undefined : ({ '--col': SPRITE_COL[tile!] } as React.CSSProperties)}
33	+	/>
34	+	);
35	+	}

1	+	import { STACKS_PER_SIDE, WALL_SIZE, WALL_STACKS } from '../game/tiles';
2	+	import type { GameState } from '../game/engine';
3	+
4	+	/**
5	+	* The wall as it sits on a real table: a square of four staggered sides, 18
6	+	* stacks of two to a side. Position 0 is the break point — draws eat the square
7	+	* from there, while kong and flower replacements come off the far end (the 底牌
8	+	* tail), so it is consumed from both directions at once. Spent stacks stay as
9	+	* faint ghosts so the square keeps its shape all game.
10	+	*/
11	+	export function WallRing({ state }: { state: GameState }) {
12	+	const front = state.drawnFront;
13	+	const back = WALL_SIZE - state.drawnBack;
14	+	const deadFrom = back - state.rules.wallReserve;
15	+
16	+	const stacks = Array.from({ length: WALL_STACKS }, (_, i) => {
17	+	const a = i * 2;
18	+	const b = a + 1;
19	+	const live = (p: number) => p >= front && p < back;
20	+	const count = (live(a) ? 1 : 0) + (live(b) ? 1 : 0);
21	+	return { count, dead: b >= deadFrom, next: front === a \|\| front === b };
22	+	});
23	+
24	+	const side = (from: number, cls: string) => (
25	+	<div className={`wall-side ${cls}`} key={cls}>
26	+	{stacks.slice(from, from + STACKS_PER_SIDE).map((st, i) => (
27	+	<div
28	+	key={i}
29	+	className={`wall-stack s${st.count}${st.dead ? ' dead' : ''}${st.next ? ' next' : ''}`}
30	+	>
31	+	<i />
32	+	</div>
33	+	))}
34	+	</div>
35	+	);
36	+
37	+	return (
38	+	<div className="wall-ring" aria-label="牌牆">
39	+	{side(0, 'top')}
40	+	{side(STACKS_PER_SIDE, 'right')}
41	+	{side(STACKS_PER_SIDE * 2, 'bottom')}
42	+	{side(STACKS_PER_SIDE * 3, 'left')}
43	+	</div>
44	+	);
45	+	}

1	+	import type { SeatId } from '../game/types';
2	+
3	+	/**
4	+	* Screen rotation that makes a seat's content face that player.
5	+	* Seat 0 sits at the bottom edge and play runs counter-clockwise on screen:
6	+	* 1 = right, 2 = top, 3 = left.
7	+	*/
8	+	export const SEAT_ROT: Record<SeatId, number> = { 0: 0, 1: -90, 2: 180, 3: 90 };
9	+
10	+	export const SEAT_SLOT: Record<SeatId, string> = {
11	+	0: 'slot-bottom',
12	+	1: 'slot-right',
13	+	2: 'slot-top',
14	+	3: 'slot-left',
15	+	};

1	+	{
2	+	"compilerOptions": {
3	+	"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4	+	"target": "es2023",
5	+	"lib": ["ES2023", "DOM"],
6	+	"module": "esnext",
7	+	"types": ["vite/client"],
8	+	"allowArbitraryExtensions": true,
9	+	"skipLibCheck": true,
10	+
11	+	/* Bundler mode */
12	+	"moduleResolution": "bundler",
13	+	"allowImportingTsExtensions": true,
14	+	"verbatimModuleSyntax": true,
15	+	"moduleDetection": "force",
16	+	"noEmit": true,
17	+	"jsx": "react-jsx",
18	+
19	+	/* Linting */
20	+	"noUnusedLocals": true,
21	+	"noUnusedParameters": true,
22	+	"erasableSyntaxOnly": true,
23	+	"noFallthroughCasesInSwitch": true
24	+	},
25	+	"include": ["src"]
26	+	}

1	+	{
2	+	"files": [],
3	+	"references": [
4	+	{ "path": "./tsconfig.app.json" },
5	+	{ "path": "./tsconfig.node.json" }
6	+	]
7	+	}

1	+	import { defineConfig } from 'vite'
2	+	import react from '@vitejs/plugin-react'
3	+
4	+	// https://vite.dev/config/
5	+	export default defineConfig({
6	+	plugins: [react()],
7	+	})