Add bot to play against.

web/src/components/Home.tsx

@@ -1,7 +1,14 @@
 import { useState } from 'react'
 import { createGame, joinGame } from '../api'
+import type { BotDifficulty } from '../api'
 import type { Session } from '../types'
 
+const BOT_LEVELS: { value: BotDifficulty; label: string; blurb: string }[] = [
+  { value: 'easy', label: '🐣 Easy', blurb: 'Learns you the ropes' },
+  { value: 'medium', label: '🐺 Medium', blurb: 'Puts up a fight' },
+  { value: 'hard', label: '🦁 Hard', blurb: 'Shows no mercy' },
+]
+
 // 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('')
@@ -50,6 +57,24 @@ export function Home({ onSession }: { onSession: (s: Session) => void }) {
           Host a new game
         </button>
 
+        <div className="home-divider">
+          <span>or challenge the computer</span>
+        </div>
+
+        <div className="home-bots">
+          {BOT_LEVELS.map((b) => (
+            <button
+              key={b.value}
+              className="btn btn-secondary"
+              disabled={busy}
+              title={b.blurb}
+              onClick={() => run(() => createGame(name, b.value))}
+            >
+              {b.label}
+            </button>
+          ))}
+        </div>
+
         <div className="home-divider">
           <span>or join a friend</span>
         </div>