Stage 7 (wip): UI shell, libs, mock transport, screens (lobby->game), e2e smoke

- plain Svelte 5 + TS + Vite (no SvelteKit); CSS-token design system (Telegram-ready), hash router, IndexedDB session - pure libs: domain model, premium/value maps ported from solver, board replay, placement state machine, i18n en/ru - in-memory mock transport + seed data; pnpm start runs lobby->active game->board with no backend - board: pointer-drag + tap placement, MakeMove (popup / 1s-hold commit), two-state zoom, blank chooser, exchange, hint, word-check, chat - Playwright smoke (mock) green; svelte-check clean; mock bundle ~37 KB gzip
2026-06-03 00:32:50 +02:00
parent 19ae8f04a2
commit 453ddc5e94
48 changed files with 5696 additions and 0 deletions
@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import Header from '../components/Header.svelte';
+  import { gateway } from '../lib/gateway';
+  import { handleError } from '../lib/app.svelte';
+  import { navigate } from '../lib/router.svelte';
+  import { t, type MessageKey } from '../lib/i18n/index.svelte';
+  import type { Variant } from '../lib/model';
+
+  const variants: { id: Variant; label: MessageKey }[] = [
+    { id: 'english', label: 'new.english' },
+    { id: 'russian', label: 'new.russian' },
+    { id: 'erudit', label: 'new.erudit' },
+  ];
+
+  let searching = $state(false);
+  let poll: ReturnType<typeof setInterval> | null = null;
+
+  function stop() {
+    if (poll) {
+      clearInterval(poll);
+      poll = null;
+    }
+  }
+
+  async function find(v: Variant) {
+    searching = true;
+    try {
+      const r = await gateway.lobbyEnqueue(v);
+      if (r.matched && r.game) {
+        navigate(`/game/${r.game.id}`);
+        return;
+      }
+      // The match also arrives via the live stream (handled in app), but poll as a
+      // fallback for a client that is not currently streaming.
+      poll = setInterval(async () => {
+        try {
+          const p = await gateway.lobbyPoll();
+          if (p.matched && p.game) {
+            stop();
+            navigate(`/game/${p.game.id}`);
+          }
+        } catch (e) {
+          handleError(e);
+        }
+      }, 2500);
+    } catch (e) {
+      searching = false;
+      handleError(e);
+    }
+  }
+
+  onDestroy(stop);
+</script>
+
+<Header title={t('new.title')} back="/" />
+<main class="page">
+  {#if searching}
+    <div class="searching">
+      <div class="spinner"></div>
+      <p>{t('new.searching')}</p>
+      <button class="cancel" onclick={() => { stop(); navigate('/'); }}>{t('common.cancel')}</button>
+    </div>
+  {:else}
+    <p class="subtitle">{t('new.subtitle')}</p>
+    <div class="variants">
+      {#each variants as v (v.id)}
+        <button class="variant" onclick={() => find(v.id)}>{t(v.label)}</button>
+      {/each}
+    </div>
+  {/if}
+</main>
+
+<style>
+  .page {
+    padding: var(--pad);
+  }
+  .subtitle {
+    color: var(--text-muted);
+  }
+  .variants {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 12px;
+  }
+  .variant {
+    padding: 16px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    border-radius: var(--radius);
+    font-size: 1.05rem;
+    font-weight: 600;
+  }
+  .searching {
+    display: grid;
+    place-items: center;
+    gap: 14px;
+    padding: 48px 0;
+    color: var(--text-muted);
+  }
+  .spinner {
+    width: 36px;
+    height: 36px;
+    border: 3px solid var(--border);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .cancel {
+    padding: 8px 16px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    border-radius: var(--radius-sm);
+  }
+</style>