collin/mahjong · 2317d367

One game, and the hands change hands while it is being played

Collin Richards · 2026-08-25 10:04 UTC · 2317d367e8f3d4971d4fb5809b0bd7e6ec2c9c6d · parent ca82579b · browse files

modifiedREADME.md+118 −79

modifiedTODO.md+5 −4

modifiedsrc/App.tsx+263 −226

modifiedsrc/net/protocol.ts+28 −10

modifiedsrc/net/room.ts+10 −0

modifiedsrc/net/session.ts+204 −139

modifiedsrc/net/table.ts+6 −5

modifiedsrc/styles.css+39 −0

modifiedsrc/ui/Controller.tsx+39 −30

modifiedsrc/ui/Hand.tsx+1 −1

deletedsrc/ui/OnlineLobby.tsx+0 −100

modifiedsrc/ui/Seat.tsx+70 −26

modifiedsrc/ui/TableMenu.tsx+55 −12

⋯ 25 unchanged lines
26	26		- [ ] put it on a real domain: `npm run serve` behind a TLS reverse proxy
27	27		(phones only get camera and fullscreen on https) — anvil, a VPS, a
28	28		tailscale funnel, anything that terminates TLS
29		-	- [ ] undo online: only the party screen has it, and only while it is the
30		-	room's host; online games have none at all
31		-	- [ ] full-table online clients throw with the local gesture but others see
32		-	the default seat-launch animation — could send the NetThrow for those too
	29	+	- [ ] undo on a device that is not the table: only the table screen has it, and
	30	+	only while it is the room's host. A phone holding one hand has none
	31	+	- [ ] full-size clients holding one hand throw with the local gesture but
	32	+	others see the default seat-launch animation — could send the NetThrow
	33	+	for those too
33	34		- [ ] cheat-resistance: room state carries the wall and every hand; the relay
34	35		is ours now, so the engine could move into `server/rooms.ts` and keep
35	36		secrets server-side
⋯ 10 unchanged lines

⋯ 13 unchanged lines
14	14		* engine methods a button would have called. The engine itself never knows any
15	15		* of this is happening — the same trick `autoplay.ts` plays, stretched over a
16	16		* network.
	17	+	*
	18	+	* There is one kind of game. A room is not opened until somebody wants a
	19	+	* phone in it, and what it carries after that is only ever the same four
	20	+	* questions: who is holding each hand, where the hands nobody holds are being
	21	+	* played, and what the table looks like. Solo, four round a laptop and four in
	22	+	* four cities are all arrangements of those, not modes — see `App.tsx`.
17	23		*/
18	24
19		-	/** The two ways a room can be playing. */
20		-	export type NetMode = 'online' \| 'party';
21		-
22	25		/**
23	26		* Who holds a seat. A list, not a single id: a seat is a hand, and nothing
24	27		* stops two people huddling over one hand — a pair playing together from two
⋯ 9 unchanged lines
34	37
35	38		/** The shared room state, as the host writes it. */
36	39		export interface SharedKeys {
37		-	mode: NetMode;
38	40		seats: SeatSlot[];
39		-	/** The whole engine state. null while the room is still in its lobby. */
	41	+	/**
	42	+	* The device the table is being played at: the one that opened the room, and
	43	+	* the one that goes on playing every seat no phone has taken. '' once it has
	44	+	* left, which is what tells the room those seats have nobody behind them and
	45	+	* should go to the computer — see `armStranded` in session.ts.
	46	+	*
	47	+	* It is not a mode. A laptop with four people round it and a phone with one
	48	+	* are the same thing here: whichever device the game was started on is where
	49	+	* the unclaimed hands are played, and every other device holds a hand.
	50	+	*/
	51	+	screen: string;
	52	+	/** The whole engine state. Never null in practice: a room is opened around a
	53	+	* table that is already being played at. */
40	54		game: GameState \| null;
41	55		/**
42	56		* Which seats have a device on them that will say their calls out loud —
43	57		* a phone in somebody's hand, with sound and 報牌 on and the hardware awake.
44	58		*
45		-	* The table reads this and shuts up for those seats: at a party table all
46		-	* five devices are in the same room, so the 碰 should come out of the hand
47		-	* of the person calling it and not out of the laptop in the middle. Held by
48		-	* the host, which is the only thing that hears every phone.
	59	+	* Only a phone claims it — the device is small enough to be in a hand, and
	60	+	* a hand is in the room. The screen reads this and shuts up for those seats,
	61	+	* so the 碰 comes out of the hand of the person calling it and not out of
	62	+	* the laptop in the middle. Held by the host, which is the only thing that
	63	+	* hears every device.
49	64		*/
50	65		voices: boolean[];
51	66		}
⋯ 7 unchanged lines
59	74		\| { kind: 'addkong'; tile: Tile }
60	75		\| { kind: 'selfDraw' }
61	76		\| { kind: 'nextHand' }
62		-	\| { kind: 'newGame' };
	77	+	\| { kind: 'newGame' }
	78	+	/** Give this hand to the computer, or take it back off it. Only ever about a
	79	+	* hand nobody is holding — see `handleAct`. */
	80	+	\| { kind: 'bot'; on: boolean };
63	81
64	82		export interface ActMsg {
65	83		seat: SeatId;
⋯ 91 unchanged lines

⋯ 98 unchanged lines
99	99		private joinCbs = new Set<(p: PlayerInfo) => void>();
100	100		private leaveCbs = new Set<(p: PlayerInfo) => void>();
101	101		private hostCbs = new Set<(host: PlayerInfo \| null) => void>();
	102	+	private resumeCbs = new Set<() => void>();
102	103		private errorCbs = new Set<(e: RoomError) => void>();
103	104		private evCbs = new Map<string, Set<(payload: unknown, from: string) => void>>();
104	105
⋯ 75 unchanged lines
180	181		onHostChange(cb: (host: PlayerInfo \| null) => void): Unsub {
181	182		return sub(this.hostCbs, cb);
182	183		}
	184	+	/**
	185	+	* The connection came back and the room was rejoined. Whatever we meant to
	186	+	* say while it was down never went, and what the server holds is as old as
	187	+	* the blip — so whoever owns the state should say it again.
	188	+	*/
	189	+	onResume(cb: () => void): Unsub {
	190	+	return sub(this.resumeCbs, cb);
	191	+	}
183	192		onError(cb: (e: RoomError) => void): Unsub {
184	193		return sub(this.errorCbs, cb);
185	194		}
⋯ 111 unchanged lines
297	306		if (p.id !== this.me.id && !before.some((q) => q.id === p.id))
298	307		for (const cb of this.joinCbs) cb(p);
299	308		if (prevHost !== this.hostId) for (const cb of this.hostCbs) cb(this.host);
	309	+	for (const cb of this.resumeCbs) cb();
300	310		}
301	311
302	312		private emitError(e: RoomError) {
⋯ 13 unchanged lines

⋯ 20 unchanged lines
21	21		const PENDING_TTL = 3000;
22	22
23	23		/**
24		-	* The online table: the same surface the engine offers (`TableCtl`), backed by
25		-	* a `Game` that is either the real one or a mirror of the host's.
	24	+	* The networked table: the same surface the engine offers (`TableCtl`), put
	25	+	* around the one `Game` this page has. There is no second engine and no copy —
	26	+	* opening a room is a wrapper going on, and a hand in progress carries straight
	27	+	* through it.
26	28		*
27	29		* On the host the inner engine is authoritative and calls go straight into it.
28	30		* Everywhere else the inner engine is a mirror kept current by `adopt`, and a
⋯ 29 unchanged lines
58	60
59	61		private sounds = new Set<(cue: SoundCue) => void>();
60	62
61		-	constructor(wire: TableWire) {
	63	+	constructor(wire: TableWire, engine: Game) {
62	64		this.wire = wire;
63		-	this.engine = new Game();
64		-	this.engine.persist = false;
	65	+	this.engine = engine;
65	66		this.engine.subscribe(() => this.bump());
66	67		}
67	68
⋯ 197 unchanged lines

⋯ 795 unchanged lines
796	796		.btn.discard {
797	797		background: linear-gradient(180deg, #fff2cf, #e0c070);
798	798		}
	799	+	/* Somebody pulling up a chair at a hand the computer has been playing. It is
	800	+	the only button on that strip, so it may as well be the warm one — and it is
	801	+	the same gold as 摸牌, because both are the table's way of saying this edge
	802	+	is yours now. */
	803	+	.btn.sit {
	804	+	background: rgba(217, 180, 92, 0.18);
	805	+	border-color: rgba(217, 180, 92, 0.55);
	806	+	color: #f6f0e2;
	807	+	}
799	808
800	809		/* ---------- the action buttons are tiles ---------- */
801	810		/* 打出, 碰, 吃, 槓, 胡, 過 are all things you do with a tile, and they sit in
⋯ 1779 unchanged lines
2581	2590		user-select: none;
2582	2591		touch-action: none;
2583	2592		}
	2593	+	/* The device holding this hand has gone quiet and the hand is being kept for
	2594	+	it. Amber rather than red: nothing is lost, and in a few seconds the
	2595	+	computer picks the tiles up so the table can carry on. */
	2596	+	.nameplate .tag.waiting {
	2597	+	background: rgba(217, 180, 92, 0.28);
	2598	+	border-color: rgba(217, 180, 92, 0.6);
	2599	+	padding-inline: 5px;
	2600	+	}
2584	2601		/* This hand is calling for itself, out of the phone holding it. Sits next to
2585	2602		the 📱 tag and reads as part of it, which is what it is. */
2586	2603		.nameplate .tag.voice {
⋯ 302 unchanged lines
2889	2906		font-size: 11px;
2890	2907		opacity: 0.75;
2891	2908		}
	2909	+
	2910	+	/* ---------- the wire, when it goes ---------- */
	2911	+	/* One line across the top of the felt. The room is already reconnecting on its
	2912	+	own, so this says what is happening rather than asking for anything, and it
	2913	+	goes away by itself when state starts flowing again. Above the tiles and out
	2914	+	of the way of every strip, which all sit against their own edge. */
	2915	+	.net-warn {
	2916	+	position: absolute;
	2917	+	top: 6px;
	2918	+	left: 50%;
	2919	+	transform: translateX(-50%);
	2920	+	z-index: 60;
	2921	+	max-width: 70vw;
	2922	+	padding: 4px 12px;
	2923	+	border-radius: 999px;
	2924	+	background: rgba(20, 40, 30, 0.82);
	2925	+	border: 1px solid rgba(217, 180, 92, 0.5);
	2926	+	color: rgba(246, 240, 226, 0.85);
	2927	+	font-size: 12px;
	2928	+	text-align: center;
	2929	+	pointer-events: none;
	2930	+	}

⋯ 6 unchanged lines
7	7		English underneath; the tiles themselves stay Chinese, because that is what the
8	8		tiles say.
9	9
10		-	四人同桌 on the lobby is that table, and it is one mode rather than two:
11		-	four people at one screen, and any of them free to take their own hand onto
12		-	their phone from the QR in their gear — the tiles leave the screen and the
13		-	throw comes back over the wire. Nobody has to, and nothing has to be decided up
14		-	front. See [one table](#one-table).
15		-
16		-	Nobody else around? 單人對局 Single player gives you the bottom seat and
17		-	hands the other three to the computer — same rules, same table, same scoring.
18		-	See [computer players](#computer-players).
19		-
20		-	Everybody somewhere else? 線上對戰 Online game puts the four of you at the
21		-	same table from four devices, each turned so your own seat is the near edge —
22		-	see [playing online](#playing-online).
	10	+	開始 is the only button on the lobby, because there is one game. It deals
	11	+	you in at the bottom edge with the computer on the other three, on this device,
	12	+	without a word said to any server. Everything people call a mode is that table
	13	+	with different hands changing hands, one at a time, mid-game:
	14	+
	15	+	- somebody sits down at this screen and **taps a hand the computer has been
	16	+	playing** — the tiles turn over and are theirs;
	17	+	- somebody scans a seat's QR and takes that hand onto their phone;
	18	+	- somebody opens the invite link from three cities away and takes one from
	19	+	their own laptop, with the table turned so their seat is the near edge.
	20	+
	21	+	Each of those swaps one seat and redeals nothing, and each undoes: a hand goes
	22	+	back to the computer with a tap, and one that loses its device gets given back
	23	+	to the computer on its own so the table never stops. See
	24	+	[one table](#one-table), [computer players](#computer-players) and
	25	+	[playing online](#playing-online).
23	26
24	27		```
25	28		npm install
⋯ 29 unchanged lines
55	58		strip has is 看牌: every other one names a tile — 打出五萬, 吃 with these two
56	59		— and would say through the card what is under it. The 看牌 of whoever the
57	60		table is waiting on wears a gold ring, since whose go it is was never a
58		-	secret. Nothing is covered where the screen belongs to one player: solo, and
59		-	online, where everybody has a device of their own.
	61	+	secret. Nothing is covered where the screen is playing one hand, which is a
	62	+	screen that belongs to one player — three computers and you, or your own
	63	+	tiles on your own device.
60	64		- The tile you just drew is held apart from the sorted hand with a gold ring
61	65		and a 摸 label, instead of being sorted invisibly into it. It merges into the
62	66		hand once you discard. 補花 replacements and kong replacements are marked the
⋯ 91 unchanged lines
154	158		skipped; the line the bar leaves behind breathes, and the table goes on
155	159		waiting. It is a nudge, not a rule. Said on a covered hand too — whose turn
156	160		it is was never one of the things the card is hiding — and only where the
157		-	screen is shared: solo has nobody to tell, and online everybody is already
158		-	looking at their own device. A phone at the table gets the same seven seconds
	161	+	screen is playing more than one hand, since a screen playing one has nobody
	162	+	to tell. A phone at the table gets the same seven seconds
159	163		across its top, a gold rim edge to edge (red for a claim window), and one
160	164		short buzz as the game comes round to it.
161	165		- On the keys — ← and → walk the selection along your hand and space throws
⋯ 41 unchanged lines
203	207		whose 碰 that was without looking up, which is the whole point of hearing it.
204	208		Tiles out in the middle are placed properly rather than by edge: the physics
205	209		knows to the pixel where a tile landed, and that is where the knock comes
206		-	from. Online the table is turned so your own seat is at the bottom, and the
207		-	sound turns with it. See [audio, by seat](#audio-by-seat).
	210	+	from. A device holding one hand turns the table so that hand is at the
	211	+	bottom, and the sound turns with it. See [audio, by seat](#audio-by-seat).
208	212		- Settings — 設定 from the lobby, or from the game-over panel: player names,
209	213		底 / 台 / starting chips, the house-rule switches below, and sound. Kept in
210	214		`localStorage` separately from the save, so they carry over to the next game.
⋯ 2 unchanged lines
213	217
214	218		## One table
215	219
216		-	四人同桌 and 手機派對 were two buttons on the lobby, and they were never two
217		-	games: one was the other with the phones left in people's pockets. Every party
218		-	table played its unclaimed seats hotseat-style at the screen already, and every
219		-	hotseat table would have taken a phone if it had had a room to put it in. So
220		-	there is one button now, and picking up your phone is not a mode — it is
221		-	something one player does, mid-hand, without asking the other three.
222		-
223		-	What that costs is a decision about when to open the room, and the answer is:
224		-	not while anybody is waiting. The tiles are dealt at once, on this screen,
225		-	before a websocket has been opened — a laptop with no server behind it is still
226		-	four people at a table, and nobody should watch a spinner to start playing. The
227		-	room is opened behind the game, and when it lands it inherits the hand in
228		-	progress (`startParty(names, rules, from)` restores rather than deals) instead
229		-	of dealing over the top of it. The only thing that changes on screen is that
230		-	the QRs start working. If it never lands, nothing does.
	220	+	There were three buttons on this lobby — 單人對局, 四人同桌, 線上對戰 — and
	221	+	they were never three games. Every party table played its unclaimed seats
	222	+	hotseat-style at the screen already; every hotseat table would have taken a
	223	+	phone if it had had a room to put it in; every online table filled its empty
	224	+	chairs with the same computer players the solo game is made of. They differed
	225	+	in who was holding which hand, and that is not something a lobby should have to
	226	+	know before the tiles are dealt.
	227	+
	228	+	So there is one button, and the question it used to ask is answered
	229	+	continuously instead. A hand is played by one of three things — **the computer,
	230	+	somebody at this screen, or a device of its own** — and any of them becomes any
	231	+	other while the hand is in progress, with nothing redealt and nobody consulted
	232	+	but the person doing it.
	233	+
	234	+	\| \| played by \| becomes a person here \| becomes a phone \|
	235	+	\|---\|---\|---\|---\|
	236	+	\| 電腦 \| the bots in `autoplay.ts` \| tap the strip — 坐下 \| its QR, from its gear \|
	237	+	\| 這裡 \| this screen, face down under a tap \| — \| its QR, from its gear \|
	238	+	\| 手機 \| whoever scanned in \| they leave → the computer \| — \|
	239	+
	240	+	Nothing touches the network until a phone is wanted. A table of people and
	241	+	computers is four hands and an engine; there is nothing for a server to do, and
	242	+	`src/net/` is never constructed. The room is opened by the first thing that
	243	+	needs one — the 用手機拿牌 in a seat's gear — and when it opens it *publishes
	244	+	the hand in progress* rather than dealing over the top of it
	245	+	(`NetSession.publishTable`). The engine is the page's own either way:
	246	+	`NetTable` is a wrapper that goes on around a live `Game`, not a second one, so
	247	+	opening a room costs a `structuredClone` and changes nothing on screen except
	248	+	that the QRs start working.
231	249
232	250		Each seat's QR is its own, and lives in that seat's gear beside the sound
233	251		and the undo, carrying `?room=…&seat=N`. Scanning it lands on that chair
⋯ 4 unchanged lines
238	256		still being sat down at; the moment the first tile is thrown it steps aside,
239	257		because from then on the middle is where the tiles go.
240	258
241		-	The save follows the screen. A table that has opened a room keeps writing
242		-	`localStorage` (`engine.persist` on the screen's engine, off on every phone —
243		-	they mirror, and have no business writing it), so 繼續對局 still works and
244		-	resumes the same way the mode starts: restore here, open the room behind it,
245		-	publish the hand as it stood.
	259	+	**A hand that loses its device is kept for fifteen seconds and then given to
	260	+	the computer** (`EMPTY_SEAT_GRACE`). A phone locking itself looks exactly like
	261	+	a phone leaving for good and only one of them means it, so the nameplate shows
	262	+	⏳ and the table waits; when the wait is up the computer picks the tiles up and
	263	+	play carries on. Nothing is lost either way — coming back takes the seat
	264	+	straight off the computer again, and so does one tap on it at the table. The
	265	+	same countdown covers the screen closing its lid: the room records which device
	266	+	the table is being played at (`screen` in room state), and hands with neither a
	267	+	device nor a table behind them go the same way.
	268	+
	269	+	The save follows the table. Whichever device is running the game writes
	270	+	`localStorage` (`engine.persist = authority`; every mirror has it off, and no
	271	+	business writing it), so 繼續對局 restores here and the room, if one is wanted
	272	+	again, opens behind it exactly as it did the first time.
	273	+
	274	+	Covering is arithmetic, not a mode. A hand starts face down when this
	275	+	device is playing more than one of them — which is the definition of a screen
	276	+	several people are sitting round. One hand is one person, whether they are
	277	+	playing three computers or holding their own tiles on their own phone, and
	278	+	covering your own tiles from yourself is a tap in the way.
246	279
247	280		## Playing online
248	281
249		-	Both networked shapes — a shared screen with phones on it, and four devices in
250		-	four places — are one room relay of our own: `server/rooms.ts`,
	282	+	Every device that is not the table is on one room relay of our own:
	283	+	`server/rooms.ts`,
251	284		a couple hundred lines of Node on `ws`. The relay knows nothing about mahjong:
252	285		rooms with codes, host election by join order, one bag of shared state only the
253	286		host may write, and events fanned out to everyone else. One client — the
⋯ 4 unchanged lines
258	291		end of the wire is `src/net/room.ts`; the rest of `src/net/` is the game
259	292		riding it.
260	293
261		-	- 線上對戰 Online game — everyone on their own device. Whoever opens the
262		-	room picks 線上對戰 and gets a seat lobby; friends who open the same link
263		-	land in it, sit down, and the host deals. Empty seats go to the computer,
264		-	which runs on the host client — that is what stands in for a server on the
265		-	classic (free) tier. Each screen draws the same full table, turned so your
266		-	own seat is the bottom edge; other people's tiles are face down. Joining
267		-	mid-game takes over a vacant or computer seat, so a dropped friend can
268		-	reload and carry on.
269		-	- 四人同桌 at one screen, with phones — the mode above, and on the wire
270		-	still `mode: 'party'`: the laptop is the table and a phone holds one hand.
271		-	Scanning a seat's QR loads a controller: just that hand, face up, with the
272		-	claim buttons — and the throw. Flick a tile up off the top of the phone and
273		-	it sails in from your edge of the common screen, at the speed and angle you
274		-	let go of it (`NetThrow`, mapped into table coordinates by
275		-	`TablePool.throwFromNet`). The seat's tiles go face down on the shared screen
276		-	and stay there; hold the 📱 tag on its nameplate to show the table's QR again
277		-	for a player who lost theirs. A phone that leaves hands the seat back to the
278		-	laptop, where it is covered-with-a-tap like the rest. Seats never lock: a
279		-	second phone scanning the same QR joins the same hand — two people playing
280		-	one hand, whoever acts first acts. And with sound on, the phone in your hand
281		-	is what says your calls — see [audio, by seat](#audio-by-seat).
	294	+	- A device that holds one hand shows that hand. A phone shows just the
	295	+	hand, face up, with the claim buttons — and the throw: flick a tile up off
	296	+	the top of the phone and it sails in from your edge of the common screen, at
	297	+	the speed and angle you let go of it (`NetThrow`, mapped into table
	298	+	coordinates by `TablePool.throwFromNet`). Anything bigger shows the whole
	299	+	table instead, turned so that seat is the bottom edge, with everyone else's
	300	+	tiles face down. Same room, same seat map; the only thing deciding between
	301	+	them is how much screen there is.
	302	+	- A device that holds no hand yet gets the seat picker, and every seat is
	303	+	offered — including the ones the computer is playing, which is the ordinary
	304	+	way in, and the ones somebody already holds, which is how two people play one
	305	+	hand off two devices. A seat's own QR names its chair and skips the picker.
	306	+	- The device the table was opened on goes on showing the table: the felt,
	307	+	the middle, the wall, and every hand no phone has taken, covered-with-a-tap
	308	+	like a hotseat game. Hold the 📱 tag on a nameplate to show the table's QR
	309	+	again for a player who lost theirs. With sound on, the phone in each player's
	310	+	hand is what says their calls and the table goes quiet for that seat — see
	311	+	[audio, by seat](#audio-by-seat).
282	312
283	313		Design notes, in the order they bit:
284	314
⋯ 10 unchanged lines
295	325		and throttle timers in background tabs, so nothing in `src/net/` runs on a
296	326		loop: state writes flush on a microtask, everything inbound arrives over the
297	327		WebSocket (whose delivery is not throttled), and dead connections are the
298		-	server's ping loop's problem. A party screen somebody tabbed away from
	328	+	server's ping loop's problem. A table screen somebody tabbed away from
299	329		keeps answering.
300	330		- Identity is a UUID in sessionStorage, chosen by the device and taken at
301	331		its word by the relay. The seat map is keyed on it, so a reload or a wifi
⋯ 146 unchanged lines
448	478
449	479		The game state is plain data, so a save is just its JSON in `localStorage`,
450	480		rewritten after every move. Close the lid, refresh, or run the battery flat and
451		-	nothing is lost — the lobby offers 繼續對局 Resume above the ways to start a
452		-	fresh one, showing whether it was a solo game or a table, the round, hand
453		-	number, chip counts and when it was saved. Which seats the computer holds is
454		-	part of the state, so a save resumes as the kind of game it was — a solo game
455		-	here, a table with its room opened again behind it, so the phones that were on
456		-	it can come back. A
	481	+	nothing is lost — the lobby offers 繼續對局 Resume above 開始, showing the
	482	+	round, hand number, chip counts and when it was saved. Which seats the computer
	483	+	holds is part of the state, so a save comes back with the same hands in the
	484	+	same places, and everybody who was on a phone scans back in exactly as they did
	485	+	the first time — a room is opened around a resumed table the same way it is
	486	+	opened around a fresh one, when somebody wants one. It is written by whichever
	487	+	device is running the game (`engine.persist = authority`), so the mirrors on
	488	+	everyone else's screens never fight it for the slot. A
457	489		save is validated before it is offered (four players, 144 tiles accounted for),
458	490		so a truncated or hand-edited one is ignored rather than loaded into a broken
459	491		table. `VERSION` in `save.ts` retires old saves if the state shape changes.
⋯ 62 unchanged lines
522	554
523	555		A seat becomes a place. `App.tsx` turns a seat into a *position round this
524	556		screen* — 0 the near edge, 1 the right, 2 across, 3 the left — because that is
525		-	what the ear wants and the seat number is not: online the table is turned so
526		-	you are always at the bottom, and the sound has to turn with it.
	557	+	what the ear wants and the seat number is not: a device holding one hand turns
	558	+	the table so that hand is at the bottom, and the sound has to turn with it.
527	559		`game/sound.ts` gives each position a bus of its own: a pan, a gain, and a
528	560		lowpass that opens all the way for the near edge and closes to 5 kHz for the
529	561		far one. Distance is two things at once — quieter, and with the top taken off
⋯ 5 unchanged lines
535	567		rather than building one per contact. Old Safari has no `StereoPannerNode`; it
536	568		plays where it always did.
537	569
538		-	At a shared table, the words come out of the player. Five devices in one
539		-	room, and the split the sound should take is the one the room already has: the
	570	+	**Where there is a table and phones round it, the words come out of the
	571	+	player.** The split the sound should take is the one the room already has: the
540	572		table makes the noise, because the tiles are on the table, and the phone in
541	573		somebody's hand says their calls, because the calls are theirs. So the table's
542	574		screen drops the voice for a seat while keeping the clack, and the phone
543	575		holding that seat says 碰 and names its own discards and makes no table noise
544	576		at all.
545	577
	578	+	Only a phone claims that job, and that is the whole of how the split knows
	579	+	where it applies. A phone is small enough to be in a hand and a hand is in the
	580	+	room; a friend playing from their own laptop three cities away is not, and
	581	+	never takes the words away from anybody's table. It is a proxy rather than a
	582	+	fact — software cannot know who is sitting where — but it is the one property
	583	+	that actually correlates with it, and it fails in the harmless direction:
	584	+	the worst a wrong guess costs is a call said twice in two rooms.
	585	+
546	586		That only works if the phone really is going to say it, so it is asked rather
547	587		than assumed. `sound.voiceLive()` is the honest answer — sound on, 報牌 on, the
548	588		audio hardware awake, the pack decoded — and every device reports it to the
⋯ 1 unchanged line
550	590		hands have a device that will speak for them and publishes that as `voices` in
551	591		room state; a nameplate wearing 🔊 next to its 📱 is a seat the table has gone
552	592		quiet for on purpose. Mute the phone, put it to sleep, hand the seat back —
553		-	the flag drops and the table takes the calls back mid-hand. The host's own
554		-	device never counts, even when it holds seats: it is the table, and a table
555		-	that fell silent on the grounds that it was about to speak would say nothing at
556		-	all.
	593	+	the flag drops and the table takes the calls back mid-hand. The device the
	594	+	table is being played at never counts, even when it holds seats: it is the
	595	+	table, and a table that fell silent on the grounds that it was about to speak
	596	+	would say nothing at all.
557	597
558	598		A browser will not start audio before the page has been touched, and a phone
559	599		that arrived by QR may never touch anything that asks for it by name — so the
⋯ 105 unchanged lines
665	705		src/net/table.ts TableCtl over the wire: mirror + intents + hand overlay
666	706		src/net/protocol.ts what crosses the wire, in one place
667	707		src/net/handOrder.ts your own arrangement, kept on your own device
668		-	src/ui/Controller.tsx the phone at the shared table: your tiles and the throw
669		-	src/ui/OnlineLobby.tsx seats and the deal button, before an online game
	708	+	src/ui/Controller.tsx a hand held on a phone, plus the seat picker for any device
670	709		server/rooms.ts the relay: rooms, host election, state fan-out
671	710		server/index.ts production: dist/ and the relay from one port
672	711		src/table/physics.ts the discard pool: rectangles with weight, pure and testable
⋯ 232 unchanged lines

⋯ 23 unchanged lines
24	24		}
25	25
26	26		/**
27		-	* The phone at the party table: just your own tiles, held in landscape, with
28		-	* the common screen doing the table's share of the talking. What it keeps of
29		-	* the full table is the things that are yours — the buttons a claim window
30		-	* owes you, the throw, and your voice. Flick a tile up off the top of the
31		-	* phone and it leaves your hand here, crosses the wire, and comes flying in
32		-	* from your edge of the shared screen.
	27	+	* A hand held on a phone: just your own tiles, held in landscape, with the
	28	+	* table doing the table's share of the talking. What it keeps of the full
	29	+	* table is the things that are yours — the buttons a claim window owes you,
	30	+	* the throw, and your voice. Flick a tile up off the top of the phone and it
	31	+	* leaves your hand here, crosses the wire, and comes flying in from your edge
	32	+	* of the shared screen.
33	33		*
34		-	* Your voice, because the five devices at a party table are all in the same
35		-	* room: with sound on, this phone is what says 碰 when you call one, and the
36		-	* common screen stops saying it for you. Mute the phone and the table takes
37		-	* the job back — see `net/session.ts` for how it is told.
	34	+	* Your voice, because a phone is in somebody's hand and a hand is in the room:
	35	+	* with sound on, this phone is what says 碰 when you call one, and the table
	36	+	* stops saying it for you. Mute the phone and the table takes the job back —
	37	+	* see `net/session.ts` for how it is told.
38	38		*/
39	39		export function Controller({ session, prefs, onPrefs }: CtlProps) {
40	40		const seat = session.mySeat;
41		-
42		-	// The QR carries which seat it was stuck to; a phone that arrived some other
43		-	// way — or lost the parameter on the way in — picks one by hand below.
44		-	const [asked, setAsked] = useState(false);
45		-	useEffect(() => {
46		-	if (asked \|\| seat !== null) return;
47		-	const want = seatFromUrl();
48		-	if (want !== null) {
49		-	setAsked(true);
50		-	session.claimSeat(want);
51		-	}
52		-	}, [session, seat, asked]);
53		-
54		-	if (seat === null) {
55		-	return <SeatPick session={session} joining={asked} prefs={prefs} onPrefs={onPrefs} />;
56		-	}
	41	+	if (seat === null) return <SeatPick session={session} prefs={prefs} onPrefs={onPrefs} />;
57	42		return <SeatStrip session={session} seat={seat} prefs={prefs} onPrefs={onPrefs} />;
58	43		}
59	44
60		-	function SeatPick({ session, joining, prefs, onPrefs }: CtlProps & { joining?: boolean }) {
	45	+	/**
	46	+	* Which hand you are taking. Shown to any device that has walked into a room
	47	+	* and is not the table it was opened around — a phone off a QR, a friend off
	48	+	* the invite link.
	49	+	*
	50	+	* Every seat is offered, not only the empty ones. A hand the computer is
	51	+	* playing is the ordinary way in — that is what the three chairs nobody has
	52	+	* taken are — and a hand somebody else is already holding can be sat down at
	53	+	* too, which is how a pair play one hand off two devices.
	54	+	*/
	55	+	export function SeatPick({ session, prefs, onPrefs }: CtlProps) {
61	56		const t = useT();
62	57		const lang = useLang();
63	58		const seats = session.seats;
64	59		const s = session.table.state;
	60	+
	61	+	// A seat's own QR carries which hand it was stuck to, so scanning it lands
	62	+	// on that chair without anybody having to say which one they are in. The
	63	+	// table's shared QR names none, and then the choice is made here.
	64	+	const [asked, setAsked] = useState(false);
	65	+	const want = seatFromUrl();
	66	+	useEffect(() => {
	67	+	if (asked \|\| want === null) return;
	68	+	setAsked(true);
	69	+	session.claimSeat(want);
	70	+	}, [session, want, asked]);
	71	+
65	72		return (
66	73		<div className="ctl ctl-pick">
67	74		<h1>{lang === 'en' ? 'Taiwanese Mahjong' : '台灣麻將'}</h1>
68	75		<p className="sub">
69		-	{joining
	76	+	{asked
70	77		? `${t('入座中…', 'taking your seat')} — ${t('或先選別的', 'or pick another')}`
71		-	: t('選一個座位', 'pick your seat', ' · ')}
	78	+	: t('選一家', 'pick a hand', ' · ')}
72	79		</p>
73	80		<div className="pick-grid">
74	81		{SEATS.map((i) => {
⋯ 5 unchanged lines
80	87		<em>
81	88		{held > 0
82	89		? `${seats[i].name} — ${t('一起打', 'join this hand')}`
83		-	: seats[i].name \|\| t('空位', 'open')}
	90	+	: s.bots[i]
	91	+	? `${t('電腦代打中', 'the computer has it')} — ${t('接手', 'take over')}`
	92	+	: seats[i].name \|\| t('在桌上', 'played at the table', ' · ')}
84	93		</em>
85	94		</button>
86	95		);
⋯ 254 unchanged lines

⋯ 301 unchanged lines
302	302		className={`hand ${onFaceUp ? 'covered' : ''}`}
303	303		role={onFaceUp ? 'button' : undefined}
304	304		tabIndex={onFaceUp ? 0 : undefined}
305		-	aria-label={onFaceUp ? t('看牌', 'look at your hand', ' · ') : undefined}
	305	+	aria-label={onFaceUp ? t('看牌', 'look at this hand', ' · ') : undefined}
306	306		onClick={onFaceUp}
307	307		onKeyDown={onFaceUp && ((e) => (e.key === 'Enter' \|\| e.key === ' ') && onFaceUp())}
308	308		>
⋯ 32 unchanged lines

1	-	import { useEffect, useRef } from 'react';
2	-	import type { Prefs } from '../game/prefs';
3	-	import { WIND_EN, WIND_NAMES } from '../game/tiles';
4	-	import type { SeatId } from '../game/types';
5	-	import type { NetSession } from '../net/session';
6	-	import { Bi, BiText } from './Bi';
7	-	import { useLang, useT } from './lang';
8	-
9	-	const SEATS: SeatId[] = [0, 1, 2, 3];
10	-
11	-	/**
12	-	* The room before the deal: who is here, who is sitting where, and — for the
13	-	* host — the button that starts it. Seats nobody takes go to the computer, so
14	-	* two friends and two bots is a game, not a wait.
15	-	*/
16	-	export function OnlineLobby({ session, prefs }: { session: NetSession; prefs: Prefs }) {
17	-	const t = useT();
18	-	const lang = useLang();
19	-	const seats = session.seats;
20	-	const me = session.room.me.id;
21	-
22	-	// Walking in unseated: take the first free chair rather than making everyone
23	-	// pick one. Moving is one tap on another seat — including one somebody
24	-	// already holds, which is how two people share a hand.
25	-	const claimed = useRef(false);
26	-	useEffect(() => {
27	-	if (claimed.current \|\| session.mySeat !== null) return;
28	-	if (seats.some((s) => s.ids.length === 0)) {
29	-	claimed.current = true;
30	-	session.claimSeat(null);
31	-	}
32	-	}, [session, seats]);
33	-
34	-	const seated = seats.filter((s) => s.ids.length > 0).length;
35	-
36	-	return (
37	-	<div className="lobby">
38	-	<h1>{lang === 'en' ? 'Taiwanese Mahjong' : '台灣麻將'}</h1>
39	-	<p className="sub">
40	-	{t('線上對戰', 'online game', ' · ')} · {session.playerCount}{' '}
41	-	{t('人在房', 'in the room')}
42	-	</p>
43	-	<p className="hint">
44	-	<BiText
45	-	zh="把這頁的連結傳給朋友，他們一開就進同一房。"
46	-	en="Share this page's invite link — anyone who opens it lands at this table."
47	-	/>
48	-	</p>
49	-
50	-	<div className="pick-grid">
51	-	{SEATS.map((i) => {
52	-	const slot = seats[i];
53	-	const mine = slot.ids.includes(me);
54	-	const held = slot.ids.length;
55	-	return (
56	-	<button
57	-	key={i}
58	-	className={`btn big-btn ${mine ? '' : 'ghost'}`}
59	-	onClick={() => !mine && session.claimSeat(i)}
60	-	>
61	-	{t(WIND_NAMES[i], WIND_EN[i])}
62	-	<em>
63	-	{held === 0
64	-	? t('空位，開局時由電腦代打', 'open — a bot if nobody sits', ' · ')
65	-	: mine
66	-	? `${slot.name \|\| t('你', 'you')}${
67	-	held > 1 ? ` +${held - 1}` : ''
68	-	} · ${t('你', 'you')}`
69	-	: `${slot.name}${held > 1 ? ` +${held - 1}` : ''} · ${t('可同坐', 'join them')}`}
70	-	</em>
71	-	</button>
72	-	);
73	-	})}
74	-	</div>
75	-
76	-	<div className="lobby-buttons">
77	-	{session.isHost ? (
78	-	<button
79	-	className="btn big-btn"
80	-	disabled={seated === 0}
81	-	onClick={() => session.startOnline(prefs.rules)}
82	-	>
83	-	<Bi
84	-	zh="開局"
85	-	en="Deal"
86	-	sub={
87	-	seated < 4
88	-	? t(`${4 - seated} 個電腦`, `${4 - seated} bots fill in`)
89	-	: undefined
90	-	}
91	-	/>
92	-	</button>
93	-	) : (
94	-	<p className="hint">{t('等房主開局', 'waiting for the host to deal', ' · ')}</p>
95	-	)}
96	-	</div>
97	-	{session.err && <p className="hint">{session.err}</p>}
98	-	</div>
99	-	);
100	-	}

⋯ 11 unchanged lines
12	12		import { TileView } from './TileView';
13	13
14	14		/**
15		-	* A seat that exists somewhere else — a phone at the party table, or an online
16		-	* player. What of it shows on this screen is decided here.
	15	+	* Who is playing this hand, and what the table can do about it.
	16	+	*
	17	+	* There are three answers and they are the same three everywhere: the computer
	18	+	* has it, somebody at this screen has it, or it has gone onto a device of its
	19	+	* own. Any of them turns into any other mid-game — that is what the callbacks
	20	+	* are — and none of them redeals anything. Only the device the table is being
	21	+	* played at gets one of these; a visitor holding one hand has no business
	22	+	* moving the other three about.
17	23		*/
18		-	export interface RemoteSeat {
	24	+	export interface SeatWho {
19	25		/** Who holds it from their own device, or null while nobody does. */
20	26		holder?: string \| null;
21		-	/** Party screen: holding the 📱 tag re-shows the table's shared join QR,
22		-	* for the player who lost theirs. The QR itself lives in the table's
23		-	* corner — see App — because the strip clips its own contents. */
	27	+	/**
	28	+	* The device holding it has gone and the hand is being kept for a moment in
	29	+	* case that was a pocket rather than a goodbye. The computer takes it when
	30	+	* the moment is up, and gives it straight back to whoever comes for it.
	31	+	*/
	32	+	waiting?: boolean;
	33	+	/** Holding the 📱 tag re-shows the table's shared join QR, for the player
	34	+	* who lost theirs. The QR itself lives in the table's corner — see App —
	35	+	* because the strip clips its own contents. */
24	36		onPeek?: (show: boolean) => void;
25		-	/** Online host: the seat's player is gone; offer it to the computer. */
26		-	onHandToBot?: () => void;
	37	+	/** Somebody has sat down at this edge: take the hand off the computer. */
	38	+	onSit?: () => void;
	39	+	/** Nobody is going to play it here: give it to the computer. */
	40	+	onBot?: () => void;
	41	+	/** Take it onto a phone — opens the room first if there is not one yet. */
	42	+	onPhone?: () => void;
27	43		/**
28		-	* Party table: this seat's phone has its sound on, so the calls for this
29		-	* hand are coming out of it rather than out of this screen. Worth saying on
30		-	* the nameplate, because it is the difference between the table having gone
31		-	* quiet for a seat and having gone wrong.
	44	+	* This seat's phone has its sound on, so the calls for this hand are coming
	45	+	* out of it rather than out of this screen. Worth saying on the nameplate,
	46	+	* because it is the difference between the table having gone quiet for a
	47	+	* seat and having gone wrong.
32	48		*/
33	49		speaks?: boolean;
34	50		}
⋯ 23 unchanged lines
58	74		* because covering your own hand from yourself is just a tap in the way.
59	75		*/
60	76		shared?: boolean;
61		-	remote?: RemoteSeat;
	77	+	who?: SeatWho;
62	78		/** Phone-sized table: nothing is rotated and only the bottom gets a full strip. */
63	79		compact?: boolean;
64	80		/** The tiles in the middle. Absent on a phone, which has no middle. */
⋯ 10 unchanged lines
75	91		pos = seat,
76	92		local = true,
77	93		shared,
78		-	remote,
	94	+	who,
79	95		compact,
80	96		pool,
81	97		onHelp,
⋯ 81 unchanged lines
163	179		const delta = s.phase === 'handEnd' ? s.result?.deltas[seat] ?? 0 : 0;
164	180		// 一炮多響 can put more than one seat here, so this is a `some`, not a find.
165	181		const won = s.phase === 'handEnd' && !!s.result?.winners.some((w) => w.seat === seat);
166		-	// A deserted online seat, waiting for its person to come back — or for the
167		-	// host to hand it to the computer so the table can move.
168		-	const deserted = !!remote?.onHandToBot && !bot && remote.holder == null && live;
	182	+	// The computer is playing this hand and nobody has taken it off it. One tap
	183	+	// on the strip does — which is the whole of sitting down at this table.
	184	+	const sittable = !!who?.onSit && bot && live;
	185	+	// Its device has gone and the hand is being kept for it. Whoever is at the
	186	+	// table can stop waiting and hand it over now.
	187	+	const deserted = !!who?.waiting && !bot && live;
169	188
170	189		// Compact lays the discards out as one line that scrolls rather than a block
171	190		// that wraps, so the newest tile — the only one anybody is looking for — has
⋯ 144 unchanged lines
316	335		<Hand
317	336		tiles={p.hand}
318	337		faceDown={concealed}
319		-	onFaceUp={covered ? () => setShown(true) : undefined}
	338	+	/* Under the card, a tap lifts it. On a hand the computer is
	339	+	playing, the same tap is somebody pulling up a chair: the hand
	340	+	becomes theirs and turns over in the one gesture, which is as
	341	+	much ceremony as sitting down at a table ever gets. */
	342	+	onFaceUp={covered ? () => setShown(true) : sittable ? who!.onSit : undefined}
320	343		drawnIndex={drawnIndex}
321	344		selected={sel}
322	345		canDiscard={myTurn}
⋯ 59 unchanged lines
382	405		{!claiming && !canProceed && responded && s.phase !== 'turn' && (
383	406		<div className="waiting">{t('已回應', 'Responded')}</div>
384	407		)}
	408	+	{/* Sitting down. It is on the strip rather than in the gear because
	409	+	it is the one thing somebody who has just pulled up a chair wants
	410	+	to do, and they should not have to find a menu to do it. The
	411	+	tiles come out from under the card in the same tap. */}
	412	+	{sittable && (
	413	+	<button className="btn ghost sit" onClick={who!.onSit}>
	414	+	<Bi zh="坐下" en="Sit here" />
	415	+	</button>
	416	+	)}
385	417		{deserted && (
386		-	<button className="btn ghost" onClick={remote!.onHandToBot}>
	418	+	<button className="btn ghost" onClick={who!.onBot}>
387	419		<Bi zh="電腦代打" en="Hand to computer" />
388	420		</button>
389	421		)}
⋯ 34 unchanged lines
424	456		<BiEm zh={WIND_NAMES[seatWind]} en={WIND_EN[seatWind]} />
425	457		</span>
426	458		<span className="pname">{p.name}</span>
427		-	{remote?.holder != null && (
	459	+	{who?.waiting && (
	460	+	<span
	461	+	className="tag waiting"
	462	+	title={t(
	463	+	'這手牌的裝置斷了，先等一下，等不到就交給電腦',
	464	+	'this hand lost its device — kept a moment, then the computer takes it',
	465	+	' · ',
	466	+	)}
	467	+	>
	468	+	⏳
	469	+	</span>
	470	+	)}
	471	+	{who?.holder != null && (
428	472		<span
429	473		className="tag phone"
430	474		title={`${t('這手牌在手機上', 'played from a phone', ' · ')}. ${t(
⋯ 1 unchanged line
432	476		'hold to show the QR again',
433	477		' · ',
434	478		)}`}
435		-	onPointerDown={() => remote.onPeek?.(true)}
436		-	onPointerUp={() => remote.onPeek?.(false)}
437		-	onPointerCancel={() => remote.onPeek?.(false)}
438		-	onPointerLeave={() => remote.onPeek?.(false)}
	479	+	onPointerDown={() => who.onPeek?.(true)}
	480	+	onPointerUp={() => who.onPeek?.(false)}
	481	+	onPointerCancel={() => who.onPeek?.(false)}
	482	+	onPointerLeave={() => who.onPeek?.(false)}
439	483		>
440		-	📱 {remote.holder}
	484	+	📱 {who.holder}
441	485		</span>
442	486		)}
443		-	{remote?.speaks && (
	487	+	{who?.speaks && (
444	488		<span
445	489		className="tag voice"
446	490		title={t('喊牌從這支手機出來', 'this hand calls from its own phone', ' · ')}
⋯ 238 unchanged lines

⋯ 4 unchanged lines
5	5		import { FullscreenToggle } from './FullscreenToggle';
6	6		import { useLang, useT } from './lang';
7	7		import { SEAT_ROT, SEAT_SLOT } from './rotation';
	8	+	import type { SeatWho } from './Seat';
8	9		import { SeatQr } from './SeatQr';
9	10		import { SoundToggle } from './SoundToggle';
10	11
⋯ 18 unchanged lines
29	30		pos,
30	31		compact,
31	32		seatUrl,
	33	+	who,
32	34		onPrefs,
33	35		onSettings,
34	36		onClose,
⋯ 4 unchanged lines
39	41		pos: SeatId;
40	42		compact?: boolean;
41	43		/**
42		-	* The QR for taking this hand onto a phone, where there is a room to take
43		-	* it into. Absent when the table is on its own — no server, or an online
44		-	* game, where everybody is already on their own device.
	44	+	* The QR for taking this hand onto a phone, once there is a room to take
	45	+	* it into. Absent until then — `who.onPhone` is the button that opens one.
45	46		*/
46	47		seatUrl?: string;
	48	+	/** Who is playing this hand, and what can be done about that. */
	49	+	who?: SeatWho;
47	50		onPrefs: (p: Prefs) => void;
48	51		onSettings: () => void;
49	52		onClose: () => void;
⋯ 55 unchanged lines
105	108		<SoundToggle prefs={prefs} onPrefs={onPrefs} />
106	109		<FullscreenToggle prefs={prefs} onPrefs={onPrefs} />
107	110
	111	+	{/* Who is playing this hand. All three answers live in one place,
	112	+	and each is one tap away from either other: the computer has it,
	113	+	somebody at this screen has it, or it is on a phone. Nothing here
	114	+	deals anything, mid-hand included — the tiles simply change
	115	+	hands, which is what happens when somebody sits down. */}
	116	+	{who?.onSit && (
	117	+	<button
	118	+	className="btn ghost"
	119	+	onClick={() => {
	120	+	who.onSit!();
	121	+	onClose();
	122	+	}}
	123	+	>
	124	+	<Bi zh="我來打" en="I'll play it" sub={t('從電腦手上接過來', 'take it off the computer')} />
	125	+	</button>
	126	+	)}
	127	+	{who?.onBot && (
	128	+	<button
	129	+	className="btn ghost"
	130	+	onClick={() => {
	131	+	who.onBot!();
	132	+	onClose();
	133	+	}}
	134	+	>
	135	+	<Bi zh="電腦代打" en="Hand to computer" />
	136	+	</button>
	137	+	)}
	138	+
108	139		{/* Taking this hand off the shared screen. The QR is the seat's own,
109	140		so scanning it lands on this chair without anybody having to say
110	141		which one they are in — and the tiles here go face down for good
111	142		rather than under a card that lifts. */}
112		-	{seatUrl && (
113		-	<div className="menu-qr">
114		-	<SeatQr url={seatUrl} />
115		-	<span className="menu-qr-hint">
116		-	{lang !== 'en' && '掃碼把這副牌拿到手機上'}
117		-	{lang !== 'zh' && <em>scan to hold this hand on your phone</em>}
118		-	</span>
119		-	</div>
120		-	)}
	143	+	{who?.onPhone &&
	144	+	(seatUrl ? (
	145	+	<div className="menu-qr">
	146	+	<SeatQr url={seatUrl} />
	147	+	<span className="menu-qr-hint">
	148	+	{lang !== 'en' && '掃碼把這副牌拿到手機上'}
	149	+	{lang !== 'zh' && <em>scan to hold this hand on your phone</em>}
	150	+	</span>
	151	+	</div>
	152	+	) : (
	153	+	// No room yet, and none was needed: a table of people and
	154	+	// computers never says a word to a server. The first person who
	155	+	// wants a phone in the game is the one who opens it.
	156	+	<button className="btn ghost" onClick={who.onPhone}>
	157	+	<Bi
	158	+	zh="用手機拿牌"
	159	+	en="Onto a phone"
	160	+	sub={t('開房間，出 QR', 'opens the room and puts up a QR')}
	161	+	/>
	162	+	</button>
	163	+	))}
121	164
122	165		{/* The moment anybody wants a name or the stakes changed is the
123	166		moment they went looking for a gear. */}
⋯ 14 unchanged lines