Stage 8: UI social/account/history surfaces

Wire the deferred Stage 7 surfaces end-to-end (UI -> gateway transcode -> backend REST -> existing domain services): friends (incl. one-time friend codes), per-user blocks, friend-game invitations, profile editing + email binding, the statistics screen, and the in-game history + GCG export. Friends gain two add paths (interview decision, a deliberate plan change): one-time 6-digit codes (friend_codes table, 12h TTL, single-use, rate-limited redeem); and play-gated requests (shared game required) where an explicit decline is permanent, an ignored request lapses after 30 days, and a code bypasses a decline. Migration 00006 widens friendships_status_chk and adds friend_codes. Lobby notification badge is poll + push: a new generic `notify` event drives it live; the client polls on open/focus. Language stays a single Settings control that writes through to the durable account's preferred_language. GCG export is finished-only (game.ErrGameActive) and shares/downloads the .gcg file. Tests: backend unit + inttest (friend gate/decline/code, ListInvitations, GetStats, GCG gate), gateway transcode round-trips + notify constructor, UI vitest (codecs, win-rate, share choice) + Playwright social specs. Docs: PLAN (Stage 8 done + refinements + TODO-5), ARCHITECTURE, FUNCTIONAL(+ru), UI_DESIGN, TESTING, module READMEs.
2026-06-03 19:47:40 +02:00
parent 539e24fba1
commit d733ce3119
114 changed files with 8210 additions and 149 deletions
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Screen from '../components/Screen.svelte';
+  import { app, handleError } from '../lib/app.svelte';
+  import { gateway } from '../lib/gateway';
+  import { t, type MessageKey } from '../lib/i18n/index.svelte';
+  import { gamesPlayed, winRate } from '../lib/stats';
+  import type { Stats } from '../lib/model';
+
+  let stats = $state<Stats | null>(null);
+
+  onMount(async () => {
+    if (app.profile?.isGuest) return;
+    try {
+      stats = await gateway.statsGet();
+    } catch (e) {
+      handleError(e);
+    }
+  });
+
+  const cards = $derived<{ key: MessageKey; value: string | number }[]>(
+    stats
+      ? [
+          { key: 'stats.wins', value: stats.wins },
+          { key: 'stats.losses', value: stats.losses },
+          { key: 'stats.draws', value: stats.draws },
+          { key: 'stats.played', value: gamesPlayed(stats) },
+          { key: 'stats.winRate', value: `${winRate(stats)}%` },
+          { key: 'stats.maxGame', value: stats.maxGamePoints },
+          { key: 'stats.maxWord', value: stats.maxWordPoints },
+        ]
+      : [],
+  );
+</script>
+
+<Screen title={t('stats.title')} back="/">
+  <div class="page">
+    {#if app.profile?.isGuest}
+      <p class="muted">{t('stats.guestHint')}</p>
+    {:else if stats}
+      <div class="grid">
+        {#each cards as c (c.key)}
+          <div class="card">
+            <span class="num">{c.value}</span>
+            <span class="lbl">{t(c.key)}</span>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</Screen>
+
+<style>
+  .page {
+    padding: var(--pad);
+  }
+  .muted {
+    color: var(--text-muted);
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 18px 16px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    border-radius: var(--radius);
+  }
+  .num {
+    font-size: 1.7rem;
+    font-weight: 700;
+  }
+  .lbl {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+  }
+</style>