Compare commits
7 Commits
d7f3d93c6c
...
baa9961c3e
| Author | SHA1 | Date | |
|---|---|---|---|
| baa9961c3e | |||
| 66278e34b7 | |||
| 452a686e07 | |||
| 4ddc690c38 | |||
| 6216359c6f | |||
| 8c67d679d9 | |||
| 69673e7727 |
+16
-2
@@ -1251,8 +1251,22 @@ toggle — distinct from the transient gateway-reachability signal — that tint
|
|||||||
an *Offline* chip and confines play to on-device `vs_ai` games. The **offline lobby lists only those
|
an *Offline* chip and confines play to on-device `vs_ai` games. The **offline lobby lists only those
|
||||||
device-local games** (reconstructed by replaying the IndexedDB move journal) and its New-vs-AI entry
|
device-local games** (reconstructed by replaying the IndexedDB move journal) and its New-vs-AI entry
|
||||||
creates one through the in-browser engine — the same game screen then drives it, the robot replying
|
creates one through the in-browser engine — the same game screen then drives it, the robot replying
|
||||||
locally; online-only affordances (the Stats tab, the friend/random options in New Game) are disabled
|
locally; online-only affordances (the Stats tab, the random-opponent option) are disabled
|
||||||
or hidden. A `vs_ai` hint (online and offline alike) is unlimited and wallet-free but idle-gated
|
or hidden, and New Game's *with friends* becomes the entry to **local pass-and-play (hotseat)**.
|
||||||
|
A hotseat game is a device-local **2-4 human** game built through the same engine (`hotseat` +
|
||||||
|
per-seat/host PIN locks on the record; the seats carry names but no accounts). A **mandatory host
|
||||||
|
(referee) PIN** gates the roster at creation and, in-game, the referee overrides — **skip** the
|
||||||
|
current turn, **exclude** a player (a forced seat resign, `resignSeat`) or **terminate** the game
|
||||||
|
(deleted, no winner/loser); each seat may also carry its own **optional PIN** that withholds its rack
|
||||||
|
(the board stays visible — only the tray is gated) until it is entered, so players pass the device
|
||||||
|
around freely and lock a seat only against a distrusted tablemate. The unlock is **per turn**
|
||||||
|
(re-locks on advance). PINs are a **social lock, not cryptography** — a salted SHA-256 kept only in
|
||||||
|
the device record (`lib/pin`); a 4-digit PIN is trivially brute-forceable and the racks live in
|
||||||
|
client memory regardless, so they defeat a casual glance, not a determined peek. A hotseat game is
|
||||||
|
**not `vs_ai`**: hints (the freed control becomes the host button) and chat/self-resign are gone, and
|
||||||
|
its lobby card — active *and* finished — is master-PIN-gated to delete (so the last mover cannot
|
||||||
|
instantly wipe it); a naturally finished game is saved with its result like any local game. A `vs_ai`
|
||||||
|
hint (online and offline alike) is unlimited and wallet-free but idle-gated
|
||||||
(unlocked ~30 min into a stuck turn), and counts toward no hint statistic. The **source** reports the
|
(unlocked ~30 min into a stuck turn), and counts toward no hint statistic. The **source** reports the
|
||||||
**seconds left** (`hint_unlock_left_seconds` on the game view) — computed by the **backend from the
|
**seconds left** (`hint_unlock_left_seconds` on the game view) — computed by the **backend from the
|
||||||
server clock** online (which also enforces the gate, returning `hint_locked` for an early request),
|
server clock** online (which also enforces the gate, returning `hint_locked` for an early request),
|
||||||
|
|||||||
+16
-2
@@ -269,8 +269,8 @@ statistics.
|
|||||||
An installed web PWA signed in with a confirmed email can switch to a deliberate **offline mode**
|
An installed web PWA signed in with a confirmed email can switch to a deliberate **offline mode**
|
||||||
(Settings → Play mode). Offline, the app never touches the network: the header turns blue with an
|
(Settings → Play mode). Offline, the app never touches the network: the header turns blue with an
|
||||||
*Offline* chip, the lobby lists only the games stored on the device, and online-only surfaces are
|
*Offline* chip, the lobby lists only the games stored on the device, and online-only surfaces are
|
||||||
disabled or hidden (the Stats tab; the *with friends* and *random opponent* options in New Game).
|
disabled or hidden (the Stats tab; the *random opponent* option in New Game).
|
||||||
Only **vs_ai** games are playable — New Game creates a device-local game against the robot, which
|
A New Game against the robot creates a device-local **vs_ai** game — it
|
||||||
plays entirely in the browser with no backend. Local games are kept on the device, visible only in
|
plays entirely in the browser with no backend. Local games are kept on the device, visible only in
|
||||||
offline mode, and never sync to the account. So a game can be created and played with no connection,
|
offline mode, and never sync to the account. So a game can be created and played with no connection,
|
||||||
the app quietly preloads the dictionaries for the player's enabled variants while still online, and
|
the app quietly preloads the dictionaries for the player's enabled variants while still online, and
|
||||||
@@ -280,6 +280,20 @@ and waits briefly, and if they cannot be readied it stays online with a short *n
|
|||||||
(the download keeps running in the background, so a later switch is instant). The mode is
|
(the download keeps running in the background, so a later switch is instant). The mode is
|
||||||
device-scoped and sticky across launches.
|
device-scoped and sticky across launches.
|
||||||
|
|
||||||
|
Offline, New Game's **with friends** starts a **local pass-and-play** game for 2-4 people sharing one
|
||||||
|
device. You first set a **host (leader) password** — a 4-digit PIN entered on a lock-screen-style
|
||||||
|
keypad; until it is set the player rows stay locked. The app then asks whether you are playing too —
|
||||||
|
if so you take the first seat with your profile name. You name each player (2 to 4; add or remove
|
||||||
|
rows, where a removal asks for the leader password) and may give any seat its **own optional PIN**.
|
||||||
|
During the game the board is always visible, but a PIN-locked seat shows an **Unlock** button in place
|
||||||
|
of its rack until its owner enters the PIN — so the device passes hand to hand and only a protected
|
||||||
|
seat hides its letters; the lock returns each turn. The **leader** (the host button in the game) can,
|
||||||
|
with the leader password, **skip** the current player's turn, **remove** a player, or **end the game
|
||||||
|
early** — an early end discards the game with no winner or loser. Hints and chat are off in a
|
||||||
|
pass-and-play game. A game that finishes normally is saved to the offline lobby like any other;
|
||||||
|
deleting any pass-and-play game — running or finished — from the lobby asks for the leader password,
|
||||||
|
so no one can wipe a game the moment they have moved.
|
||||||
|
|
||||||
The app also **enters offline mode on its own** when it cannot reach the network. On a cold launch
|
The app also **enters offline mode on its own** when it cannot reach the network. On a cold launch
|
||||||
with no connection it switches to offline for that session; when the device is online but the gateway
|
with no connection it switches to offline for that session; when the device is online but the gateway
|
||||||
stays silent for a few seconds it asks first — *No connection. Switch to offline mode?*, with
|
stays silent for a few seconds it asks first — *No connection. Switch to offline mode?*, with
|
||||||
|
|||||||
+17
-2
@@ -274,8 +274,8 @@ e-mail) либо ввод фразы. Активные игры форфейтя
|
|||||||
Установленный веб-PWA со входом по подтверждённой почте может переключиться в осознанный
|
Установленный веб-PWA со входом по подтверждённой почте может переключиться в осознанный
|
||||||
**офлайн-режим** (Настройки → Режим игры). В офлайне приложение не обращается к сети: шапка синеет с
|
**офлайн-режим** (Настройки → Режим игры). В офлайне приложение не обращается к сети: шапка синеет с
|
||||||
меткой *Офлайн*, лобби показывает только сохранённые на устройстве игры, а сетевые поверхности
|
меткой *Офлайн*, лобби показывает только сохранённые на устройстве игры, а сетевые поверхности
|
||||||
отключены или скрыты (вкладка Статистика; варианты «с другом» и «случайный соперник» в Новой игре).
|
отключены или скрыты (вкладка Статистика; вариант «случайный соперник» в Новой игре).
|
||||||
Играть можно только в **vs_ai** — Новая игра создаёт локальную игру против робота, который ходит
|
Новая игра против робота создаёт локальную **vs_ai**-игру — он ходит
|
||||||
целиком в браузере без бэкенда. Локальные игры хранятся на устройстве, видны только в офлайн-режиме и
|
целиком в браузере без бэкенда. Локальные игры хранятся на устройстве, видны только в офлайн-режиме и
|
||||||
никогда не синхронизируются с аккаунтом. Чтобы игру можно было создать и сыграть без связи, приложение
|
никогда не синхронизируются с аккаунтом. Чтобы игру можно было создать и сыграть без связи, приложение
|
||||||
заранее, пока ещё онлайн, подгружает словари включённых игроком вариантов и (после установки)
|
заранее, пока ещё онлайн, подгружает словари включённых игроком вариантов и (после установки)
|
||||||
@@ -285,6 +285,21 @@ e-mail) либо ввод фразы. Активные игры форфейтя
|
|||||||
продолжается в фоне, так что следующее переключение мгновенно). Режим привязан к устройству и
|
продолжается в фоне, так что следующее переключение мгновенно). Режим привязан к устройству и
|
||||||
сохраняется между запусками.
|
сохраняется между запусками.
|
||||||
|
|
||||||
|
В офлайне «с друзьями» в Новой игре запускает **локальную игру по очереди (hotseat)** на 2–4 человек
|
||||||
|
за одним устройством. Сначала задаётся **пароль ведущего** — 4-значный PIN на клавиатуре в стиле
|
||||||
|
экрана блокировки; пока он не задан, строки игроков заблокированы. Затем приложение спрашивает,
|
||||||
|
играете ли вы сами — если да, вы занимаете первое место под именем из профиля. Вы называете каждого
|
||||||
|
игрока (от 2 до 4; строки можно добавлять и удалять, удаление спрашивает пароль ведущего) и можете
|
||||||
|
дать любому месту **свой необязательный PIN**. Во время игры доска видна всегда, но место с PIN
|
||||||
|
вместо стойки показывает кнопку **«Разблокировать»**, пока владелец не введёт PIN, — так устройство
|
||||||
|
передаётся из рук в руки, и только защищённое место прячет свои буквы; на каждом ходу замок
|
||||||
|
возвращается. **Ведущий** (кнопка ведущего в игре) может по паролю ведущего **пропустить** ход
|
||||||
|
текущего игрока, **исключить** игрока или **завершить игру досрочно** — досрочное завершение стирает
|
||||||
|
партию без победителей и проигравших. Подсказки и чат в игре по очереди отключены. Нормально
|
||||||
|
завершённая партия сохраняется в офлайн-лобби как любая другая; удаление любой игры по очереди —
|
||||||
|
идущей или завершённой — из лобби спрашивает пароль ведущего, чтобы никто не стёр партию сразу после
|
||||||
|
своего хода.
|
||||||
|
|
||||||
Приложение также **само включает офлайн-режим**, когда не может достучаться до сети. При холодном
|
Приложение также **само включает офлайн-режим**, когда не может достучаться до сети. При холодном
|
||||||
запуске без связи оно переходит в офлайн на текущую сессию; когда устройство онлайн, но шлюз молчит
|
запуске без связи оно переходит в офлайн на текущую сессию; когда устройство онлайн, но шлюз молчит
|
||||||
несколько секунд, оно сперва спрашивает — *Нет связи. Включить офлайн-режим?*, с выбором **Включить**
|
несколько секунд, оно сперва спрашивает — *Нет связи. Включить офлайн-режим?*, с выбором **Включить**
|
||||||
|
|||||||
@@ -0,0 +1,102 @@
|
|||||||
|
import { test, expect, type Page } from './fixtures';
|
||||||
|
|
||||||
|
// Offline pass-and-play (hotseat) is offered only in offline mode, which is gated to an installed
|
||||||
|
// standalone PWA with a confirmed email. The mock account has an email; force standalone so the
|
||||||
|
// Settings offline toggle shows.
|
||||||
|
async function forceStandalone(page: Page): Promise<void> {
|
||||||
|
await page.addInitScript(() => {
|
||||||
|
const orig = window.matchMedia.bind(window);
|
||||||
|
window.matchMedia = (q: string) =>
|
||||||
|
(q.includes('display-mode: standalone')
|
||||||
|
? { matches: true, media: q, onchange: null, addEventListener() {}, removeEventListener() {}, addListener() {}, removeListener() {}, dispatchEvent: () => false }
|
||||||
|
: orig(q)) as MediaQueryList;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function enterLobby(page: Page): Promise<void> {
|
||||||
|
await page.getByRole('button', { name: /guest|гост/i }).first().click();
|
||||||
|
await expect(page.locator('button.tab').nth(2)).toBeVisible();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function goOffline(page: Page): Promise<void> {
|
||||||
|
await page.locator('button.tab').nth(2).click(); // Settings
|
||||||
|
await page.getByRole('button', { name: /^(Offline|Оффлайн)$/ }).click();
|
||||||
|
await expect(page.locator('header.nav.offline')).toBeVisible({ timeout: 15000 });
|
||||||
|
await page.getByRole('button', { name: /Back|Назад/i }).click();
|
||||||
|
await expect(page.locator('button.tab').nth(2)).toBeVisible();
|
||||||
|
}
|
||||||
|
|
||||||
|
// typePin clicks the on-screen keypad digits (the pad has no OK button — the 4th digit is the action).
|
||||||
|
async function typePin(page: Page, digits: string): Promise<void> {
|
||||||
|
for (const d of digits) await page.locator('.pad .key', { hasText: d }).click();
|
||||||
|
}
|
||||||
|
|
||||||
|
test.describe('offline hotseat (pass-and-play)', () => {
|
||||||
|
test('create with a locked seat, unlock, host-skip, terminate from the lobby', async ({ page }) => {
|
||||||
|
await forceStandalone(page);
|
||||||
|
await page.goto('/');
|
||||||
|
await enterLobby(page);
|
||||||
|
await goOffline(page);
|
||||||
|
|
||||||
|
// A known bag seed so the locked seat deals a full rack deterministically.
|
||||||
|
await page.evaluate(() => (window as unknown as { __mock: { setLocalSeed(s: string): void } }).__mock.setLocalSeed('1'));
|
||||||
|
|
||||||
|
// New game -> the offline mode selector now offers "with friends" (hotseat).
|
||||||
|
await page.locator('button.tab').nth(0).click();
|
||||||
|
await page.getByRole('button', { name: /With friends|друзьями/i }).click();
|
||||||
|
|
||||||
|
// The player rows are disabled until the mandatory host (master) PIN is set.
|
||||||
|
await expect(page.locator('.pname').first()).toBeDisabled();
|
||||||
|
|
||||||
|
// Set the host PIN (enter + confirm), then decline taking a seat.
|
||||||
|
await page.locator('.hostpin .plink').click();
|
||||||
|
await typePin(page, '9999');
|
||||||
|
await typePin(page, '9999');
|
||||||
|
await page.getByRole('button', { name: /^(No|Нет)$/ }).click();
|
||||||
|
|
||||||
|
// Pick the English variant if the picker offers a choice.
|
||||||
|
const variant = page.locator('.fg select').first();
|
||||||
|
if (await variant.isEnabled()) await variant.selectOption('scrabble_en');
|
||||||
|
|
||||||
|
// Two players: Ann (PIN-locked) and Bob (open).
|
||||||
|
await page.locator('.pname').nth(0).fill('Ann');
|
||||||
|
await page.locator('.pname').nth(1).fill('Bob');
|
||||||
|
await page.locator('.prow').nth(0).locator('.plink').click(); // Ann's seat PIN
|
||||||
|
await typePin(page, '1234');
|
||||||
|
await typePin(page, '1234');
|
||||||
|
|
||||||
|
await page.locator('button.invite').click();
|
||||||
|
await expect(page.locator('[data-cell]').first()).toBeVisible();
|
||||||
|
|
||||||
|
// Ann is to move and PIN-locked: the board is visible but her rack is withheld behind Unlock.
|
||||||
|
await expect(page.locator('.unlock')).toBeVisible();
|
||||||
|
await expect(page.locator('.rack .tile')).toHaveCount(0);
|
||||||
|
|
||||||
|
// A wrong PIN keeps it locked; the right PIN reveals the full rack.
|
||||||
|
await page.locator('.unlock').click();
|
||||||
|
await typePin(page, '0000');
|
||||||
|
await expect(page.locator('.pad')).toBeVisible(); // still open after a wrong PIN
|
||||||
|
await typePin(page, '1234');
|
||||||
|
await expect(page.locator('.rack .tile')).toHaveCount(7);
|
||||||
|
|
||||||
|
// Host override: 🔐 -> master PIN -> skip the current turn -> confirm. The turn passes to Bob,
|
||||||
|
// whose seat is open, so his rack shows without a lock.
|
||||||
|
await page.locator('button.tab', { hasText: /Host|Ведущий/ }).click();
|
||||||
|
await typePin(page, '9999');
|
||||||
|
await page.getByRole('button', { name: /Skip|Пропустить/ }).click();
|
||||||
|
await page.getByRole('button', { name: /^(OK|ОК)$/ }).click();
|
||||||
|
await expect(page.locator('.unlock')).toHaveCount(0);
|
||||||
|
await expect(page.locator('.rack .tile')).toHaveCount(7);
|
||||||
|
|
||||||
|
// Back in the lobby the active hotseat game has a kebab; terminating it needs the master PIN.
|
||||||
|
await page.getByRole('button', { name: /Back|Назад/i }).click();
|
||||||
|
await expect(page.getByText('Ann', { exact: false }).first()).toBeVisible();
|
||||||
|
await expect(page.locator('.rowwrap')).toHaveCount(1);
|
||||||
|
await page.locator('.kebab').first().click();
|
||||||
|
const del = page.locator('.rowwrap.revealed .del');
|
||||||
|
await expect(del).toBeVisible();
|
||||||
|
await del.click();
|
||||||
|
await typePin(page, '9999');
|
||||||
|
await expect(page.locator('.rowwrap')).toHaveCount(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,265 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
// Apple-lock-screen-style 4-digit PIN pad for offline pass-and-play (hotseat) games.
|
||||||
|
// Modes:
|
||||||
|
// set — enter a PIN, then repeat it to confirm; emits { kind: 'set', lock }.
|
||||||
|
// verify — enter a PIN; runs `verify(pin)` on the 4th digit; emits { kind: 'verified' }
|
||||||
|
// or shakes + clears on a wrong PIN.
|
||||||
|
// change — run `verify` on the current PIN, then offer "set a new PIN" (the set flow)
|
||||||
|
// or, when allowRemove, "remove PIN" ({ kind: 'removed' }).
|
||||||
|
// Verification is delegated to the caller's `verify` callback: at creation time it checks a
|
||||||
|
// UI-held lock (lib/pin verifyPin); in-game it delegates to the local source (which holds the
|
||||||
|
// stored lock). The pad never shows an OK button: entering the 4th digit is the action. PIN
|
||||||
|
// storage is a social lock, not cryptography — see lib/pin.ts.
|
||||||
|
import Modal from './Modal.svelte';
|
||||||
|
import { t } from '../lib/i18n/index.svelte';
|
||||||
|
import { newLock, type PinLock } from '../lib/pin';
|
||||||
|
|
||||||
|
/** PinResult is the outcome handed to onresult when the pad completes. */
|
||||||
|
export type PinResult =
|
||||||
|
| { kind: 'set'; lock: PinLock }
|
||||||
|
| { kind: 'verified' }
|
||||||
|
| { kind: 'removed' };
|
||||||
|
|
||||||
|
let {
|
||||||
|
mode,
|
||||||
|
title = '',
|
||||||
|
verify,
|
||||||
|
allowRemove = false,
|
||||||
|
onclose,
|
||||||
|
onresult,
|
||||||
|
}: {
|
||||||
|
mode: 'set' | 'verify' | 'change';
|
||||||
|
title?: string;
|
||||||
|
/** Verifies an entered PIN (required for 'verify' and 'change'). */
|
||||||
|
verify?: (pin: string) => Promise<boolean>;
|
||||||
|
allowRemove?: boolean;
|
||||||
|
onclose?: () => void;
|
||||||
|
onresult: (r: PinResult) => void;
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
const LEN = 4;
|
||||||
|
|
||||||
|
// 'old' verifies the existing PIN (change); 'menu' offers set-new / remove (change);
|
||||||
|
// 'enter' collects a PIN; 'confirm' re-enters it (set / change→new). `mode` is fixed
|
||||||
|
// for the pad's lifetime (callers mount a fresh pad per operation), so capturing its
|
||||||
|
// initial value here is intentional.
|
||||||
|
// svelte-ignore state_referenced_locally
|
||||||
|
let phase = $state<'old' | 'menu' | 'enter' | 'confirm'>(mode === 'change' ? 'old' : 'enter');
|
||||||
|
let buffer = $state('');
|
||||||
|
let first = $state(''); // the first entry, awaiting confirmation
|
||||||
|
let error = $state(false); // drives the error prompt + shake
|
||||||
|
let shakeSeq = $state(0); // bumped on each error to replay the shake animation
|
||||||
|
let busy = $state(false); // guards the async check between the 4th digit and the outcome
|
||||||
|
|
||||||
|
function promptText(): string {
|
||||||
|
if (error) return phase === 'confirm' ? t('pin.mismatch') : t('pin.wrong');
|
||||||
|
switch (phase) {
|
||||||
|
case 'old':
|
||||||
|
return t('pin.enterCurrent');
|
||||||
|
case 'confirm':
|
||||||
|
return t('pin.repeat');
|
||||||
|
default:
|
||||||
|
return mode === 'verify' ? t('pin.enter') : t('pin.create');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fail(): void {
|
||||||
|
buffer = '';
|
||||||
|
error = true;
|
||||||
|
shakeSeq += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function commit(): Promise<void> {
|
||||||
|
busy = true;
|
||||||
|
try {
|
||||||
|
if (phase === 'old') {
|
||||||
|
if (verify && (await verify(buffer))) {
|
||||||
|
buffer = '';
|
||||||
|
error = false;
|
||||||
|
phase = 'menu';
|
||||||
|
} else fail();
|
||||||
|
} else if (phase === 'enter' && mode === 'verify') {
|
||||||
|
if (verify && (await verify(buffer))) onresult({ kind: 'verified' });
|
||||||
|
else fail();
|
||||||
|
} else if (phase === 'enter') {
|
||||||
|
first = buffer;
|
||||||
|
buffer = '';
|
||||||
|
error = false;
|
||||||
|
phase = 'confirm';
|
||||||
|
} else if (phase === 'confirm') {
|
||||||
|
if (buffer === first) onresult({ kind: 'set', lock: await newLock(buffer) });
|
||||||
|
else {
|
||||||
|
first = '';
|
||||||
|
phase = 'enter';
|
||||||
|
fail();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
busy = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function press(d: string): void {
|
||||||
|
if (busy || phase === 'menu' || buffer.length >= LEN) return;
|
||||||
|
error = false;
|
||||||
|
buffer += d;
|
||||||
|
if (buffer.length === LEN) void commit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function back(): void {
|
||||||
|
if (busy || phase === 'menu') return;
|
||||||
|
buffer = buffer.slice(0, -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function startNew(): void {
|
||||||
|
error = false;
|
||||||
|
first = '';
|
||||||
|
buffer = '';
|
||||||
|
phase = 'enter';
|
||||||
|
}
|
||||||
|
|
||||||
|
function onkey(e: KeyboardEvent): void {
|
||||||
|
if (e.key >= '0' && e.key <= '9') {
|
||||||
|
press(e.key);
|
||||||
|
e.preventDefault();
|
||||||
|
} else if (e.key === 'Backspace') {
|
||||||
|
back();
|
||||||
|
e.preventDefault();
|
||||||
|
} else if (e.key === 'Escape') {
|
||||||
|
onclose?.();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
||||||
|
const slots = Array.from({ length: LEN }, (_, i) => i);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window onkeydown={onkey} />
|
||||||
|
|
||||||
|
<Modal {title} {onclose} overlayKeyboard>
|
||||||
|
<div class="pad">
|
||||||
|
{#if phase === 'menu'}
|
||||||
|
<div class="menu">
|
||||||
|
<button class="opt" onclick={startNew}>{t('pin.setNew')}</button>
|
||||||
|
{#if allowRemove}
|
||||||
|
<button class="opt danger" onclick={() => onresult({ kind: 'removed' })}>
|
||||||
|
{t('pin.remove')}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p class="prompt" class:err={error}>{promptText()}</p>
|
||||||
|
{#key shakeSeq}
|
||||||
|
<div class="dots" class:shake={error} aria-hidden="true">
|
||||||
|
{#each slots as i}
|
||||||
|
<span class="dot" class:on={i < buffer.length}></span>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/key}
|
||||||
|
<div class="grid">
|
||||||
|
{#each keys as k}
|
||||||
|
<button class="key" onclick={() => press(k)} aria-label={k}>{k}</button>
|
||||||
|
{/each}
|
||||||
|
<span class="key spacer"></span>
|
||||||
|
<button class="key" onclick={() => press('0')} aria-label="0">0</button>
|
||||||
|
<button class="key back" onclick={back} aria-label="⌫" disabled={buffer.length === 0}>⌫</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.pad {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
.prompt {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--muted, var(--text));
|
||||||
|
min-height: 1.2em;
|
||||||
|
}
|
||||||
|
.prompt.err {
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
.dots {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.dot {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1.5px solid var(--text);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.dot.on {
|
||||||
|
background: var(--text);
|
||||||
|
}
|
||||||
|
.shake {
|
||||||
|
animation: shake 0.32s ease;
|
||||||
|
}
|
||||||
|
@keyframes shake {
|
||||||
|
0%, 100% { transform: translateX(0); }
|
||||||
|
20% { transform: translateX(-7px); }
|
||||||
|
40% { transform: translateX(7px); }
|
||||||
|
60% { transform: translateX(-5px); }
|
||||||
|
80% { transform: translateX(5px); }
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.key {
|
||||||
|
width: 62px;
|
||||||
|
height: 62px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.key:active {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--accent-text);
|
||||||
|
}
|
||||||
|
.key.back {
|
||||||
|
border-color: transparent;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.key.back:disabled {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
.key.spacer {
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.opt {
|
||||||
|
padding: 14px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--text);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.opt.danger {
|
||||||
|
border-color: var(--danger);
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+248
-18
@@ -4,6 +4,7 @@
|
|||||||
import TabBar from '../components/TabBar.svelte';
|
import TabBar from '../components/TabBar.svelte';
|
||||||
import TapConfirm from '../components/TapConfirm.svelte';
|
import TapConfirm from '../components/TapConfirm.svelte';
|
||||||
import Modal from '../components/Modal.svelte';
|
import Modal from '../components/Modal.svelte';
|
||||||
|
import PinPad from '../components/PinPad.svelte';
|
||||||
import DictWarmup from '../components/DictWarmup.svelte';
|
import DictWarmup from '../components/DictWarmup.svelte';
|
||||||
import Board from './Board.svelte';
|
import Board from './Board.svelte';
|
||||||
import Rack from './Rack.svelte';
|
import Rack from './Rack.svelte';
|
||||||
@@ -163,6 +164,11 @@
|
|||||||
const playable = $derived(!!view && (view.game.status === 'active' || view.game.status === 'open'));
|
const playable = $derived(!!view && (view.game.status === 'active' || view.game.status === 'open'));
|
||||||
const isMyTurn = $derived(!!view && playable && view.game.toMove === view.seat);
|
const isMyTurn = $derived(!!view && playable && view.game.toMove === view.seat);
|
||||||
const gameOver = $derived(!!view && view.game.status === 'finished');
|
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
|
// 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
|
// 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).
|
// hint was spent in another game (see lib/hints).
|
||||||
@@ -774,8 +780,8 @@
|
|||||||
// rapid placements do not pile up requests on a slow link.
|
// rapid placements do not pile up requests on a slow link.
|
||||||
evalCtrl?.abort();
|
evalCtrl?.abort();
|
||||||
evalCtrl = null;
|
evalCtrl = null;
|
||||||
// Off-turn the composition is position-only: no score preview or evaluate.
|
// Off-turn (or a locked hotseat seat) the composition is position-only: no score preview.
|
||||||
if (!isMyTurn) return;
|
if (!canMove) return;
|
||||||
const sub = toSubmit(placement);
|
const sub = toSubmit(placement);
|
||||||
if (!sub) return;
|
if (!sub) return;
|
||||||
// Instant on-device preview when the game's dictionary is warm; the network otherwise.
|
// Instant on-device preview when the game's dictionary is warm; the network otherwise.
|
||||||
@@ -833,12 +839,106 @@
|
|||||||
refreshRecent();
|
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() {
|
async function commit() {
|
||||||
const sub = toSubmit(placement);
|
const sub = toSubmit(placement);
|
||||||
if (!sub) return;
|
if (!sub) return;
|
||||||
busy = true;
|
busy = true;
|
||||||
try {
|
try {
|
||||||
applyMoveResult(await source.submitPlay(id, sub.tiles, variant));
|
applyMoveResult(await source.submitPlay(id, sub.tiles, variant));
|
||||||
|
if (view?.game.hotseat) await advanceHotseat();
|
||||||
haptic('success');
|
haptic('success');
|
||||||
zoomed = false;
|
zoomed = false;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -858,6 +958,7 @@
|
|||||||
busy = true;
|
busy = true;
|
||||||
try {
|
try {
|
||||||
applyMoveResult(await source.pass(id));
|
applyMoveResult(await source.pass(id));
|
||||||
|
if (view?.game.hotseat) await advanceHotseat();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
handleError(e);
|
handleError(e);
|
||||||
} finally {
|
} finally {
|
||||||
@@ -979,6 +1080,7 @@
|
|||||||
busy = true;
|
busy = true;
|
||||||
try {
|
try {
|
||||||
applyMoveResult(await source.exchange(id, tiles, variant));
|
applyMoveResult(await source.exchange(id, tiles, variant));
|
||||||
|
if (view?.game.hotseat) await advanceHotseat();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
handleError(e);
|
handleError(e);
|
||||||
} finally {
|
} finally {
|
||||||
@@ -1433,13 +1535,17 @@
|
|||||||
{:else}
|
{:else}
|
||||||
<button class="hicon" onclick={onExportClick} aria-label={t('game.exportGcg')}>📤</button>
|
<button class="hicon" onclick={onExportClick} aria-label={t('game.exportGcg')}>📤</button>
|
||||||
{/if}
|
{/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}
|
{:else}
|
||||||
<button class="hicon" onclick={onResignClick} disabled={waitingForOpponent} aria-label={t('game.dropGame')}>🏁</button>
|
<button class="hicon" onclick={onResignClick} disabled={waitingForOpponent} aria-label={t('game.dropGame')}>🏁</button>
|
||||||
{/if}
|
{/if}
|
||||||
{#if !view.game.multipleWordsPerTurn}<span class="oneword-label">{t('game.oneWordRule')}</span>{/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
|
<!-- 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). -->
|
game), so the entry is dropped; an active AI game keeps it (it opens the dictionary).
|
||||||
{#if !(gameOver && view.game.vsAi)}
|
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')}>
|
<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}
|
{#key chatBlink}<span class="chat-ico" class:blink={chatBlink > 0 && !app.reduceMotion}>💬</span>{/key}
|
||||||
</button>
|
</button>
|
||||||
@@ -1512,7 +1618,7 @@
|
|||||||
{#if gameOver}
|
{#if gameOver}
|
||||||
<strong class="over">{resultText()}</strong>
|
<strong class="over">{resultText()}</strong>
|
||||||
{:else if placement.pending.length === 0}
|
{: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}
|
{/if}
|
||||||
<span class="scores">
|
<span class="scores">
|
||||||
{#if recallOverRack}{:else if preview}{preview.legal ? t('game.previewWords', { words: preview.words.join(', '), n: preview.score }) : t('game.previewIllegal')}{/if}
|
{#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. -->
|
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-row" class:inert={gameOver} data-coach="game-rack">
|
||||||
<div class="rack-wrap">
|
<div class="rack-wrap">
|
||||||
<Rack
|
{#if locked}
|
||||||
slots={rackSlots}
|
<!-- A PIN-locked hotseat seat: the rack is withheld until its owner unlocks it. The board
|
||||||
{variant}
|
above stays visible; only this tray is gated. -->
|
||||||
{selected}
|
<button class="unlock" onclick={() => (unlockOpen = true)}>🔒 {t('hotseat.unlock')}</button>
|
||||||
{landscape}
|
{:else}
|
||||||
shuffling={shuffling && !app.reduceMotion}
|
<Rack
|
||||||
draggingId={reorderDragId}
|
slots={rackSlots}
|
||||||
dropIndex={reorderTo}
|
{variant}
|
||||||
ondown={onRackDown}
|
{selected}
|
||||||
/>
|
{landscape}
|
||||||
|
shuffling={shuffling && !app.reduceMotion}
|
||||||
|
draggingId={reorderDragId}
|
||||||
|
dropIndex={reorderTo}
|
||||||
|
ondown={onRackDown}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if !gameOver && placement.pending.length > 0 && !recallOverRack}
|
{#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}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
{#snippet controlButtons()}
|
{#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>
|
<span class="sq" data-coach="game-turn">🔄</span><span class="lbl">{t('game.draw')}</span>
|
||||||
</button>
|
</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
|
<!-- 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
|
idle gate while it is closed; tapping then only explains when it opens (doHint), and the lock
|
||||||
lifts live at the unlock moment. -->
|
lifts live at the unlock moment. -->
|
||||||
@@ -1623,6 +1741,55 @@
|
|||||||
</Modal>
|
</Modal>
|
||||||
{/if}
|
{/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}
|
{#if exportOpen}
|
||||||
<Modal title={t('game.exportGcg')} onclose={() => (exportOpen = false)}>
|
<Modal title={t('game.exportGcg')} onclose={() => (exportOpen = false)}>
|
||||||
<div class="export-opts">
|
<div class="export-opts">
|
||||||
@@ -2122,4 +2289,67 @@
|
|||||||
font-size: 0.62rem;
|
font-size: 0.62rem;
|
||||||
line-height: 1;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -41,6 +41,11 @@ export const localSource = {
|
|||||||
create: (opts) => load().then((s) => s.create(opts)),
|
create: (opts) => load().then((s) => s.create(opts)),
|
||||||
list: () => load().then((s) => s.list()),
|
list: () => load().then((s) => s.list()),
|
||||||
delete: (id) => load().then((s) => s.delete(id)),
|
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
|
// 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.
|
// the real subscription once the engine loads and, until then, cancels a pending subscribe.
|
||||||
events: (id, onEvent) => {
|
events: (id, onEvent) => {
|
||||||
@@ -54,7 +59,8 @@ export const localSource = {
|
|||||||
unsub();
|
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
|
* gameSource returns the source that runs the game with the given id: the local engine for a local
|
||||||
|
|||||||
@@ -389,6 +389,35 @@ export const en = {
|
|||||||
'error.game_active': 'Available only after the game is finished.',
|
'error.game_active': 'Available only after the game is finished.',
|
||||||
'error.invalid_profile': 'Some profile fields are invalid.',
|
'error.invalid_profile': 'Some profile fields are invalid.',
|
||||||
'error.already_confirmed': 'This email is already confirmed.',
|
'error.already_confirmed': 'This email is already confirmed.',
|
||||||
|
|
||||||
|
'pin.enter': 'Enter PIN',
|
||||||
|
'pin.create': 'Create a PIN',
|
||||||
|
'pin.repeat': 'Repeat the PIN',
|
||||||
|
'pin.enterCurrent': 'Enter current PIN',
|
||||||
|
'pin.mismatch': "PINs don't match",
|
||||||
|
'pin.wrong': 'Wrong PIN',
|
||||||
|
'pin.setNew': 'Set a new PIN',
|
||||||
|
'pin.remove': 'Remove PIN',
|
||||||
|
|
||||||
|
'hotseat.hostPin': 'Host password',
|
||||||
|
'hotseat.setPin': 'Password',
|
||||||
|
'hotseat.changePin': 'Change',
|
||||||
|
'hotseat.playerName': 'Player name',
|
||||||
|
'hotseat.addPlayer': 'Add player',
|
||||||
|
'hotseat.removePlayer': 'Remove player',
|
||||||
|
'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;
|
} as const;
|
||||||
|
|
||||||
export type MessageKey = keyof typeof en;
|
export type MessageKey = keyof typeof en;
|
||||||
|
|||||||
@@ -389,4 +389,33 @@ export const ru: Record<MessageKey, string> = {
|
|||||||
'error.game_active': 'Доступно только после завершения игры.',
|
'error.game_active': 'Доступно только после завершения игры.',
|
||||||
'error.invalid_profile': 'Некоторые поля профиля некорректны.',
|
'error.invalid_profile': 'Некоторые поля профиля некорректны.',
|
||||||
'error.already_confirmed': 'Эта почта уже подтверждена.',
|
'error.already_confirmed': 'Эта почта уже подтверждена.',
|
||||||
|
|
||||||
|
'pin.enter': 'Введите PIN',
|
||||||
|
'pin.create': 'Придумайте PIN',
|
||||||
|
'pin.repeat': 'Повторите PIN',
|
||||||
|
'pin.enterCurrent': 'Введите текущий PIN',
|
||||||
|
'pin.mismatch': 'PIN не совпадает',
|
||||||
|
'pin.wrong': 'Неверный PIN',
|
||||||
|
'pin.setNew': 'Задать новый PIN',
|
||||||
|
'pin.remove': 'Удалить пароль',
|
||||||
|
|
||||||
|
'hotseat.hostPin': 'Пароль ведущего',
|
||||||
|
'hotseat.setPin': 'Пароль',
|
||||||
|
'hotseat.changePin': 'Изменить',
|
||||||
|
'hotseat.playerName': 'Имя игрока',
|
||||||
|
'hotseat.addPlayer': 'Добавить игрока',
|
||||||
|
'hotseat.removePlayer': 'Удалить игрока',
|
||||||
|
'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': 'Отменить партию без результата?',
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -83,4 +83,20 @@ describe('local game serialize + replay', () => {
|
|||||||
expect(rec.journal.length).toBe(g.moveCount);
|
expect(rec.journal.length).toBe(g.moveCount);
|
||||||
expect(replayGame(rec, dawg).seed).toBe(9999999999n);
|
expect(replayGame(rec, dawg).seed).toBe(9999999999n);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('serialises hotseat metadata: the mode, master PIN and per-seat PINs', async () => {
|
||||||
|
const { newLock } = await import('../pin');
|
||||||
|
const hostPin = await newLock('9999');
|
||||||
|
const seatPin = await newLock('1234');
|
||||||
|
const hotseatSeats: Seat[] = [
|
||||||
|
{ kind: 'human', name: 'Ann', pin: seatPin },
|
||||||
|
{ kind: 'human', name: 'Bob' },
|
||||||
|
];
|
||||||
|
const g = makeGame(5n);
|
||||||
|
const rec = serializeGame(g, { id: 'h1', seats: hotseatSeats, hotseat: true, hostPin, createdAtUnix: 1, updatedAtUnix: 2, hintUnlockAtMs: 0 });
|
||||||
|
expect(rec.hotseat).toBe(true);
|
||||||
|
expect(rec.hostPin).toEqual(hostPin);
|
||||||
|
expect(rec.seats[0].pin).toEqual(seatPin);
|
||||||
|
expect(rec.seats[1].pin).toBeUndefined();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
import { LocalGame, type LocalMove, type DropoutTiles, type LocalGameOptions } from './engine';
|
import { LocalGame, type LocalMove, type DropoutTiles, type LocalGameOptions } from './engine';
|
||||||
import type { Dawg } from '../dict/dawg';
|
import type { Dawg } from '../dict/dawg';
|
||||||
import type { Variant } from '../model';
|
import type { Variant } from '../model';
|
||||||
|
import type { PinLock } from '../pin';
|
||||||
|
|
||||||
/** Seat describes one player of a local game (forward-compatible with a 2-4 hotseat). */
|
/** Seat describes one player of a local game (forward-compatible with a 2-4 hotseat). */
|
||||||
export interface Seat {
|
export interface Seat {
|
||||||
@@ -20,6 +21,9 @@ export interface Seat {
|
|||||||
/** The player's real account id for a human seat, so the client identifies "you" and the correct
|
/** The player's real account id for a human seat, so the client identifies "you" and the correct
|
||||||
* turn exactly as in an online game; absent for the robot (a synthetic id is derived). */
|
* turn exactly as in an online game; absent for the robot (a synthetic id is derived). */
|
||||||
accountId?: string;
|
accountId?: string;
|
||||||
|
/** Offline hotseat only: the seat's optional PIN lock. When set, the seat's rack stays hidden
|
||||||
|
* until the PIN is entered (a social lock for a shared device — see lib/pin). */
|
||||||
|
pin?: PinLock;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** LocalGameRecord is the durable form of one local game — everything needed to reconstruct it. */
|
/** LocalGameRecord is the durable form of one local game — everything needed to reconstruct it. */
|
||||||
@@ -36,6 +40,12 @@ export interface LocalGameRecord {
|
|||||||
/** The dictionary-independent, alphabet-index-space move journal. */
|
/** The dictionary-independent, alphabet-index-space move journal. */
|
||||||
journal: LocalMove[];
|
journal: LocalMove[];
|
||||||
status: 'active' | 'finished';
|
status: 'active' | 'finished';
|
||||||
|
/** Offline pass-and-play (hotseat): 2-4 humans share one device. Absent on vs_ai records (and on
|
||||||
|
* older records predating the feature), which the source reads as false. */
|
||||||
|
hotseat?: boolean;
|
||||||
|
/** Offline hotseat only: the mandatory master (host/referee) PIN lock, needed to skip/resign a
|
||||||
|
* seat, exclude a player or terminate the game (see lib/pin). Absent on vs_ai records. */
|
||||||
|
hostPin?: PinLock;
|
||||||
createdAtUnix: number;
|
createdAtUnix: number;
|
||||||
updatedAtUnix: number;
|
updatedAtUnix: number;
|
||||||
/** Wall-clock ms at which the vs_ai idle hint unlocks (the robot's last move + the window), or 0
|
/** Wall-clock ms at which the vs_ai idle hint unlocks (the robot's last move + the window), or 0
|
||||||
@@ -49,6 +59,8 @@ export interface LocalGameRecord {
|
|||||||
export interface RecordMeta {
|
export interface RecordMeta {
|
||||||
id: string;
|
id: string;
|
||||||
seats: Seat[];
|
seats: Seat[];
|
||||||
|
hotseat?: boolean;
|
||||||
|
hostPin?: PinLock;
|
||||||
createdAtUnix: number;
|
createdAtUnix: number;
|
||||||
updatedAtUnix: number;
|
updatedAtUnix: number;
|
||||||
hintUnlockAtMs: number;
|
hintUnlockAtMs: number;
|
||||||
@@ -71,6 +83,8 @@ export function serializeGame(game: LocalGame, meta: RecordMeta): LocalGameRecor
|
|||||||
seats: meta.seats,
|
seats: meta.seats,
|
||||||
journal: game.history,
|
journal: game.history,
|
||||||
status: game.isOver ? 'finished' : 'active',
|
status: game.isOver ? 'finished' : 'active',
|
||||||
|
hotseat: meta.hotseat,
|
||||||
|
hostPin: meta.hostPin,
|
||||||
createdAtUnix: meta.createdAtUnix,
|
createdAtUnix: meta.createdAtUnix,
|
||||||
updatedAtUnix: meta.updatedAtUnix,
|
updatedAtUnix: meta.updatedAtUnix,
|
||||||
hintUnlockAtMs: meta.hintUnlockAtMs,
|
hintUnlockAtMs: meta.hintUnlockAtMs,
|
||||||
|
|||||||
@@ -0,0 +1,132 @@
|
|||||||
|
import { describe, it, expect, vi } from 'vitest';
|
||||||
|
import type { StateView } from '../model';
|
||||||
|
|
||||||
|
// getDawg is mocked to the committed sample dictionary (the store's IndexedDB is absent under node,
|
||||||
|
// so games live in the source's in-memory cache — created once, then driven without reload).
|
||||||
|
vi.mock('../dict', () => ({
|
||||||
|
getDawg: async () => {
|
||||||
|
const { Dawg } = await import('../dict/dawg');
|
||||||
|
const { readFileSync } = await import('node:fs');
|
||||||
|
return new Dawg(new Uint8Array(readFileSync(new URL('../dict/testdata/sample_en.dawg', import.meta.url))));
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { LocalSource } from './source';
|
||||||
|
import type { Seat } from './serialize';
|
||||||
|
import { newLock } from '../pin';
|
||||||
|
|
||||||
|
async function hotseat(id: string, seats: Seat[], hostDigits = '9999'): Promise<LocalSource> {
|
||||||
|
const src = new LocalSource();
|
||||||
|
await src.create({
|
||||||
|
id,
|
||||||
|
variant: 'scrabble_en',
|
||||||
|
dictVersion: 'sample',
|
||||||
|
seed: 3n,
|
||||||
|
multipleWords: true,
|
||||||
|
seats,
|
||||||
|
hotseat: true,
|
||||||
|
hostPin: await newLock(hostDigits),
|
||||||
|
});
|
||||||
|
return src;
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('LocalSource hotseat', () => {
|
||||||
|
it('creates a pass-and-play game: not vs_ai, board visible, first seat to move', async () => {
|
||||||
|
const src = await hotseat('local:h1', [
|
||||||
|
{ kind: 'human', name: 'Ann' },
|
||||||
|
{ kind: 'human', name: 'Bob' },
|
||||||
|
]);
|
||||||
|
const st = await src.gameState('local:h1');
|
||||||
|
expect(st.game.vsAi).toBe(false);
|
||||||
|
expect(st.game.hotseat).toBe(true);
|
||||||
|
expect(st.game.toMove).toBe(0);
|
||||||
|
expect(st.locked).toBeFalsy(); // seat 0 has no PIN
|
||||||
|
expect(st.rack.length).toBe(7);
|
||||||
|
expect(st.game.seats.map((s) => s.displayName)).toEqual(['Ann', 'Bob']);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('hides the rack of a PIN-locked seat until the right PIN unlocks it', async () => {
|
||||||
|
const src = await hotseat('local:h2', [
|
||||||
|
{ kind: 'human', name: 'Ann', pin: await newLock('1234') },
|
||||||
|
{ kind: 'human', name: 'Bob' },
|
||||||
|
]);
|
||||||
|
const st = await src.gameState('local:h2');
|
||||||
|
expect(st.locked).toBe(true);
|
||||||
|
expect(st.rack).toEqual([]);
|
||||||
|
|
||||||
|
await expect(src.unlockSeat('local:h2', '0000')).rejects.toMatchObject({ code: 'wrong_pin' });
|
||||||
|
|
||||||
|
const opened = await src.unlockSeat('local:h2', '1234');
|
||||||
|
expect(opened.locked).toBe(false);
|
||||||
|
expect(opened.rack.length).toBe(7);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('re-locks the seat when the turn advances and again when it comes back', async () => {
|
||||||
|
const src = await hotseat('local:h3', [
|
||||||
|
{ kind: 'human', name: 'A', pin: await newLock('1111') },
|
||||||
|
{ kind: 'human', name: 'B' },
|
||||||
|
{ kind: 'human', name: 'C' },
|
||||||
|
]);
|
||||||
|
await src.unlockSeat('local:h3', '1111');
|
||||||
|
await src.pass('local:h3'); // seat 0 -> 1
|
||||||
|
let st = await src.gameState('local:h3');
|
||||||
|
expect(st.game.toMove).toBe(1);
|
||||||
|
expect(st.locked).toBeFalsy(); // seat 1 has no PIN
|
||||||
|
|
||||||
|
await src.pass('local:h3'); // 1 -> 2
|
||||||
|
await src.pass('local:h3'); // 2 -> 0
|
||||||
|
st = await src.gameState('local:h3');
|
||||||
|
expect(st.game.toMove).toBe(0);
|
||||||
|
expect(st.locked).toBe(true); // seat 0 needs re-unlocking
|
||||||
|
});
|
||||||
|
|
||||||
|
it('lets the host skip the current turn, gated by the master PIN', async () => {
|
||||||
|
const src = await hotseat('local:h4', [
|
||||||
|
{ kind: 'human', name: 'A' },
|
||||||
|
{ kind: 'human', name: 'B' },
|
||||||
|
], '4321');
|
||||||
|
expect((await src.gameState('local:h4')).game.toMove).toBe(0);
|
||||||
|
await expect(src.hostAction('local:h4', '0000', 'skip')).rejects.toMatchObject({ code: 'wrong_pin' });
|
||||||
|
const st = await src.hostAction('local:h4', '4321', 'skip');
|
||||||
|
expect(st).not.toBeNull();
|
||||||
|
expect((st as StateView).game.toMove).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('lets the host resign a seat (ending a two-player game)', async () => {
|
||||||
|
const src = await hotseat('local:h5', [
|
||||||
|
{ kind: 'human', name: 'A' },
|
||||||
|
{ kind: 'human', name: 'B' },
|
||||||
|
], '4321');
|
||||||
|
const st = await src.hostAction('local:h5', '4321', 'resign', 1);
|
||||||
|
expect((st as StateView).game.status).toBe('finished');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('lets the host terminate the game, deleting it', async () => {
|
||||||
|
const src = await hotseat('local:h6', [
|
||||||
|
{ kind: 'human', name: 'A' },
|
||||||
|
{ kind: 'human', name: 'B' },
|
||||||
|
], '4321');
|
||||||
|
const r = await src.hostAction('local:h6', '4321', 'terminate');
|
||||||
|
expect(r).toBeNull();
|
||||||
|
await expect(src.gameState('local:h6')).rejects.toMatchObject({ code: 'game_not_found' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('verifies the master PIN', async () => {
|
||||||
|
const src = await hotseat('local:h7', [
|
||||||
|
{ kind: 'human', name: 'A' },
|
||||||
|
{ kind: 'human', name: 'B' },
|
||||||
|
], '4321');
|
||||||
|
expect(await src.verifyHostPin('local:h7', '4321')).toBe(true);
|
||||||
|
expect(await src.verifyHostPin('local:h7', '0000')).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('persists a naturally finished game (scoreless run) as finished', async () => {
|
||||||
|
const src = await hotseat('local:h8', [
|
||||||
|
{ kind: 'human', name: 'A' },
|
||||||
|
{ kind: 'human', name: 'B' },
|
||||||
|
]);
|
||||||
|
for (let i = 0; i < 6; i++) await src.pass('local:h8');
|
||||||
|
const st = await src.gameState('local:h8');
|
||||||
|
expect(st.game.status).toBe('finished');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -17,6 +17,7 @@ import { setAlphabet, hasAlphabet } from '../alphabet';
|
|||||||
import { HINT_GATE_MS } from '../hints';
|
import { HINT_GATE_MS } from '../hints';
|
||||||
import { LOCAL_ID_PREFIX, isLocalGameId } from './id';
|
import { LOCAL_ID_PREFIX, isLocalGameId } from './id';
|
||||||
import { decide } from '../robot/strategy';
|
import { decide } from '../robot/strategy';
|
||||||
|
import { verifyPin, type PinLock } from '../pin';
|
||||||
import { GatewayError, type PlacedTile } from '../client';
|
import { GatewayError, type PlacedTile } from '../client';
|
||||||
import type {
|
import type {
|
||||||
EvalResult,
|
EvalResult,
|
||||||
@@ -87,6 +88,9 @@ function encodePlacements(variant: Variant, tiles: PlacedTile[]): { row: number;
|
|||||||
interface Live {
|
interface Live {
|
||||||
game: LocalGame;
|
game: LocalGame;
|
||||||
record: LocalGameRecord;
|
record: LocalGameRecord;
|
||||||
|
/** Offline hotseat only: which seat is currently unlocked (its PIN was entered this turn), or null.
|
||||||
|
* Ephemeral — never persisted; cleared on every turn advance so each turn re-locks. */
|
||||||
|
unlockedSeat: number | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -97,7 +101,8 @@ export class LocalSource implements GameLoopSource {
|
|||||||
private readonly live = new Map<string, Live>();
|
private readonly live = new Map<string, Live>();
|
||||||
private readonly listeners = new Map<string, Set<(e: PushEvent) => void>>();
|
private readonly listeners = new Map<string, Set<(e: PushEvent) => void>>();
|
||||||
|
|
||||||
/** create starts a new local vs_ai game, persists it and returns its state. */
|
/** create starts a new local game — a vs_ai game or an offline pass-and-play (hotseat) game when
|
||||||
|
* hotseat is set — persists it and returns its state. hostPin is the hotseat master PIN. */
|
||||||
async create(opts: {
|
async create(opts: {
|
||||||
id: string;
|
id: string;
|
||||||
variant: Variant;
|
variant: Variant;
|
||||||
@@ -105,6 +110,8 @@ export class LocalSource implements GameLoopSource {
|
|||||||
seed: bigint;
|
seed: bigint;
|
||||||
multipleWords: boolean;
|
multipleWords: boolean;
|
||||||
seats: LocalSeat[];
|
seats: LocalSeat[];
|
||||||
|
hotseat?: boolean;
|
||||||
|
hostPin?: PinLock;
|
||||||
}): Promise<StateView> {
|
}): Promise<StateView> {
|
||||||
const dawg = await getDawg(opts.variant, opts.dictVersion);
|
const dawg = await getDawg(opts.variant, opts.dictVersion);
|
||||||
if (!dawg) throw new GatewayError('dict_unavailable');
|
if (!dawg) throw new GatewayError('dict_unavailable');
|
||||||
@@ -119,12 +126,14 @@ export class LocalSource implements GameLoopSource {
|
|||||||
const now = nowUnix();
|
const now = nowUnix();
|
||||||
const record = serializeGame(game, {
|
const record = serializeGame(game, {
|
||||||
id: opts.id,
|
id: opts.id,
|
||||||
seats: opts.seats.map((s) => ({ kind: s.kind, name: s.name, accountId: s.accountId })),
|
seats: opts.seats.map((s) => ({ kind: s.kind, name: s.name, accountId: s.accountId, pin: s.pin })),
|
||||||
|
hotseat: opts.hotseat,
|
||||||
|
hostPin: opts.hostPin,
|
||||||
createdAtUnix: now,
|
createdAtUnix: now,
|
||||||
updatedAtUnix: now,
|
updatedAtUnix: now,
|
||||||
hintUnlockAtMs: 0, // no robot move yet: a human-first opening's hint is open at once
|
hintUnlockAtMs: 0, // no robot move yet: a human-first opening's hint is open at once
|
||||||
});
|
});
|
||||||
const entry: Live = { game, record };
|
const entry: Live = { game, record, unlockedSeat: null };
|
||||||
this.live.set(opts.id, entry);
|
this.live.set(opts.id, entry);
|
||||||
await saveLocalGame(record);
|
await saveLocalGame(record);
|
||||||
return this.stateView(entry);
|
return this.stateView(entry);
|
||||||
@@ -185,10 +194,59 @@ export class LocalSource implements GameLoopSource {
|
|||||||
const entry = await this.load(gameId);
|
const entry = await this.load(gameId);
|
||||||
const seat = entry.game.currentPlayer;
|
const seat = entry.game.currentPlayer;
|
||||||
const move = entry.game.resign();
|
const move = entry.game.resign();
|
||||||
|
entry.unlockedSeat = null;
|
||||||
await this.persist(entry);
|
await this.persist(entry);
|
||||||
return this.moveResult(entry, move, seat);
|
return this.moveResult(entry, move, seat);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* unlockSeat reveals the current hotseat seat's rack once its PIN is entered. It verifies pin
|
||||||
|
* against the seat's stored lock (a seat with no lock unlocks with any pin) and, on success, marks
|
||||||
|
* the seat unlocked for this turn only — a subsequent move re-locks it. Throws 'wrong_pin' on a
|
||||||
|
* mismatch. Returns the freshly unlocked state (rack revealed).
|
||||||
|
*/
|
||||||
|
async unlockSeat(gameId: string, pin: string): Promise<StateView> {
|
||||||
|
const entry = await this.load(gameId);
|
||||||
|
const seat = entry.game.currentPlayer;
|
||||||
|
const lock = entry.record.seats[seat]?.pin;
|
||||||
|
if (lock && !(await verifyPin(pin, lock))) throw new GatewayError('wrong_pin');
|
||||||
|
entry.unlockedSeat = seat;
|
||||||
|
return this.stateView(entry);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** verifyHostPin reports whether pin matches the hotseat master (host/referee) PIN. */
|
||||||
|
async verifyHostPin(gameId: string, pin: string): Promise<boolean> {
|
||||||
|
const entry = await this.load(gameId);
|
||||||
|
return !!entry.record.hostPin && (await verifyPin(pin, entry.record.hostPin));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* hostAction runs a host (referee) override on a hotseat game, gated by the master PIN:
|
||||||
|
* 'skip' — pass the current seat's turn;
|
||||||
|
* 'resign' — resign seat targetSeat (exclude a player / concede on their behalf);
|
||||||
|
* 'terminate' — end the game with no result and delete it from the store.
|
||||||
|
* Returns the updated StateView, or null when the game was terminated. Throws 'wrong_pin' on a bad
|
||||||
|
* PIN.
|
||||||
|
*/
|
||||||
|
async hostAction(
|
||||||
|
gameId: string,
|
||||||
|
pin: string,
|
||||||
|
action: 'skip' | 'resign' | 'terminate',
|
||||||
|
targetSeat?: number,
|
||||||
|
): Promise<StateView | null> {
|
||||||
|
const entry = await this.load(gameId);
|
||||||
|
if (!entry.record.hostPin || !(await verifyPin(pin, entry.record.hostPin))) throw new GatewayError('wrong_pin');
|
||||||
|
if (action === 'terminate') {
|
||||||
|
await this.delete(gameId);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (action === 'skip') entry.game.pass();
|
||||||
|
else entry.game.resignSeat(targetSeat ?? entry.game.currentPlayer);
|
||||||
|
entry.unlockedSeat = null;
|
||||||
|
await this.persist(entry);
|
||||||
|
return this.stateView(entry);
|
||||||
|
}
|
||||||
|
|
||||||
async hint(gameId: string): Promise<HintResult> {
|
async hint(gameId: string): Promise<HintResult> {
|
||||||
// The idle gate is enforced client-side with a monotonic clock (see Game.svelte / lib/hints):
|
// The idle gate is enforced client-side with a monotonic clock (see Game.svelte / lib/hints):
|
||||||
// a wall-clock timestamp here could be defeated by changing the device clock. This just serves
|
// a wall-clock timestamp here could be defeated by changing the device clock. This just serves
|
||||||
@@ -246,7 +304,7 @@ export class LocalSource implements GameLoopSource {
|
|||||||
if (!record) throw new GatewayError('game_not_found');
|
if (!record) throw new GatewayError('game_not_found');
|
||||||
const dawg = await getDawg(record.variant, record.dictVersion);
|
const dawg = await getDawg(record.variant, record.dictVersion);
|
||||||
if (!dawg) throw new GatewayError('dict_unavailable');
|
if (!dawg) throw new GatewayError('dict_unavailable');
|
||||||
const entry: Live = { game: replayGame(record, dawg), record };
|
const entry: Live = { game: replayGame(record, dawg), record, unlockedSeat: null };
|
||||||
this.live.set(gameId, entry);
|
this.live.set(gameId, entry);
|
||||||
return entry;
|
return entry;
|
||||||
}
|
}
|
||||||
@@ -258,6 +316,7 @@ export class LocalSource implements GameLoopSource {
|
|||||||
const entry = await this.load(gameId);
|
const entry = await this.load(gameId);
|
||||||
const seat = entry.game.currentPlayer;
|
const seat = entry.game.currentPlayer;
|
||||||
const move = act(entry.game);
|
const move = act(entry.game);
|
||||||
|
entry.unlockedSeat = null; // the turn has advanced; a hotseat seat re-locks (no effect for vs_ai)
|
||||||
const robotMoves = this.runRobots(entry);
|
const robotMoves = this.runRobots(entry);
|
||||||
await this.persist(entry);
|
await this.persist(entry);
|
||||||
const result = this.moveResult(entry, move, seat);
|
const result = this.moveResult(entry, move, seat);
|
||||||
@@ -306,6 +365,8 @@ export class LocalSource implements GameLoopSource {
|
|||||||
entry.record = serializeGame(entry.game, {
|
entry.record = serializeGame(entry.game, {
|
||||||
id: entry.record.id,
|
id: entry.record.id,
|
||||||
seats: entry.record.seats,
|
seats: entry.record.seats,
|
||||||
|
hotseat: entry.record.hotseat,
|
||||||
|
hostPin: entry.record.hostPin,
|
||||||
createdAtUnix: entry.record.createdAtUnix,
|
createdAtUnix: entry.record.createdAtUnix,
|
||||||
updatedAtUnix: nowUnix(),
|
updatedAtUnix: nowUnix(),
|
||||||
hintUnlockAtMs: entry.record.hintUnlockAtMs,
|
hintUnlockAtMs: entry.record.hintUnlockAtMs,
|
||||||
@@ -351,9 +412,14 @@ export class LocalSource implements GameLoopSource {
|
|||||||
return leftMs > 0 ? Math.ceil(leftMs / 1000) : 0;
|
return leftMs > 0 ? Math.ceil(leftMs / 1000) : 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// stateView is the seated player's private view. For a vs_ai game that is the single human seat; for
|
||||||
|
// a hotseat game it is the seat to move — and when that seat carries a PIN, the rack is withheld
|
||||||
|
// (empty, locked=true) until unlockSeat is called this turn.
|
||||||
private stateView(entry: Live): StateView {
|
private stateView(entry: Live): StateView {
|
||||||
const seat = this.humanSeat(entry);
|
const hotseat = !!entry.record.hotseat;
|
||||||
const rack = entry.game.handOf(seat).map((t) => indexToLetter(entry.record.variant, t));
|
const seat = hotseat ? entry.game.currentPlayer : this.humanSeat(entry);
|
||||||
|
const locked = hotseat && !!entry.record.seats[seat]?.pin && entry.unlockedSeat !== seat;
|
||||||
|
const rack = locked ? [] : entry.game.handOf(seat).map((t) => indexToLetter(entry.record.variant, t));
|
||||||
return {
|
return {
|
||||||
game: this.gameView(entry),
|
game: this.gameView(entry),
|
||||||
seat,
|
seat,
|
||||||
@@ -362,6 +428,7 @@ export class LocalSource implements GameLoopSource {
|
|||||||
hintsRemaining: 1,
|
hintsRemaining: 1,
|
||||||
walletBalance: 0,
|
walletBalance: 0,
|
||||||
hintUnlockLeftSeconds: this.hintUnlockLeft(entry),
|
hintUnlockLeftSeconds: this.hintUnlockLeft(entry),
|
||||||
|
locked,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -401,7 +468,8 @@ export class LocalSource implements GameLoopSource {
|
|||||||
moveCount: game.moveCount,
|
moveCount: game.moveCount,
|
||||||
endReason: game.isOver ? game.endReason : '',
|
endReason: game.isOver ? game.endReason : '',
|
||||||
lastActivityUnix: record.updatedAtUnix,
|
lastActivityUnix: record.updatedAtUnix,
|
||||||
vsAi: true,
|
vsAi: !record.hotseat,
|
||||||
|
hotseat: !!record.hotseat,
|
||||||
unreadChat: false,
|
unreadChat: false,
|
||||||
unreadMessages: false,
|
unreadMessages: false,
|
||||||
seats,
|
seats,
|
||||||
|
|||||||
@@ -47,6 +47,10 @@ export interface GameView {
|
|||||||
lastActivityUnix: number;
|
lastActivityUnix: number;
|
||||||
/** true = an honest-AI game: the opponent is shown as 🤖 and chat/nudge/add-friend are disabled. */
|
/** true = an honest-AI game: the opponent is shown as 🤖 and chat/nudge/add-friend are disabled. */
|
||||||
vsAi: boolean;
|
vsAi: boolean;
|
||||||
|
/** true = a local offline pass-and-play (hotseat) game: 2-4 humans share one device. Set only by
|
||||||
|
* the local source; the online gateway never sets it. Drives the per-seat PIN-lock UI and the host
|
||||||
|
* menu (which replaces the hint control). A hotseat game is never vsAi. */
|
||||||
|
hotseat?: boolean;
|
||||||
/** Per-viewer flag: the requesting player has at least one unread chat entry (message or
|
/** Per-viewer flag: the requesting player has at least one unread chat entry (message or
|
||||||
* nudge) in this game. Set on the authoritative REST views (lobby list, game state,
|
* nudge) in this game. Set on the authoritative REST views (lobby list, game state,
|
||||||
* move result); the live-event GameView leaves it false (events bump unread instead). */
|
* move result); the live-event GameView leaves it false (events bump unread instead). */
|
||||||
@@ -87,6 +91,9 @@ export interface StateView {
|
|||||||
* non-vs_ai game). The client anchors a MONOTONIC countdown (performance.now()) to it on receipt,
|
* non-vs_ai game). The client anchors a MONOTONIC countdown (performance.now()) to it on receipt,
|
||||||
* so a client clock change cannot skew it; a relaunch re-fetches a fresh value. See lib/hints. */
|
* so a client clock change cannot skew it; a relaunch re-fetches a fresh value. See lib/hints. */
|
||||||
hintUnlockLeftSeconds?: number;
|
hintUnlockLeftSeconds?: number;
|
||||||
|
/** Offline hotseat only: the seat to move is PIN-locked, so its rack is withheld (empty) until the
|
||||||
|
* seat's PIN is entered (see LocalSource.unlockSeat). Absent/false everywhere else. */
|
||||||
|
locked?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface MoveResult {
|
export interface MoveResult {
|
||||||
|
|||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import { describe, expect, it } from 'vitest';
|
||||||
|
import { hashPin, newLock, newSalt, verifyPin } from './pin';
|
||||||
|
|
||||||
|
describe('hashPin', () => {
|
||||||
|
it('is deterministic for the same pin and salt', async () => {
|
||||||
|
const salt = 'fixedsalt';
|
||||||
|
expect(await hashPin('1234', salt)).toBe(await hashPin('1234', salt));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('differs when the salt differs', async () => {
|
||||||
|
expect(await hashPin('1234', 'saltA')).not.toBe(await hashPin('1234', 'saltB'));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('differs when the pin differs', async () => {
|
||||||
|
const salt = 'fixedsalt';
|
||||||
|
expect(await hashPin('1234', salt)).not.toBe(await hashPin('4321', salt));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('newSalt', () => {
|
||||||
|
it('returns a non-empty value', () => {
|
||||||
|
expect(newSalt().length).toBeGreaterThan(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns a fresh value each call', () => {
|
||||||
|
expect(newSalt()).not.toBe(newSalt());
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('newLock / verifyPin', () => {
|
||||||
|
it('produces a lock that verifies its own pin', async () => {
|
||||||
|
const lock = await newLock('1234');
|
||||||
|
expect(lock.hash.length).toBeGreaterThan(0);
|
||||||
|
expect(lock.salt.length).toBeGreaterThan(0);
|
||||||
|
expect(await verifyPin('1234', lock)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('rejects a wrong pin', async () => {
|
||||||
|
const lock = await newLock('1234');
|
||||||
|
expect(await verifyPin('0000', lock)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('salts each lock independently (same pin, different hashes)', async () => {
|
||||||
|
const a = await newLock('1234');
|
||||||
|
const b = await newLock('1234');
|
||||||
|
expect(a.salt).not.toBe(b.salt);
|
||||||
|
expect(a.hash).not.toBe(b.hash);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
// Seat / host PIN locks for offline pass-and-play (hotseat) games.
|
||||||
|
//
|
||||||
|
// A PinLock is a salted SHA-256 digest of a 4-digit PIN. This is a SOCIAL lock for a
|
||||||
|
// shared device — not cryptographic protection. A 4-digit PIN has only 10^4
|
||||||
|
// combinations and the whole game runs on the client, so a determined peek reads the
|
||||||
|
// racks straight from memory regardless. The salt only keeps the PIN itself out of a
|
||||||
|
// casual devtools glance and defeats precomputed tables; it does not make the PIN
|
||||||
|
// brute-force resistant.
|
||||||
|
|
||||||
|
/** PinLock is a stored, salted SHA-256 digest of a PIN (see the file header caveat). */
|
||||||
|
export interface PinLock {
|
||||||
|
hash: string;
|
||||||
|
salt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// b64url encodes bytes as base64url without padding (matches the idiom in vkid.ts).
|
||||||
|
function b64url(bytes: Uint8Array): string {
|
||||||
|
let s = '';
|
||||||
|
for (const b of bytes) s += String.fromCharCode(b);
|
||||||
|
return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** newSalt returns a fresh random base64url salt for a PinLock. */
|
||||||
|
export function newSalt(): string {
|
||||||
|
const a = new Uint8Array(16);
|
||||||
|
crypto.getRandomValues(a);
|
||||||
|
return b64url(a);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** hashPin returns the base64url SHA-256 digest binding salt to pin. */
|
||||||
|
export async function hashPin(pin: string, salt: string): Promise<string> {
|
||||||
|
const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(`${salt}:${pin}`));
|
||||||
|
return b64url(new Uint8Array(digest));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** newLock builds a PinLock for pin with a fresh salt. */
|
||||||
|
export async function newLock(pin: string): Promise<PinLock> {
|
||||||
|
const salt = newSalt();
|
||||||
|
return { salt, hash: await hashPin(pin, salt) };
|
||||||
|
}
|
||||||
|
|
||||||
|
/** verifyPin reports whether pin matches the digest stored in lock. */
|
||||||
|
export async function verifyPin(pin: string, lock: PinLock): Promise<boolean> {
|
||||||
|
return (await hashPin(pin, lock.salt)) === lock.hash;
|
||||||
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { describe, expect, it } from 'vitest';
|
||||||
|
import { buildSeats, commitName, rosterReady, type RosterRow } from './roster';
|
||||||
|
|
||||||
|
describe('commitName (keep-last-valid)', () => {
|
||||||
|
it('commits a valid, trimmed name', () => {
|
||||||
|
expect(commitName('Ann', '')).toBe('Ann');
|
||||||
|
expect(commitName(' Ann ', '')).toBe('Ann');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('keeps the previous valid name when the input goes invalid', () => {
|
||||||
|
expect(commitName('', 'Ann')).toBe('Ann');
|
||||||
|
expect(commitName(' ', 'Ann')).toBe('Ann');
|
||||||
|
expect(commitName('a'.repeat(33), 'Ann')).toBe('Ann'); // over the 32-rune cap
|
||||||
|
expect(commitName('_bad', 'Ann')).toBe('Ann'); // leading separator
|
||||||
|
});
|
||||||
|
|
||||||
|
it('replaces the committed name with a newer valid one', () => {
|
||||||
|
expect(commitName('Bob', 'Ann')).toBe('Bob');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('rosterReady', () => {
|
||||||
|
const row = (committed: string): RosterRow => ({ name: committed, committed });
|
||||||
|
|
||||||
|
it('needs 2-4 rows, each with a committed name', () => {
|
||||||
|
expect(rosterReady([row('A'), row('B')])).toBe(true);
|
||||||
|
expect(rosterReady([row('A'), row('B'), row('C'), row('D')])).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('rejects fewer than 2, more than 4, or an empty row', () => {
|
||||||
|
expect(rosterReady([row('A')])).toBe(false);
|
||||||
|
expect(rosterReady([row('A'), row('B'), row('C'), row('D'), row('E')])).toBe(false);
|
||||||
|
expect(rosterReady([row('A'), row('')])).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('buildSeats', () => {
|
||||||
|
it('maps committed rows to account-less human seats, carrying the PIN', () => {
|
||||||
|
const lock = { hash: 'h', salt: 's' };
|
||||||
|
const seats = buildSeats([
|
||||||
|
{ name: 'Ann', committed: 'Ann', pin: lock },
|
||||||
|
{ name: 'x', committed: 'Bob' },
|
||||||
|
]);
|
||||||
|
expect(seats).toEqual([
|
||||||
|
{ kind: 'human', name: 'Ann', pin: lock },
|
||||||
|
{ kind: 'human', name: 'Bob', pin: undefined },
|
||||||
|
]);
|
||||||
|
expect(seats.every((s) => !('accountId' in s) || s.accountId === undefined)).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
// Pure helpers for the offline hotseat (pass-and-play) creation roster: keeping a last-valid name as
|
||||||
|
// a row is edited, and turning the finished roster into engine seats. Kept out of the component so it
|
||||||
|
// is unit-testable; the form itself is exercised by the e2e layer.
|
||||||
|
|
||||||
|
import { validDisplayName } from './profileValidation';
|
||||||
|
import type { PinLock } from './pin';
|
||||||
|
import type { Seat } from './localgame/serialize';
|
||||||
|
|
||||||
|
/** RosterRow is one editable player row: the live input, the last valid name kept when the input
|
||||||
|
* goes invalid, and the optional per-seat PIN lock. */
|
||||||
|
export interface RosterRow {
|
||||||
|
name: string;
|
||||||
|
committed: string;
|
||||||
|
pin?: PinLock;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** commitName returns the new last-valid name: the trimmed input when it is a valid display name,
|
||||||
|
* otherwise prevCommitted unchanged — so editing a set name into an invalid one keeps the old one. */
|
||||||
|
export function commitName(input: string, prevCommitted: string): string {
|
||||||
|
return validDisplayName(input) ? input.trim() : prevCommitted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** rosterReady reports whether the roster can start a game: 2-4 rows, each with a committed name. */
|
||||||
|
export function rosterReady(rows: RosterRow[]): boolean {
|
||||||
|
return rows.length >= 2 && rows.length <= 4 && rows.every((r) => r.committed !== '');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** buildSeats turns committed roster rows into engine seats — all human, account-less (local
|
||||||
|
* players sharing a device), carrying each row's optional PIN. */
|
||||||
|
export function buildSeats(rows: RosterRow[]): Seat[] {
|
||||||
|
return rows.map((r): Seat => ({ kind: 'human', name: r.committed, pin: r.pin }));
|
||||||
|
}
|
||||||
@@ -4,6 +4,7 @@
|
|||||||
import Screen from '../components/Screen.svelte';
|
import Screen from '../components/Screen.svelte';
|
||||||
import TabBar from '../components/TabBar.svelte';
|
import TabBar from '../components/TabBar.svelte';
|
||||||
import Modal from '../components/Modal.svelte';
|
import Modal from '../components/Modal.svelte';
|
||||||
|
import PinPad from '../components/PinPad.svelte';
|
||||||
import { app, handleError, refreshFeedbackBadge, seedChatUnread } from '../lib/app.svelte';
|
import { app, handleError, refreshFeedbackBadge, seedChatUnread } from '../lib/app.svelte';
|
||||||
import { connection } from '../lib/connection.svelte';
|
import { connection } from '../lib/connection.svelte';
|
||||||
import { gateway } from '../lib/gateway';
|
import { gateway } from '../lib/gateway';
|
||||||
@@ -186,6 +187,9 @@
|
|||||||
// revealed by swiping the row left (touch) or tapping its kebab (any pointer); the action is
|
// revealed by swiping the row left (touch) or tapping its kebab (any pointer); the action is
|
||||||
// per-account and irreversible. Only one row is revealed at a time.
|
// per-account and irreversible. Only one row is revealed at a time.
|
||||||
let revealedId = $state<string | null>(null);
|
let revealedId = $state<string | null>(null);
|
||||||
|
// A hotseat game's deletion is gated by the host (master) PIN — both active (terminate the game)
|
||||||
|
// and finished; pinTarget holds the game id while its PIN pad is open.
|
||||||
|
let pinTarget = $state<string | null>(null);
|
||||||
let drag: { id: string; x0: number; y0: number } | null = null;
|
let drag: { id: string; x0: number; y0: number } | null = null;
|
||||||
// A horizontal swipe must not also count as a tap that opens the game; armed on swipe,
|
// A horizontal swipe must not also count as a tap that opens the game; armed on swipe,
|
||||||
// consumed by the next tap, and reset on the next pointerdown so a later tap is never eaten.
|
// consumed by the next tap, and reset on the next pointerdown so a later tap is never eaten.
|
||||||
@@ -196,13 +200,14 @@
|
|||||||
if (e.pointerType === 'mouse') return; // desktop reveals via the kebab, not a swipe
|
if (e.pointerType === 'mouse') return; // desktop reveals via the kebab, not a swipe
|
||||||
drag = { id, x0: e.clientX, y0: e.clientY };
|
drag = { id, x0: e.clientX, y0: e.clientY };
|
||||||
}
|
}
|
||||||
function onRowUp(e: PointerEvent, finished: boolean): void {
|
function onRowUp(e: PointerEvent, revealable: boolean): void {
|
||||||
if (!drag) return;
|
if (!drag) return;
|
||||||
const dx = e.clientX - drag.x0;
|
const dx = e.clientX - drag.x0;
|
||||||
const dy = e.clientY - drag.y0;
|
const dy = e.clientY - drag.y0;
|
||||||
// Only a finished row reveals on a horizontal swipe; that swipe then suppresses the tap so it
|
// Only a revealable row (a finished game, or any hotseat game) reveals its delete on a horizontal
|
||||||
// does not also open the game. Active rows ignore swipes and stay plain tap-to-open.
|
// swipe; that swipe then suppresses the tap so it does not also open the game. Other active rows
|
||||||
if (finished && Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy) * 1.4) {
|
// ignore swipes and stay plain tap-to-open.
|
||||||
|
if (revealable && Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy) * 1.4) {
|
||||||
swiped = true;
|
swiped = true;
|
||||||
revealedId = dx < 0 ? drag.id : null;
|
revealedId = dx < 0 ? drag.id : null;
|
||||||
}
|
}
|
||||||
@@ -240,6 +245,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// startDelete routes the row's delete: a hotseat game (active or finished) is gated behind the host
|
||||||
|
// master PIN (so the last mover cannot instantly wipe the game); any other finished game deletes at
|
||||||
|
// once.
|
||||||
|
function startDelete(g: GameView): void {
|
||||||
|
if (g.hotseat) pinTarget = g.id;
|
||||||
|
else void hide(g.id);
|
||||||
|
}
|
||||||
|
|
||||||
async function acceptInvite(inv: Invitation) {
|
async function acceptInvite(inv: Invitation) {
|
||||||
try {
|
try {
|
||||||
const r = await gateway.invitationAccept(inv.id);
|
const r = await gateway.invitationAccept(inv.id);
|
||||||
@@ -315,15 +328,15 @@
|
|||||||
<div class="list">
|
<div class="list">
|
||||||
{#each group.list as g (g.id)}
|
{#each group.list as g (g.id)}
|
||||||
{@const badge = badgeKind(app.chatUnread[g.id] ?? false, app.messageUnread[g.id] ?? false)}
|
{@const badge = badgeKind(app.chatUnread[g.id] ?? false, app.messageUnread[g.id] ?? false)}
|
||||||
<div class="rowwrap" class:revealed={group.finished && revealedId === g.id}>
|
<div class="rowwrap" class:revealed={(group.finished || g.hotseat) && revealedId === g.id}>
|
||||||
{#if group.finished}
|
{#if group.finished || g.hotseat}
|
||||||
<button class="del" onclick={() => hide(g.id)} disabled={!connection.online} aria-label={t('lobby.hideGame')}>❌</button>
|
<button class="del" onclick={() => startDelete(g)} disabled={!isLocalGameId(g.id) && !connection.online} aria-label={t('lobby.hideGame')}>❌</button>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<button
|
<button
|
||||||
class="open"
|
class="open"
|
||||||
onpointerdown={(e) => onRowDown(e, g.id)}
|
onpointerdown={(e) => onRowDown(e, g.id)}
|
||||||
onpointerup={(e) => onRowUp(e, group.finished)}
|
onpointerup={(e) => onRowUp(e, group.finished || !!g.hotseat)}
|
||||||
onclick={() => openGame(g)}
|
onclick={() => openGame(g)}
|
||||||
>
|
>
|
||||||
<span class="info">
|
<span class="info">
|
||||||
@@ -345,7 +358,7 @@
|
|||||||
<span class="emoji" class:blink={blinkingIds.has(g.id)}>{resultBadge(g, myId).emoji}</span>
|
<span class="emoji" class:blink={blinkingIds.has(g.id)}>{resultBadge(g, myId).emoji}</span>
|
||||||
{/key}
|
{/key}
|
||||||
</button>
|
</button>
|
||||||
{#if group.finished}
|
{#if group.finished || g.hotseat}
|
||||||
<button class="kebab" onclick={() => toggleReveal(g.id)} aria-label={t('lobby.hideGame')}>⋮</button>
|
<button class="kebab" onclick={() => toggleReveal(g.id)} aria-label={t('lobby.hideGame')}>⋮</button>
|
||||||
{:else}
|
{:else}
|
||||||
<!-- A visual duplicate of the row's tap target: opens the game on tap, but kept out
|
<!-- A visual duplicate of the row's tap target: opens the game on tap, but kept out
|
||||||
@@ -378,6 +391,21 @@
|
|||||||
</Modal>
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<!-- Deleting a hotseat game (active or finished) is gated by the host master PIN. -->
|
||||||
|
{#if pinTarget}
|
||||||
|
<PinPad
|
||||||
|
mode="verify"
|
||||||
|
title={t('hotseat.hostPin')}
|
||||||
|
verify={(p) => localSource.verifyHostPin(pinTarget ?? '', p)}
|
||||||
|
onclose={() => (pinTarget = null)}
|
||||||
|
onresult={() => {
|
||||||
|
const id = pinTarget;
|
||||||
|
pinTarget = null;
|
||||||
|
if (id) void hide(id);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
{#snippet tabbar()}
|
{#snippet tabbar()}
|
||||||
<TabBar>
|
<TabBar>
|
||||||
<button class="tab" disabled={atGameLimit} onclick={() => navigate('/new')}>
|
<button class="tab" disabled={atGameLimit} onclick={() => navigate('/new')}>
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import Screen from '../components/Screen.svelte';
|
import Screen from '../components/Screen.svelte';
|
||||||
|
import Modal from '../components/Modal.svelte';
|
||||||
|
import PinPad, { type PinResult } from '../components/PinPad.svelte';
|
||||||
import { gateway } from '../lib/gateway';
|
import { gateway } from '../lib/gateway';
|
||||||
import { app, handleError, showToast } from '../lib/app.svelte';
|
import { app, handleError, showToast } from '../lib/app.svelte';
|
||||||
import { connection } from '../lib/connection.svelte';
|
import { connection } from '../lib/connection.svelte';
|
||||||
@@ -9,6 +11,9 @@
|
|||||||
import { newLocalGameId, randomSeed } from '../lib/localgame/id';
|
import { newLocalGameId, randomSeed } from '../lib/localgame/id';
|
||||||
import { navigate } from '../lib/router.svelte';
|
import { navigate } from '../lib/router.svelte';
|
||||||
import { t, type MessageKey } from '../lib/i18n/index.svelte';
|
import { t, type MessageKey } from '../lib/i18n/index.svelte';
|
||||||
|
import { validDisplayName } from '../lib/profileValidation';
|
||||||
|
import { verifyPin, type PinLock } from '../lib/pin';
|
||||||
|
import { commitName, rosterReady, buildSeats, type RosterRow } from '../lib/roster';
|
||||||
import type { AccountRef, Variant } from '../lib/model';
|
import type { AccountRef, Variant } from '../lib/model';
|
||||||
import {
|
import {
|
||||||
availableVariants,
|
availableVariants,
|
||||||
@@ -144,13 +149,115 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- offline hotseat (pass-and-play) ---
|
||||||
|
// A device-local 2-4 human game. The host (referee) sets a mandatory master PIN first — it gates
|
||||||
|
// the roster and, in-game, the host overrides; each player row optionally locks its seat with a PIN.
|
||||||
|
let hostPin = $state<PinLock | undefined>(undefined);
|
||||||
|
let rows = $state<RosterRow[]>([
|
||||||
|
{ name: '', committed: '' },
|
||||||
|
{ name: '', committed: '' },
|
||||||
|
]);
|
||||||
|
let askHostPlays = $state(false); // the "do you take a seat?" prompt shown once the host PIN is set
|
||||||
|
|
||||||
|
// The PIN-pad overlay target: what a completed PIN applies to.
|
||||||
|
type PadTarget =
|
||||||
|
| { kind: 'host-set' }
|
||||||
|
| { kind: 'host-change' }
|
||||||
|
| { kind: 'seat-set'; index: number }
|
||||||
|
| { kind: 'seat-change'; index: number }
|
||||||
|
| { kind: 'row-delete'; index: number };
|
||||||
|
let pad = $state<PadTarget | null>(null);
|
||||||
|
|
||||||
|
const padMode = (p: PadTarget): 'set' | 'verify' | 'change' =>
|
||||||
|
p.kind === 'host-set' || p.kind === 'seat-set' ? 'set' : p.kind === 'row-delete' ? 'verify' : 'change';
|
||||||
|
function padVerify(p: PadTarget): ((pin: string) => Promise<boolean>) | undefined {
|
||||||
|
if (p.kind === 'host-change' || p.kind === 'row-delete') return (pin) => verifyPin(pin, hostPin!);
|
||||||
|
if (p.kind === 'seat-change') return (pin) => verifyPin(pin, rows[p.index].pin!);
|
||||||
|
return undefined; // set flows need no verifier
|
||||||
|
}
|
||||||
|
const padTitle = (p: PadTarget): string =>
|
||||||
|
p.kind === 'host-set' || p.kind === 'host-change' || p.kind === 'row-delete'
|
||||||
|
? t('hotseat.hostPin')
|
||||||
|
: t('hotseat.setPin');
|
||||||
|
|
||||||
|
function onPad(r: PinResult): void {
|
||||||
|
const target = pad;
|
||||||
|
pad = null;
|
||||||
|
if (!target) return;
|
||||||
|
switch (target.kind) {
|
||||||
|
case 'host-set':
|
||||||
|
if (r.kind === 'set') {
|
||||||
|
hostPin = r.lock;
|
||||||
|
askHostPlays = true;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'host-change':
|
||||||
|
if (r.kind === 'set') hostPin = r.lock; // the host PIN is mandatory — no remove option
|
||||||
|
break;
|
||||||
|
case 'seat-set':
|
||||||
|
if (r.kind === 'set') rows[target.index].pin = r.lock;
|
||||||
|
break;
|
||||||
|
case 'seat-change':
|
||||||
|
if (r.kind === 'set') rows[target.index].pin = r.lock;
|
||||||
|
else if (r.kind === 'removed') rows[target.index].pin = undefined;
|
||||||
|
break;
|
||||||
|
case 'row-delete':
|
||||||
|
if (r.kind === 'verified') rows = rows.filter((_, j) => j !== target.index);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setHostPlays(yes: boolean): void {
|
||||||
|
askHostPlays = false;
|
||||||
|
if (!yes) return;
|
||||||
|
// Seat the host at row 0, its name reused from the profile (a normal seat — its optional seat PIN
|
||||||
|
// is separate from the master PIN).
|
||||||
|
const committed = commitName(app.profile?.displayName ?? '', '');
|
||||||
|
rows[0] = { name: committed, committed };
|
||||||
|
}
|
||||||
|
|
||||||
|
function openSeatPin(i: number): void {
|
||||||
|
pad = rows[i].pin ? { kind: 'seat-change', index: i } : { kind: 'seat-set', index: i };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function startHotseat(): Promise<void> {
|
||||||
|
if (starting || !hostPin || !inviteVariant || !rosterReady(rows)) return;
|
||||||
|
starting = true;
|
||||||
|
try {
|
||||||
|
const version = app.profile?.dictVersions?.[inviteVariant];
|
||||||
|
if (!version) {
|
||||||
|
handleError(new Error('dict_unavailable'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const id = newLocalGameId();
|
||||||
|
// Snapshot the roster + PINs to plain objects: the rows/pins are $state proxies, and a proxy
|
||||||
|
// fails structured-clone when the record is persisted to IndexedDB (silently, since the store
|
||||||
|
// is best-effort) — so the game would vanish on reload. See lib/localgame/store.
|
||||||
|
await localSource.create({
|
||||||
|
id,
|
||||||
|
variant: inviteVariant,
|
||||||
|
dictVersion: version,
|
||||||
|
seed: randomSeed(),
|
||||||
|
multipleWords: multipleWordsForRequest(inviteVariant, multipleWords),
|
||||||
|
seats: $state.snapshot(buildSeats(rows)),
|
||||||
|
hotseat: true,
|
||||||
|
hostPin: hostPin ? $state.snapshot(hostPin) : undefined,
|
||||||
|
});
|
||||||
|
navigate(`/game/${id}`);
|
||||||
|
} catch (e) {
|
||||||
|
handleError(e);
|
||||||
|
} finally {
|
||||||
|
starting = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Screen title={t('new.title')} back="/">
|
<Screen title={t('new.title')} back="/">
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<!-- Offline mode offers only a local vs_ai game: the friends flow needs the network, so the
|
<!-- The auto/friends selector. Online it is hidden for guests (no friends to invite). Offline
|
||||||
auto/friends selector is hidden and the auto (vs_ai) flow shows on its own. -->
|
it is always shown: "quick" is the local vs_ai flow, "with friends" is the local
|
||||||
{#if !guest && !offlineMode.active}
|
pass-and-play (hotseat) flow. -->
|
||||||
|
{#if !guest || offlineMode.active}
|
||||||
<div class="seg modes">
|
<div class="seg modes">
|
||||||
<button class="opt" class:active={mode === 'auto'} onclick={() => (mode = 'auto')}>{t('new.auto')}</button>
|
<button class="opt" class:active={mode === 'auto'} onclick={() => (mode = 'auto')}>{t('new.auto')}</button>
|
||||||
<button class="opt" class:active={mode === 'friends'} onclick={() => (mode = 'friends')}>{t('new.withFriends')}</button>
|
<button class="opt" class:active={mode === 'friends'} onclick={() => (mode = 'friends')}>{t('new.withFriends')}</button>
|
||||||
@@ -198,6 +305,68 @@
|
|||||||
disabled={!selectedAuto || (!connection.online && !offlineMode.active) || starting}
|
disabled={!selectedAuto || (!connection.online && !offlineMode.active) || starting}
|
||||||
onclick={() => selectedAuto && find(selectedAuto)}
|
onclick={() => selectedAuto && find(selectedAuto)}
|
||||||
>{t('new.start')}</button>
|
>{t('new.start')}</button>
|
||||||
|
{:else if offlineMode.active}
|
||||||
|
<!-- Offline pass-and-play (hotseat): a device-local 2-4 human game. The host sets a master
|
||||||
|
PIN first (it gates the roster); each seat may add its own PIN. -->
|
||||||
|
<div class="fg">
|
||||||
|
<div class="hostpin">
|
||||||
|
<span class="ftitle">{t('hotseat.hostPin')}</span>
|
||||||
|
<button class="plink" onclick={() => (pad = hostPin ? { kind: 'host-change' } : { kind: 'host-set' })}>
|
||||||
|
{hostPin ? t('hotseat.changePin') : t('hotseat.setPin')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<label class="field">
|
||||||
|
<span>{t('new.gameType')}</span>
|
||||||
|
<select bind:value={inviteVariant} class:placeholder={!inviteVariant} disabled={variants.length === 1}>
|
||||||
|
<option value="" disabled>—</option>
|
||||||
|
{#each variants as v (v.id)}<option value={v.id}>{t(v.label)}</option>{/each}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
{#if inviteVariant && supportsMultipleWordsToggle(inviteVariant)}
|
||||||
|
<label class="toggle">
|
||||||
|
<span>{t('new.multipleWordsPerTurn')}</span>
|
||||||
|
<input type="checkbox" bind:checked={multipleWords} />
|
||||||
|
</label>
|
||||||
|
{/if}
|
||||||
|
<div class="roster">
|
||||||
|
{#each rows as row, i (i)}
|
||||||
|
<div class="prow">
|
||||||
|
<input
|
||||||
|
class="pname"
|
||||||
|
class:invalid={row.name.trim() !== '' && !validDisplayName(row.name)}
|
||||||
|
bind:value={row.name}
|
||||||
|
disabled={!hostPin}
|
||||||
|
placeholder={t('hotseat.playerName')}
|
||||||
|
maxlength="40"
|
||||||
|
oninput={() => (row.committed = commitName(row.name, row.committed))}
|
||||||
|
onblur={() => (row.name = row.committed)}
|
||||||
|
/>
|
||||||
|
<button class="plink" disabled={!hostPin || row.committed === ''} onclick={() => openSeatPin(i)}>
|
||||||
|
{row.pin ? t('hotseat.changePin') : t('hotseat.setPin')}
|
||||||
|
</button>
|
||||||
|
{#if rows.length > 2}
|
||||||
|
<button
|
||||||
|
class="pkebab"
|
||||||
|
disabled={!hostPin}
|
||||||
|
aria-label={t('hotseat.removePlayer')}
|
||||||
|
onclick={() => (pad = { kind: 'row-delete', index: i })}
|
||||||
|
>⋮</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{#if rows.length < 4}
|
||||||
|
<button class="addrow" disabled={!hostPin} onclick={() => (rows = [...rows, { name: '', committed: '' }])}>
|
||||||
|
+ {t('hotseat.addPlayer')}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
<div class="grow"></div>
|
||||||
|
<button
|
||||||
|
class="invite"
|
||||||
|
disabled={!hostPin || !inviteVariant || !rosterReady(rows) || starting}
|
||||||
|
onclick={startHotseat}
|
||||||
|
>{t('new.start')}</button>
|
||||||
|
</div>
|
||||||
{:else if friends.length === 0}
|
{:else if friends.length === 0}
|
||||||
<p class="subtitle">{t('new.noFriends')}</p>
|
<p class="subtitle">{t('new.noFriends')}</p>
|
||||||
{:else}
|
{:else}
|
||||||
@@ -245,6 +414,25 @@
|
|||||||
<button class="invite" disabled={selected.length === 0 || !inviteVariant || !connection.online} onclick={sendInvite}>{t('new.invite')}</button>
|
<button class="invite" disabled={selected.length === 0 || !inviteVariant || !connection.online} onclick={sendInvite}>{t('new.invite')}</button>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
{#if pad}
|
||||||
|
<PinPad
|
||||||
|
mode={padMode(pad)}
|
||||||
|
title={padTitle(pad)}
|
||||||
|
verify={padVerify(pad)}
|
||||||
|
allowRemove={pad.kind === 'seat-change'}
|
||||||
|
onclose={() => (pad = null)}
|
||||||
|
onresult={onPad}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
{#if askHostPlays}
|
||||||
|
<Modal title={t('hotseat.hostPlaysTitle')} onclose={() => (askHostPlays = false)}>
|
||||||
|
<div class="hostplays">
|
||||||
|
<button class="ghost" onclick={() => setHostPlays(false)}>{t('hotseat.hostPlaysNo')}</button>
|
||||||
|
<button class="primary" onclick={() => setHostPlays(true)}>{t('hotseat.hostPlaysYes')}</button>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</Screen>
|
</Screen>
|
||||||
|
|
||||||
@@ -450,4 +638,93 @@
|
|||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
/* --- offline hotseat roster --- */
|
||||||
|
.hostpin {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 11px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
.roster {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.prow {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.pname {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 10px 11px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--text);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
.pname:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.pname.invalid {
|
||||||
|
border-color: var(--danger);
|
||||||
|
}
|
||||||
|
.plink {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.plink:disabled {
|
||||||
|
color: var(--text-muted);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
.pkebab {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 6px 8px;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.addrow {
|
||||||
|
align-self: flex-start;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
background: none;
|
||||||
|
color: var(--accent);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.addrow:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.hostplays {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.hostplays button {
|
||||||
|
padding: 10px 16px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.hostplays .primary {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--accent-text);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user