Add UI components

client/src/components/GameCanvas.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react'
+import { GameEngine } from '../game/GameEngine.ts'
+
+interface Props {
+  onEngineReady?: (engine: GameEngine) => void
+}
+
+export default function GameCanvas({ onEngineReady }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const engine = new GameEngine()
+    engine.init(container).then(() => {
+      if (engine.destroyed) return
+      onEngineReady?.(engine)
+    })
+
+    return () => engine.destroy()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <div
+      ref={containerRef}
+      style={{ width: '100%', height: '100%' }}
+    />
+  )
+}

client/src/components/SymbolPicker.tsx

@@ -0,0 +1,123 @@
+import { useState } from 'react'
+import { theme } from '../theme.ts'
+
+interface Props {
+  current: string
+  onSelect: (symbol: string) => void
+  onClose: () => void
+}
+
+type Category = 'classic' | 'hearts' | 'emojis' | 'letters'
+
+const CATEGORIES: { id: Category; label: string }[] = [
+  { id: 'classic', label: 'Classic' },
+  { id: 'hearts', label: 'Hearts' },
+  { id: 'emojis', label: 'Emojis' },
+  { id: 'letters', label: 'Letters' },
+]
+
+const SYMBOLS: Record<Category, string[]> = {
+  classic: ['X', 'O', '●', '○', '★', '☆', '♠', '♥', '♦', '♣', '⚫', '⚪', '🔵', '🔴'],
+  hearts: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💝', '💖', '💗'],
+  emojis: [
+    '😀', '😍', '🤩', '😎', '😂', '🥳', '🤯', '😈', '👻', '👽',
+    '🚀', '⭐', '🌟', '🎯', '🔥', '💎', '🏆', '👑', '🎮', '🎲',
+    '🐱', '🐶', '🦊', '🐼', '🦄', '🐸', '🐨', '🐲', '🐬', '🦋',
+    '🌈', '⚡', '🍀', '🌺', '🌸', '🌻', '🌍', '🌙', '☀️', '❄️',
+    '🍕', '🍔', '🌮', '🍩', '🍪', '🍉', '🍇', '🍓',
+    '⚽', '🏀', '🎸', '🎹', '🎨', '🎭', '📷', '💡',
+    '♠️', '♥️', '♦️', '♣️', '♟️', '🎰', '🔮', '🗝️',
+    '💪', '🧠', '👀', '🫶', '🤝', '🎀', '🧩', '🪄',
+  ],
+  letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
+}
+
+export default function SymbolPicker({ current, onSelect, onClose }: Props) {
+  const [category, setCategory] = useState<Category>('classic')
+  const symbols = SYMBOLS[category]
+
+  return (
+    <div
+      style={{
+        position: 'fixed', inset: 0, zIndex: 100,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        background: 'rgba(0,0,0,0.5)',
+        animation: 'fadeIn 0.15s ease',
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          background: theme.bgStr,
+          border: `1px solid ${theme.border}`,
+          borderRadius: 12,
+          padding: '1.25rem',
+          width: 'min(340px, 85vw)',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <span style={{
+          color: theme.text, fontWeight: 600, fontSize: '1rem',
+          display: 'block', marginBottom: '0.75rem',
+        }}>
+          Choose Your Symbol
+        </span>
+
+        <div style={{
+          display: 'flex', gap: '0.4rem', marginBottom: '0.75rem',
+        }}>
+          {CATEGORIES.map((cat) => (
+            <button
+              key={cat.id}
+              onClick={() => setCategory(cat.id)}
+              style={{
+                flex: 1,
+                padding: '0.35rem 0.25rem',
+                fontSize: '0.75rem',
+                fontWeight: 600,
+                cursor: 'pointer',
+                background: category === cat.id ? theme.player1Str : theme.bgPanel,
+                color: category === cat.id ? '#fff' : theme.textMuted,
+                border: category === cat.id ? `1px solid ${theme.player1Str}` : `1px solid ${theme.border}`,
+                borderRadius: 6,
+                transition: 'all 0.15s ease',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {cat.label}
+            </button>
+          ))}
+        </div>
+
+        <div style={{
+          display: 'flex', flexWrap: 'wrap', gap: '0.6rem',
+          justifyContent: 'center',
+          maxHeight: 220,
+          overflowY: 'auto',
+        }}>
+          {symbols.map((s) => (
+            <button
+              key={s}
+              onClick={() => { onSelect(s); onClose() }}
+              style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                width: 48, height: 48,
+                background: s === current ? theme.player1Str : theme.bgPanel,
+                border: s === current ? `2px solid ${theme.player1Str}` : `1px solid ${theme.border}`,
+                borderRadius: 8,
+                cursor: 'pointer',
+                fontSize: category === 'letters' ? '1.1rem' : '1.3rem',
+                color: s === current ? '#fff' : theme.text,
+                transition: 'all 0.15s ease',
+                flexShrink: 0,
+              }}
+              title={s}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/ThemeSelector.tsx

@@ -0,0 +1,76 @@
+import { THEMES, theme } from '../theme.ts'
+import type { ThemeMode } from '../theme.ts'
+
+interface Props {
+  current: ThemeMode
+  onSelect: (mode: ThemeMode) => void
+  onClose: () => void
+}
+
+const modes = Object.keys(THEMES) as ThemeMode[]
+
+export default function ThemeSelector({ current, onSelect, onClose }: Props) {
+  return (
+    <div
+      style={{
+        position: 'fixed', inset: 0, zIndex: 100,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        background: 'rgba(0,0,0,0.5)',
+        animation: 'fadeIn 0.15s ease',
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          background: theme.bgStr,
+          border: `1px solid ${theme.border}`,
+          borderRadius: 12,
+          padding: '1.25rem',
+          width: 'min(360px, 85vw)',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <span style={{
+          color: theme.text, fontWeight: 600, fontSize: '1rem',
+          display: 'block', marginBottom: '1rem',
+        }}>
+          Choose Theme
+        </span>
+        <div style={{
+          display: 'flex', flexWrap: 'wrap', gap: '0.6rem',
+          justifyContent: 'center',
+        }}>
+          {modes.map((mode) => {
+            const t = THEMES[mode]
+            const isActive = mode === current
+            return (
+              <button
+                key={mode}
+                onClick={() => { onSelect(mode); onClose() }}
+                style={{
+                  display: 'flex', flexDirection: 'column',
+                  alignItems: 'center', justifyContent: 'center',
+                  gap: '0.3rem',
+                  width: 'min(140px, calc(50% - 0.6rem))',
+                  minHeight: 64,
+                  padding: '0.6rem 0.4rem',
+                  background: t.colors.bgPanel,
+                  border: isActive ? `2px solid ${t.colors.player1Str}` : `1px solid ${theme.border}`,
+                  borderRadius: 8,
+                  cursor: 'pointer',
+                  color: t.colors.text,
+                  fontSize: '0.8rem',
+                  fontWeight: isActive ? 600 : 400,
+                  transition: 'border 0.15s ease',
+                }}
+              >
+                <span style={{ fontSize: '1.4rem' }}>{t.emoji}</span>
+                <span>{t.label}</span>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}