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,144 @@
+/*
+ * Design tokens — pure CSS custom properties, no framework, no image/font/SVG
+ * assets. Light is the default; dark is applied either by the OS
+ * (prefers-color-scheme) or by an explicit [data-theme] set from Settings. A
+ * Telegram Mini App can override these same variables at runtime from
+ * WebApp.themeParams (see lib/theme — SDK wiring lands in the Telegram stage), so
+ * the whole UI re-themes without touching components.
+ */
+:root {
+  --bg: #f3f4f6;
+  --bg-elev: #ffffff;
+  --surface: #ffffff;
+  --surface-2: #eef0f3;
+  --text: #14181f;
+  --text-muted: #6b7280;
+  --border: #d8dce2;
+  --accent: #2f6df6;
+  --accent-text: #ffffff;
+  --danger: #d6453d;
+  --ok: #1f9d57;
+  --warn: #c9881b;
+
+  /* board + tiles (all drawn with CSS primitives) */
+  --board-bg: #cdd6cf;
+  --cell-bg: #e7ece8;
+  --cell-line: #b6c0b8;
+  --tile-bg: #f4e2b8;
+  --tile-edge: #d8c190;
+  --tile-text: #2a2113;
+  --tile-pending: #ffe7a3;
+  --tile-recent: #fff6d8;
+  --prem-tw: #e06a5b; /* triple word */
+  --prem-dw: #efa6a0; /* double word + centre */
+  --prem-tl: #4f8fd6; /* triple letter */
+  --prem-dl: #a8cdec; /* double letter */
+  --prem-text: #2a2113;
+
+  /* shape + type */
+  --radius: 10px;
+  --radius-sm: 6px;
+  --gap: 8px;
+  --pad: 12px;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    "Noto Sans", "Liberation Sans", sans-serif;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.06);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0f1115;
+    --bg-elev: #171a21;
+    --surface: #171a21;
+    --surface-2: #1f242d;
+    --text: #e7eaf0;
+    --text-muted: #9aa3b2;
+    --border: #2a313c;
+    --accent: #5b8cff;
+    --accent-text: #0b0e13;
+    --danger: #f0635a;
+    --ok: #44c87f;
+    --warn: #e0a93a;
+
+    --board-bg: #2a3330;
+    --cell-bg: #222a27;
+    --cell-line: #38433d;
+    --tile-bg: #d9c79a;
+    --tile-edge: #b6a473;
+    --tile-text: #20190d;
+    --tile-pending: #f0d98f;
+    --tile-recent: #4a4636;
+    --prem-tw: #b1493d;
+    --prem-dw: #8c5450;
+    --prem-tl: #34608f;
+    --prem-dl: #3b5a72;
+    --prem-text: #e7eaf0;
+  }
+}
+
+/* Explicit dark chosen in Settings (overrides OS preference). */
+:root[data-theme="dark"] {
+  --bg: #0f1115;
+  --bg-elev: #171a21;
+  --surface: #171a21;
+  --surface-2: #1f242d;
+  --text: #e7eaf0;
+  --text-muted: #9aa3b2;
+  --border: #2a313c;
+  --accent: #5b8cff;
+  --accent-text: #0b0e13;
+  --danger: #f0635a;
+  --ok: #44c87f;
+  --warn: #e0a93a;
+  --board-bg: #2a3330;
+  --cell-bg: #222a27;
+  --cell-line: #38433d;
+  --tile-bg: #d9c79a;
+  --tile-edge: #b6a473;
+  --tile-text: #20190d;
+  --tile-pending: #f0d98f;
+  --tile-recent: #4a4636;
+  --prem-tw: #b1493d;
+  --prem-dw: #8c5450;
+  --prem-tl: #34608f;
+  --prem-dl: #3b5a72;
+  --prem-text: #e7eaf0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 16px;
+  line-height: 1.4;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  /* never let the page scroll/zoom out from under the board */
+  overscroll-behavior: none;
+  touch-action: manipulation;
+}
+
+#app {
+  height: 100%;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.reduce-motion * {
+  animation-duration: 0.001ms !important;
+  transition-duration: 0.001ms !important;
+}