feat(client): two-section landing — friend vs Casual bot

packages/client/src/lib/Landing.svelte

@@ -1,30 +1,60 @@
 <script lang="ts">
   import type { Mode, Color, CreateGameResponse } from '@blind-chess/shared';
 
-  let mode: Mode = $state('blind');
-  let side: Color | 'random' = $state('random');
-  let highlightingEnabled = $state(false);
-  let creating = $state(false);
-  let error: string | null = $state(null);
+  // Friend section state.
+  let friendMode: Mode = $state('blind');
+  let friendSide: Color | 'random' = $state('random');
+  let friendHighlight = $state(false);
+  let friendCreating = $state(false);
+  let friendError: string | null = $state(null);
 
-  async function create() {
-    creating = true;
-    error = null;
+  // AI section state (separate so user can configure each independently).
+  let aiMode: Mode = $state('blind');
+  let aiSide: Color | 'random' = $state('random');
+  let aiHighlight = $state(false);
+  let aiCreating = $state(false);
+  let aiError: string | null = $state(null);
+
+  async function createWithFriend() {
+    friendCreating = true; friendError = null;
     try {
       const res = await fetch('/api/games', {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ mode, side, highlightingEnabled }),
+        body: JSON.stringify({
+          mode: friendMode, side: friendSide, highlightingEnabled: friendHighlight,
+        }),
       });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const json: CreateGameResponse & { creatorColor: Color } = await res.json();
-      // store creator token before navigating
       localStorage.setItem(`bc:${json.gameId}`, json.creatorToken);
       location.hash = `#/g/${json.gameId}`;
     } catch (e) {
-      error = e instanceof Error ? e.message : String(e);
+      friendError = e instanceof Error ? e.message : String(e);
     } finally {
-      creating = false;
+      friendCreating = false;
+    }
+  }
+
+  async function createVsCasual() {
+    aiCreating = true; aiError = null;
+    try {
+      const res = await fetch('/api/games', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          mode: aiMode, side: aiSide, highlightingEnabled: aiHighlight,
+          vsAi: { brain: 'casual' },
+        }),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const json: CreateGameResponse & { creatorColor: Color } = await res.json();
+      localStorage.setItem(`bc:${json.gameId}`, json.creatorToken);
+      location.hash = `#/g/${json.gameId}`;
+    } catch (e) {
+      aiError = e instanceof Error ? e.message : String(e);
+    } finally {
+      aiCreating = false;
     }
   }
 </script>
@@ -36,18 +66,19 @@
   </div>
 
   <div class="card">
-    <h2>Create a game</h2>
+    <h2>Play with a friend</h2>
+    <p class="card-sub muted">Get a shareable link, send it to someone, play together.</p>
 
     <div class="field">
       <span class="lbl">Mode</span>
       <div class="opts">
-        <label class="opt" class:active={mode === 'blind'}>
-          <input type="radio" bind:group={mode} value="blind" />
+        <label class="opt" class:active={friendMode === 'blind'}>
+          <input type="radio" bind:group={friendMode} value="blind" />
           <span class="opt-title">Blind</span>
           <span class="opt-sub">Each player sees only their own pieces.</span>
         </label>
-        <label class="opt" class:active={mode === 'vanilla'}>
-          <input type="radio" bind:group={mode} value="vanilla" />
+        <label class="opt" class:active={friendMode === 'vanilla'}>
+          <input type="radio" bind:group={friendMode} value="vanilla" />
           <span class="opt-title">Vanilla</span>
           <span class="opt-sub">Normal chess. Both players see everything.</span>
         </label>
@@ -57,29 +88,79 @@
     <div class="field">
       <span class="lbl">You play as</span>
       <div class="row">
-        <label><input type="radio" bind:group={side} value="w" /> White</label>
-        <label><input type="radio" bind:group={side} value="b" /> Black</label>
-        <label><input type="radio" bind:group={side} value="random" /> Random</label>
+        <label><input type="radio" bind:group={friendSide} value="w" /> White</label>
+        <label><input type="radio" bind:group={friendSide} value="b" /> Black</label>
+        <label><input type="radio" bind:group={friendSide} value="random" /> Random</label>
       </div>
     </div>
 
     <div class="field">
       <label class="toggle">
-        <input type="checkbox" bind:checked={highlightingEnabled} />
+        <input type="checkbox" bind:checked={friendHighlight} />
         <span>Highlight reachable squares</span>
-        {#if mode === 'blind'}
+        {#if friendMode === 'blind'}
           <span class="hint muted">(geometric only — no opponent info)</span>
         {/if}
       </label>
     </div>
 
-    <button class="primary big" disabled={creating} onclick={create}>
-      {creating ? 'Creating…' : 'Create game'}
+    <button class="primary big" disabled={friendCreating} onclick={createWithFriend}>
+      {friendCreating ? 'Creating…' : 'Create game'}
     </button>
+    {#if friendError}<p class="error">Error: {friendError}</p>{/if}
+  </div>
 
-    {#if error}
-      <p class="error">Error: {error}</p>
-    {/if}
+  <div class="card">
+    <h2>Play vs computer</h2>
+    <p class="card-sub muted">Always-available opponent. No link to share — game starts immediately.</p>
+
+    <div class="field">
+      <span class="lbl">Mode</span>
+      <div class="opts">
+        <label class="opt" class:active={aiMode === 'blind'}>
+          <input type="radio" bind:group={aiMode} value="blind" />
+          <span class="opt-title">Blind</span>
+          <span class="opt-sub">Each player sees only their own pieces.</span>
+        </label>
+        <label class="opt" class:active={aiMode === 'vanilla'}>
+          <input type="radio" bind:group={aiMode} value="vanilla" />
+          <span class="opt-title">Vanilla</span>
+          <span class="opt-sub">Normal chess. Both players see everything.</span>
+        </label>
+      </div>
+    </div>
+
+    <div class="field">
+      <span class="lbl">You play as</span>
+      <div class="row">
+        <label><input type="radio" bind:group={aiSide} value="w" /> White</label>
+        <label><input type="radio" bind:group={aiSide} value="b" /> Black</label>
+        <label><input type="radio" bind:group={aiSide} value="random" /> Random</label>
+      </div>
+    </div>
+
+    <div class="field">
+      <label class="toggle">
+        <input type="checkbox" bind:checked={aiHighlight} />
+        <span>Highlight reachable squares</span>
+        {#if aiMode === 'blind'}
+          <span class="hint muted">(geometric only — no opponent info)</span>
+        {/if}
+      </label>
+    </div>
+
+    <div class="ai-buttons">
+      <button class="primary" disabled={aiCreating} onclick={createVsCasual}>
+        {aiCreating ? 'Creating…' : 'Casual bot'}
+      </button>
+      <button class="secondary" disabled title="Coming soon">
+        gemma4 recon (coming soon)
+      </button>
+    </div>
+    <p class="card-sub muted small">
+      Casual: fast, plays simple moves, makes mistakes. Good for a quick game.
+    </p>
+    {#if aiError}<p class="error">Error: {aiError}</p>{/if}
   </div>
 
   <footer class="muted">
@@ -114,8 +195,11 @@
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 22px;
+    margin-bottom: 20px;
   }
-  h2 { font-size: 18px; margin: 0 0 16px; }
+  .card-sub { font-size: 13px; margin: -10px 0 16px; }
+  .card-sub.small { margin-top: 12px; font-size: 12px; }
+  h2 { font-size: 18px; margin: 0 0 8px; }
 
   .field { margin-bottom: 20px; }
   .lbl {
@@ -157,6 +241,15 @@
     margin-top: 8px;
   }
 
+  .ai-buttons { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
+  @media (max-width: 480px) { .ai-buttons { grid-template-columns: 1fr; } }
+  .secondary {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+  }
+  .secondary:disabled { cursor: not-allowed; opacity: 0.6; }
+
   .error { color: #f87171; margin-top: 12px; }
   footer { text-align: center; margin-top: 24px; font-size: 12px; }
 </style>