Play hub + Daily Word game (Phase 1 of the games feature)

A calm /play space — "after the brief, a small thing to enjoy." Framework-ready for more games (Word Search next; zen/coloring later). * Daily Word (5 letters / 6 guesses) + Long Word (6 / 7) — same Wordle mechanic, Upbeat Bytes flavor (no "Wordle" in the UI). Hopeful answers; after solving, a one-line "why this word matters." * LLM proposes, code disposes: answers are picked deterministically by date-seed from a hand-curated hopeful pool that's pre-validated ⊆ the guess dictionary (always typeable), avoiding recent repeats; the LLM only adds the optional "why" (with fallback). daily_puzzles(date, game, variant, payload) stores them so everyone gets the same daily; the cycle pre-generates with the "why". * Bundled guess dictionaries (words-5/6.json, ~12.6k/22.4k) for client-side guess validation — never the LLM. Answer lightly obfuscated (base64) in the payload. * Private, gentle stats (played/solved/streak, guess distribution); spoiler-free emoji-grid share. No leaderboard, no timer, no streak-loss drama. * Play in the bottom nav (replacing Browse, still on the lane rail) + the header. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-10 16:06:20 -04:00
parent d0fb153e46
commit 215a5c4d64
15 changed files with 668 additions and 6 deletions
@@ -595,7 +595,7 @@
  {/if}
 </main>

-<BottomNav active={activeTab} onToday={() => navigate('today')} onLatest={() => navigate('latest')} onBrowse={browse} onYou={openAccount} user={auth.user} />
+<BottomNav active={activeTab} onToday={() => navigate('today')} onLatest={() => navigate('latest')} onPlay={() => goto('/play')} onYou={openAccount} user={auth.user} />

 <style>
  main.container { padding-top: 6px; padding-bottom: 40px; min-height: 60vh; }
@@ -0,0 +1,125 @@
+<script>
+  import { onMount } from 'svelte';
+  import { getJSON } from '$lib/api.js';
+  import WordGame from '$lib/components/WordGame.svelte';
+
+  let view = $state('hub'); // 'hub' | 'word'
+  let variant = $state('5');
+  let date = $state('');
+  let wordStatus = $state({ 5: null, 6: null }); // null | {status, tries, max}
+
+  function readStatus(v) {
+    try {
+      const s = JSON.parse(localStorage.getItem(`goodnews:word:${v}:${date}`) || 'null');
+      if (s && (s.status === 'won' || s.status === 'lost')) {
+        return { status: s.status, tries: (s.guesses || []).length, max: v === '6' ? 7 : 6 };
+      }
+    } catch { /* ignore */ }
+    return null;
+  }
+  function refreshStatus() {
+    wordStatus = { 5: readStatus('5'), 6: readStatus('6') };
+  }
+
+  function wordLabel() {
+    const a = wordStatus['5'], b = wordStatus['6'];
+    const done = [a, b].filter(Boolean);
+    if (done.length === 0) return 'Play today’s word';
+    const parts = [];
+    if (a) parts.push(`5·${a.status === 'won' ? a.tries + '/6' : 'X'}`);
+    if (b) parts.push(`6·${b.status === 'won' ? b.tries + '/7' : 'X'}`);
+    return `Today: ${parts.join('  ')}`;
+  }
+
+  onMount(async () => {
+    try {
+      const p = await getJSON('/api/puzzle/word?variant=5');
+      date = p.date;
+    } catch { /* offline — game view will surface it */ }
+    refreshStatus();
+  });
+</script>
+
+<svelte:head><title>Play · Upbeat Bytes</title></svelte:head>
+
+<header class="bar">
+  <div class="container inner">
+    <a class="brand" href="/"><img class="logo" src="/logo.svg" alt="Upbeat Bytes" /></a>
+    {#if view !== 'hub'}
+      <button class="back" onclick={() => { view = 'hub'; refreshStatus(); }}>
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>Play hub
+      </button>
+    {:else}
+      <a class="back" href="/"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>News</a>
+    {/if}
+  </div>
+</header>
+
+<main class="container page">
+  {#if view === 'hub'}
+    <h1>Play</h1>
+    <p class="sub">A small calm thing after the brief. One of each a day — no rush, no score to beat but your own.</p>
+    <div class="cards">
+      <button class="gamecard" onclick={() => (view = 'word')}>
+        <div class="gc-icon">◧</div>
+        <div class="gc-body">
+          <h2>Daily Word</h2>
+          <p class="gc-sub">Guess the hopeful word · 5 or 6 letters</p>
+          <p class="gc-status" class:played={wordStatus['5'] || wordStatus['6']}>{wordLabel()}</p>
+        </div>
+      </button>
+      <div class="gamecard soon" aria-disabled="true">
+        <div class="gc-icon">▦</div>
+        <div class="gc-body">
+          <h2>Word Search</h2>
+          <p class="gc-sub">Find the day’s themed words</p>
+          <p class="gc-status">Coming soon</p>
+        </div>
+      </div>
+    </div>
+  {:else if view === 'word'}
+    <div class="variant">
+      <button class="vchip" class:on={variant === '5'} onclick={() => (variant = '5')}>Daily Word<span>5 letters · 6 guesses</span></button>
+      <button class="vchip" class:on={variant === '6'} onclick={() => (variant = '6')}>Long Word<span>6 letters · 7 guesses</span></button>
+    </div>
+    <WordGame {variant} onstatus={refreshStatus} />
+  {/if}
+</main>
+
+<style>
+  header.bar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
+  .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
+  .logo { height: 40px; display: block; }
+  .back { color: var(--accent-deep); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 5px;
+          background: none; border: none; font-family: inherit; cursor: pointer; }
+  .back svg { width: 17px; height: 17px; display: block; }
+  .page { padding: 22px 20px 70px; }
+  h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin: 6px 0 6px; }
+  .sub { color: var(--muted); margin: 0 0 24px; max-width: 540px; }
+
+  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
+  .gamecard {
+    display: flex; gap: 14px; align-items: center; text-align: left;
+    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
+    padding: 18px 20px; cursor: pointer; font: inherit; color: var(--ink);
+    box-shadow: var(--shadow); transition: border-color 0.14s ease, transform 0.14s ease;
+  }
+  .gamecard:hover { border-color: var(--accent); transform: translateY(-1px); }
+  .gamecard.soon { cursor: default; opacity: 0.6; box-shadow: none; }
+  .gamecard.soon:hover { border-color: var(--line); transform: none; }
+  .gc-icon { font-size: 2rem; color: var(--accent); line-height: 1; flex-shrink: 0; }
+  .gc-body h2 { font-size: 1.2rem; margin: 0 0 3px; }
+  .gc-sub { color: var(--muted); font-size: 0.86rem; margin: 0 0 8px; }
+  .gc-status { font-size: 0.84rem; color: var(--accent-deep); font-weight: 600; margin: 0; }
+  .gamecard.soon .gc-status { color: var(--muted); font-weight: 400; font-style: italic; }
+
+  .variant { display: flex; gap: 10px; justify-content: center; margin: 0 0 22px; }
+  .vchip {
+    display: flex; flex-direction: column; align-items: center; gap: 2px;
+    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
+    border-radius: 12px; padding: 8px 18px; font: inherit; font-weight: 600; cursor: pointer;
+  }
+  .vchip span { font-weight: 400; font-size: 0.72rem; color: var(--muted); }
+  .vchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
+  .vchip.on span { color: rgba(255,255,255,0.8); }
+</style>