Initial commit.

2026-07-22 23:07:29 -04:00
commit 612a4e6227
38 changed files with 6106 additions and 0 deletions
@@ -0,0 +1,78 @@
+import { useState } from 'react'
+import { createGame, joinGame } from '../api'
+import type { Session } from '../types'
+
+// Home is the create/join screen shown when there's no active session.
+export function Home({ onSession }: { onSession: (s: Session) => void }) {
+  const [name, setName] = useState('')
+  const [code, setCode] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function run(fn: () => Promise<Session>) {
+    setBusy(true)
+    setError(null)
+    try {
+      onSession(await fn())
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'something went wrong')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="home">
+      <div className="home-pets" aria-hidden>
+        🐷🦔🐶🦩🐉
+      </div>
+      <h1 className="home-title">
+        Super Auto Pets
+        <span className="home-subtitle">The Board Game</span>
+      </h1>
+
+      <div className="home-card">
+        <label className="field">
+          <span>Your name</span>
+          <input
+            value={name}
+            maxLength={20}
+            placeholder="e.g. Greyson"
+            onChange={(e) => setName(e.target.value)}
+          />
+        </label>
+
+        <button
+          className="btn btn-primary btn-big"
+          disabled={busy}
+          onClick={() => run(() => createGame(name))}
+        >
+          Host a new game
+        </button>
+
+        <div className="home-divider">
+          <span>or join a friend</span>
+        </div>
+
+        <div className="home-join">
+          <input
+            className="code-input"
+            value={code}
+            maxLength={5}
+            placeholder="CODE"
+            onChange={(e) => setCode(e.target.value.toUpperCase())}
+          />
+          <button
+            className="btn btn-secondary"
+            disabled={busy || code.length < 5}
+            onClick={() => run(() => joinGame(code, name))}
+          >
+            Join
+          </button>
+        </div>
+
+        {error && <div className="home-error">{error}</div>}
+      </div>
+    </div>
+  )
+}