anvilsign in

collin/mahjong

7c83cfe4d56ad03f5976a2d1f6232664dcd9518b / src / ui / Center.tsx
1import type { Game } from '../game/engine';
2import type { Prefs } from '../game/prefs';
3import type { SeatId } from '../game/types';
4import { labelOf } from '../game/tiles';
5import { Bi } from './Bi';
6import { FullscreenToggle } from './FullscreenToggle';
7import { SoundToggle } from './SoundToggle';
8import { TileView } from './TileView';
9import { SEAT_ROT } from './rotation';
10import { WallRing } from './WallRing';
11
12interface Props {
13 game: Game;
14 prefs: Prefs;
15 /** Phone-sized table: the centre becomes a single bar between the seats. */
16 compact?: boolean;
17 onPrefs: (p: Prefs) => void;
18 onSettings: () => void;
19}
20
21export function Center({ game, prefs, compact, onPrefs, onSettings }: Props) {
22 const s = game.state;
23 const r = s.result;
24 // Point the live readout at whoever can move the game along.
25 const pending = (Object.keys(s.options) as unknown as number[])
26 .map(Number)
27 .filter((k) => s.responses[k as SeatId] === undefined) as SeatId[];
28 // Against the computer there is only one person reading this, and they are
29 // sitting at the bottom of the screen.
30 const human = s.bots.indexOf(false);
31 const facing = human >= 0 && game.hasBots ? (human as SeatId) : game.nextDrawer() ?? s.turn;
32 // Deliberately not per-seat: whoever spots the mis-tap should be able to
33 // reach it, not just the player who made it.
34 const undoable = s.phase === 'gameEnd' ? null : game.undoable();
35
36 return (
37 <div className="center">
38 {/* The wall square wants the whole middle of the table, which a phone does
39 not have to give — there it shrinks to the one number it was telling
40 you anyway. */}
41 {s.phase !== 'gameEnd' &&
42 (compact ? (
43 <div className="wall-pill">
44 <b>{game.wallLeft}</b>
45 <em>剩牌 left</em>
46 </div>
47 ) : (
48 <WallRing state={s} />
49 ))}
50
51 <div
52 className="facing"
53 style={compact ? undefined : { transform: `rotate(${SEAT_ROT[facing]}deg)` }}
54 >
55 {s.lastDiscard && s.phase !== 'handEnd' && (
56 <div className="last-discard">
57 <div className="ld-label">{s.players[s.lastDiscard.from].name} 打 discarded</div>
58 <TileView tile={s.lastDiscard.tile} size="hand" highlight />
59 </div>
60 )}
61
62 {s.phase === 'claims' && (
63 <div className="prompt">
64 {pending.length} 家可吃碰 · {pending.length} may claim
65 </div>
66 )}
67 {s.phase === 'robkong' && <div className="prompt warn">搶槓機會 · Rob the kong?</div>}
68 </div>
69
70 {r && s.phase !== 'gameEnd' && (
71 <div className="result">
72 {r.drawGame ? (
73 <>
74 <h2>流局 · Draw</h2>
75 {/* Nobody won, so the thing everyone wants to see is who was
76 there and on what — the same reveal as turning the hands over
77 at a real table. */}
78 <div className="ready-list">
79 {s.players.map((p, seat) => {
80 const waiting = game.tenpai(seat as SeatId);
81 return (
82 <div className={`ready-row ${waiting.length ? '' : 'none'}`} key={seat}>
83 <span className="ready-name">{p.name}</span>
84 {waiting.length > 0 ? (
85 <>
86 <span className="tag ting">聽 Ready</span>
87 <span className="ready-tiles">
88 {waiting.map((t) => (
89 <TileView key={t} tile={t} size="small" />
90 ))}
91 </span>
92 </>
93 ) : (
94 <span className="ready-no">未聽 · not ready</span>
95 )}
96 </div>
97 );
98 })}
99 </div>
100 </>
101 ) : (
102 <>
103 {/* One block per winner — more than one only under 一炮多響. */}
104 {r.winners.map((w) => (
105 <div className="win" key={w.seat}>
106 <h2>
107 {s.players[w.seat].name} {w.selfDraw ? '自摸' : '胡牌'} · {w.tai} 台
108 <span className="wt"> {labelOf(w.winTile)}</span>
109 </h2>
110 {w.liable !== null && (
111 <div className="liable">
112 包牌 · {s.players[w.liable].name} pays the whole hand
113 </div>
114 )}
115 <div className="tai-list">
116 {w.items.map((it, i) => (
117 <div key={i} className="tai-item">
118 <span className="tai-name">
119 {it.name}
120 <em>{it.en}</em>
121 </span>
122 <span className="tai-val">{it.tai}</span>
123 </div>
124 ))}
125 </div>
126 </div>
127 ))}
128 {r.winners.length > 1 && (
129 <div className="multi">一炮多響 · one discard, {r.winners.length} winners</div>
130 )}
131 <div className="deltas">
132 {r.deltas.map((d, i) => (
133 <span key={i} className={d > 0 ? 'up' : d < 0 ? 'down' : ''}>
134 {s.players[i].name} {d > 0 ? `+${d}` : d}
135 </span>
136 ))}
137 </div>
138 </>
139 )}
140 <button className="btn big-btn" onClick={() => game.nextHand()}>
141 <Bi zh="下一局" en="Next hand" />
142 </button>
143 </div>
144 )}
145
146 {s.phase === 'gameEnd' && (
147 <div className="result">
148 <h2>一將終了 · Game over</h2>
149 <div className="deltas">
150 {[...s.players]
151 .map((p, i) => ({ p, i }))
152 .sort((a, b) => b.p.score - a.p.score)
153 .map(({ p, i }) => (
154 <span key={i} className={p.score > s.rules.startingScore ? 'up' : p.score < s.rules.startingScore ? 'down' : ''}>
155 {p.name} {p.score}
156 </span>
157 ))}
158 </div>
159 <div className="over-buttons">
160 <button className="btn big-btn" onClick={() => game.newGame(s.bots)}>
161 <Bi zh="再來一將" en="New game" />
162 </button>
163 {/* The moment anyone is going to want the names or the stakes changed. */}
164 <button className="btn ghost big-btn" onClick={onSettings}>
165 <Bi zh="設定" en="Settings" />
166 </button>
167 </div>
168 </div>
169 )}
170
171 <div className="table-controls">
172 {undoable && (
173 <button className="btn ghost undo" onClick={() => game.undo()}>
174 <span className="undo-arrow" aria-hidden>
175 ↺
176 </span>
177 <span className="undo-what">
178 <span className="zh">復原 {undoable.zh}</span>
179 <span className="en">Undo · {undoable.en}</span>
180 </span>
181 </button>
182 )}
183 {/* Only on the layout the address bar actually crowds. */}
184 {compact && <FullscreenToggle prefs={prefs} onPrefs={onPrefs} compact />}
185 <SoundToggle prefs={prefs} onPrefs={onPrefs} compact />
186 </div>
187 </div>
188 );
189}