feat(offline): hotseat in-game seat lock + host menu

Game.svelte drives a hotseat game:
- the seat-to-move's rack is replaced by an Unlock button when the seat
  is PIN-locked (board stays visible); canMove gates the move controls
  on the unlock; PinPad(verify) -> source.unlockSeat reveals it.
- the hint slot becomes a host button (hints off in hotseat), always
  enabled while the game runs (acts on a locked seat too). Master-PIN ->
  action sheet: skip current / exclude a player / end the game, each with
  a confirm + a fading check; terminate deletes and returns to the lobby.
- per-turn advance re-fetches the next seat's (locked) state; self-resign
  and chat are hidden (hotseat resign is a host action, no comms).
- gamesource: expose unlockSeat / verifyHostPin / hostAction on the local
  proxy. i18n hotseat.* (en + ru).
This commit is contained in:
Ilia Denisov
2026-07-07 11:39:43 +02:00
parent 6216359c6f
commit 4ddc690c38
4 changed files with 275 additions and 19 deletions
+248 -18
View File
@@ -4,6 +4,7 @@
import TabBar from '../components/TabBar.svelte';
import TapConfirm from '../components/TapConfirm.svelte';
import Modal from '../components/Modal.svelte';
import PinPad from '../components/PinPad.svelte';
import DictWarmup from '../components/DictWarmup.svelte';
import Board from './Board.svelte';
import Rack from './Rack.svelte';
@@ -163,6 +164,11 @@
const playable = $derived(!!view && (view.game.status === 'active' || view.game.status === 'open'));
const isMyTurn = $derived(!!view && playable && view.game.toMove === view.seat);
const gameOver = $derived(!!view && view.game.status === 'finished');
// Offline hotseat: the seat to move is PIN-locked until its owner enters the seat PIN this turn.
// While locked the board stays visible but the rack is withheld and the move controls disabled;
// canMove folds the lock into isMyTurn (locked is always false for a network / vs_ai game).
const locked = $derived(!!view?.locked);
const canMove = $derived(isMyTurn && !locked);
// The hint badge: this game's allowance remaining plus the LIVE global wallet. Reading the
// wallet from the profile (not the per-game view snapshot) keeps it correct after a wallet
// hint was spent in another game (see lib/hints).
@@ -774,8 +780,8 @@
// rapid placements do not pile up requests on a slow link.
evalCtrl?.abort();
evalCtrl = null;
// Off-turn the composition is position-only: no score preview or evaluate.
if (!isMyTurn) return;
// Off-turn (or a locked hotseat seat) the composition is position-only: no score preview.
if (!canMove) return;
const sub = toSubmit(placement);
if (!sub) return;
// Instant on-device preview when the game's dictionary is warm; the network otherwise.
@@ -833,12 +839,106 @@
refreshRecent();
}
// --- offline hotseat: seat unlock + host (referee) overrides -------------------
let unlockOpen = $state(false); // the current locked seat's owner enters their PIN to reveal the rack
// The host menu: 'pin' collects the master PIN, then 'menu' lists the overrides. hostPinEntered is
// the verified master PIN, reused to authorise the chosen action (the source re-checks it).
let hostMenuStep = $state<'closed' | 'pin' | 'menu'>('closed');
let hostPinEntered = $state('');
// The pending host action awaiting its confirm ("Skip X's turn?" etc.); null shows the menu list.
let hostConfirm = $state<{ action: 'skip' | 'resign' | 'terminate'; seat?: number; name?: string } | null>(null);
let hostDone = $state(false); // the transient success ✅ shown after an override
// hotseatName is the plain display name of a seat by index (hotseat seats are account-less local
// players, so no "you"/🤖 resolution is needed — unlike the seat-object seatName used elsewhere).
function hotseatName(i: number): string {
return view?.game.seats[i]?.displayName ?? '';
}
function startSkip(): void {
if (!view) return;
hostConfirm = { action: 'skip', seat: view.game.toMove, name: hotseatName(view.game.toMove) };
}
function flashDone(): void {
hostDone = true;
setTimeout(() => (hostDone = false), 1100);
}
// advanceHotseat re-points the screen at the next seat after a hotseat move: the source has advanced
// the turn and re-locked, so a fresh state gives the next seat's rack (empty while it is locked).
async function advanceHotseat(): Promise<void> {
const st = await source.gameState(id, false);
view = st;
rackIds = st.rack.map((_, i) => i);
placement = newPlacement(st.rack);
selected = null;
preview = null;
setCachedGame(id, st, moves, '');
}
// onUnlock verifies the current seat's PIN through the source (which reveals the rack on success)
// and applies the unlocked state; handed to the PIN pad as its verifier.
async function onUnlock(pin: string): Promise<boolean> {
try {
const st = await localSource.unlockSeat(id, pin);
view = st;
rackIds = st.rack.map((_, i) => i);
placement = newPlacement(st.rack);
selected = null;
return true;
} catch {
return false;
}
}
// verifyHost captures the entered master PIN (reused to authorise the chosen action) and checks it.
async function verifyHost(pin: string): Promise<boolean> {
hostPinEntered = pin;
return localSource.verifyHostPin(id, pin);
}
function hostConfirmText(c: { action: 'skip' | 'resign' | 'terminate'; name?: string }): string {
if (c.action === 'skip') return t('hotseat.askSkip', { name: c.name ?? '' });
if (c.action === 'resign') return t('hotseat.askExclude', { name: c.name ?? '' });
return t('hotseat.askTerminate');
}
async function runHostAction(): Promise<void> {
if (!hostConfirm) return;
const { action, seat } = hostConfirm;
hostConfirm = null;
hostMenuStep = 'closed';
busy = true;
try {
const st = await localSource.hostAction(id, hostPinEntered, action, seat);
if (st === null) {
navigate('/'); // terminated: the game is deleted, so return to the lobby
return;
}
view = st;
rackIds = st.rack.map((_, i) => i);
placement = newPlacement(st.rack);
selected = null;
preview = null;
moves = (await source.gameHistory(id)).moves; // a skip / resign added a journal move
setCachedGame(id, st, moves, '');
flashDone();
} catch (e) {
handleError(e);
} finally {
busy = false;
hostPinEntered = '';
}
}
async function commit() {
const sub = toSubmit(placement);
if (!sub) return;
busy = true;
try {
applyMoveResult(await source.submitPlay(id, sub.tiles, variant));
if (view?.game.hotseat) await advanceHotseat();
haptic('success');
zoomed = false;
} catch (e) {
@@ -858,6 +958,7 @@
busy = true;
try {
applyMoveResult(await source.pass(id));
if (view?.game.hotseat) await advanceHotseat();
} catch (e) {
handleError(e);
} finally {
@@ -979,6 +1080,7 @@
busy = true;
try {
applyMoveResult(await source.exchange(id, tiles, variant));
if (view?.game.hotseat) await advanceHotseat();
} catch (e) {
handleError(e);
} finally {
@@ -1433,13 +1535,17 @@
{:else}
<button class="hicon" onclick={onExportClick} aria-label={t('game.exportGcg')}>📤</button>
{/if}
{:else if view.game.hotseat}
<!-- Hotseat resign is a host (referee) action, not self-serve; keep the slot empty. -->
<span aria-hidden="true"></span>
{:else}
<button class="hicon" onclick={onResignClick} disabled={waitingForOpponent} aria-label={t('game.dropGame')}>🏁</button>
{/if}
{#if !view.game.multipleWordsPerTurn}<span class="oneword-label">{t('game.oneWordRule')}</span>{/if}
<!-- A finished AI game has no comms at all (no chat, and the dictionary closes with the
game), so the entry is dropped; an active AI game keeps it (it opens the dictionary). -->
{#if !(gameOver && view.game.vsAi)}
game), so the entry is dropped; an active AI game keeps it (it opens the dictionary).
A hotseat game has no chat either (local players, no accounts). -->
{#if !(gameOver && view.game.vsAi) && !view.game.hotseat}
<button class="hicon" onclick={() => navigate(`/game/${id}/chat`)} aria-label={t('game.chat')}>
{#key chatBlink}<span class="chat-ico" class:blink={chatBlink > 0 && !app.reduceMotion}>💬</span>{/key}
</button>
@@ -1512,7 +1618,7 @@
{#if gameOver}
<strong class="over">{resultText()}</strong>
{:else if placement.pending.length === 0}
<span class="turn-ind">{isMyTurn ? t('game.yourTurn') : turnLabel()}</span>
<span class="turn-ind">{view.game.hotseat ? t('hotseat.turnOf', { name: hotseatName(view.game.toMove) }) : isMyTurn ? t('game.yourTurn') : turnLabel()}</span>
{/if}
<span class="scores">
{#if recallOverRack}{:else if preview}{preview.legal ? t('game.previewWords', { words: preview.words.join(', '), n: preview.score }) : t('game.previewIllegal')}{/if}
@@ -1526,28 +1632,40 @@
a finished game shows the final rack greyed out and the controls disabled. -->
<div class="rack-row" class:inert={gameOver} data-coach="game-rack">
<div class="rack-wrap">
<Rack
slots={rackSlots}
{variant}
{selected}
{landscape}
shuffling={shuffling && !app.reduceMotion}
draggingId={reorderDragId}
dropIndex={reorderTo}
ondown={onRackDown}
/>
{#if locked}
<!-- A PIN-locked hotseat seat: the rack is withheld until its owner unlocks it. The board
above stays visible; only this tray is gated. -->
<button class="unlock" onclick={() => (unlockOpen = true)}>🔒 {t('hotseat.unlock')}</button>
{:else}
<Rack
slots={rackSlots}
{variant}
{selected}
{landscape}
shuffling={shuffling && !app.reduceMotion}
draggingId={reorderDragId}
dropIndex={reorderTo}
ondown={onRackDown}
/>
{/if}
</div>
{#if !gameOver && placement.pending.length > 0 && !recallOverRack}
<button class="make" onclick={commit} disabled={busy || !isMyTurn || !netReady || !preview?.legal} aria-label={t('game.makeMove')}>✅</button>
<button class="make" onclick={commit} disabled={busy || !canMove || !netReady || !preview?.legal} aria-label={t('game.makeMove')}>✅</button>
{/if}
</div>
{/snippet}
{#snippet controlButtons()}
<button class="tab" disabled={busy || !isMyTurn || !netReady} onclick={openExchange}>
<button class="tab" disabled={busy || !canMove || !netReady} onclick={openExchange}>
<span class="sq" data-coach="game-turn">🔄</span><span class="lbl">{t('game.draw')}</span>
</button>
{#if view?.game.vsAi}
{#if view?.game.hotseat}
<!-- Hotseat: no hints. The freed slot becomes the host (referee) button — always available
(even on a locked seat: the host may skip a player who forgot their PIN). -->
<button class="tab" disabled={busy || gameOver} onclick={() => (hostMenuStep = 'pin')}>
<span class="sq">🔐</span><span class="lbl">{t('hotseat.host')}</span>
</button>
{:else if view?.game.vsAi}
<!-- vs_ai hints are unlimited and wallet-free, so no confirm and no count. A 🔒 badge marks the
idle gate while it is closed; tapping then only explains when it opens (doHint), and the lock
lifts live at the unlock moment. -->
@@ -1623,6 +1741,55 @@
</Modal>
{/if}
<!-- Offline hotseat: unlock the current seat's rack. -->
{#if unlockOpen && view}
<PinPad
mode="verify"
title={t('hotseat.unlockTitle', { name: hotseatName(view.game.toMove) })}
verify={onUnlock}
onclose={() => (unlockOpen = false)}
onresult={() => (unlockOpen = false)}
/>
{/if}
<!-- Offline hotseat: the host (referee) enters the master PIN, then picks an override. -->
{#if hostMenuStep === 'pin'}
<PinPad
mode="verify"
title={t('hotseat.host')}
verify={verifyHost}
onclose={() => (hostMenuStep = 'closed')}
onresult={() => (hostMenuStep = 'menu')}
/>
{/if}
{#if hostMenuStep === 'menu' && view}
<Modal title={t('hotseat.host')} onclose={() => { hostMenuStep = 'closed'; hostConfirm = null; }}>
{#if hostConfirm}
<p class="host-q">{hostConfirmText(hostConfirm)}</p>
<div class="confirm-row">
<button class="cancel" onclick={() => (hostConfirm = null)}>{t('common.cancel')}</button>
<button class="danger" onclick={runHostAction}>{t('common.ok')}</button>
</div>
{:else}
<div class="host-menu">
<button class="host-act" onclick={startSkip}>
{t('hotseat.skip')}
</button>
<div class="host-sub">{t('hotseat.exclude')}</div>
{#each view.game.seats as s (s.seat)}
<button class="host-seat" onclick={() => (hostConfirm = { action: 'resign', seat: s.seat, name: s.displayName })}>
{s.displayName}
</button>
{/each}
<button class="host-act danger" onclick={() => (hostConfirm = { action: 'terminate' })}>{t('hotseat.terminate')}</button>
</div>
{/if}
</Modal>
{/if}
{#if hostDone}
<div class="host-done" aria-hidden="true"></div>
{/if}
{#if exportOpen}
<Modal title={t('game.exportGcg')} onclose={() => (exportOpen = false)}>
<div class="export-opts">
@@ -2122,4 +2289,67 @@
font-size: 0.62rem;
line-height: 1;
}
/* --- offline hotseat --- */
/* The locked-seat rack overlay: fills the rack tray with an "unlock" button, the board above
stays visible. */
.unlock {
width: 100%;
height: 100%;
min-height: 44px;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.host-menu {
display: flex;
flex-direction: column;
gap: 8px;
}
.host-act,
.host-seat {
padding: 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font-weight: 600;
text-align: left;
}
.host-act.danger {
border-color: var(--danger);
color: var(--danger);
}
.host-sub {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 4px;
}
.host-q {
margin: 0 0 12px;
font-weight: 600;
}
/* The transient success tick after a host override — a centred ✅ that fades out on a timer. */
.host-done {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
z-index: 50;
pointer-events: none;
animation: host-done-fade 1.1s ease forwards;
}
@keyframes host-done-fade {
0% { opacity: 0; transform: scale(0.7); }
25% { opacity: 1; transform: scale(1); }
75% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1); }
}
</style>
+7 -1
View File
@@ -41,6 +41,11 @@ export const localSource = {
create: (opts) => load().then((s) => s.create(opts)),
list: () => load().then((s) => s.list()),
delete: (id) => load().then((s) => s.delete(id)),
// Offline hotseat controls (no network equivalent): reveal a PIN-locked seat, and the host
// (referee) overrides gated by the master PIN.
unlockSeat: (id, pin) => load().then((s) => s.unlockSeat(id, pin)),
verifyHostPin: (id, pin) => load().then((s) => s.verifyHostPin(id, pin)),
hostAction: (id, pin, action, targetSeat) => load().then((s) => s.hostAction(id, pin, action, targetSeat)),
// events must return the unsubscribe synchronously (the screen subscribes in onMount), so it wires
// the real subscription once the engine loads and, until then, cancels a pending subscribe.
events: (id, onEvent) => {
@@ -54,7 +59,8 @@ export const localSource = {
unsub();
};
},
} satisfies GameLoopSource & Pick<LocalSource, 'events' | 'create' | 'list' | 'delete'>;
} satisfies GameLoopSource &
Pick<LocalSource, 'events' | 'create' | 'list' | 'delete' | 'unlockSeat' | 'verifyHostPin' | 'hostAction'>;
/**
* gameSource returns the source that runs the game with the given id: the local engine for a local
+10
View File
@@ -408,6 +408,16 @@ export const en = {
'hotseat.hostPlaysTitle': 'Are you playing too?',
'hotseat.hostPlaysYes': 'Yes, I play',
'hotseat.hostPlaysNo': 'No',
'hotseat.unlock': 'Unlock',
'hotseat.unlockTitle': 'Unlock: {name}',
'hotseat.turnOf': 'Turn: {name}',
'hotseat.host': 'Host',
'hotseat.skip': 'Skip the current turn',
'hotseat.exclude': 'Exclude a player:',
'hotseat.terminate': 'End the game',
'hotseat.askSkip': "Skip {name}'s turn?",
'hotseat.askExclude': 'Remove {name} from the game?',
'hotseat.askTerminate': 'End the game with no result?',
} as const;
export type MessageKey = keyof typeof en;
+10
View File
@@ -408,4 +408,14 @@ export const ru: Record<MessageKey, string> = {
'hotseat.hostPlaysTitle': 'Принимаете участие в игре?',
'hotseat.hostPlaysYes': 'Да, играю',
'hotseat.hostPlaysNo': 'Нет',
'hotseat.unlock': 'Разблокировать',
'hotseat.unlockTitle': 'Разблокировать: {name}',
'hotseat.turnOf': 'Ход: {name}',
'hotseat.host': 'Ведущий',
'hotseat.skip': 'Пропустить ход',
'hotseat.exclude': 'Исключить игрока:',
'hotseat.terminate': 'Отменить партию',
'hotseat.askSkip': 'Пропустить ход игрока {name}?',
'hotseat.askExclude': 'Удалить {name} из игры?',
'hotseat.askTerminate': 'Отменить партию без результата?',
};