Add ui tests

client/src/__tests__/Game.engine.test.tsx

@@ -0,0 +1,472 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, cleanup, waitFor, fireEvent, act, within } from '@testing-library/react'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { useParams, useLocation } from 'react-router-dom'
+import Game from '../pages/Game'
+import { setPlayerDrawTower, setPlayer2DrawTower } from '../theme.ts'
+
+const { mockEngine, mockTheme, mockNavigate } = vi.hoisted(() => ({
+  mockNavigate: vi.fn(),
+  mockTheme: {
+    bgStr: '#0d1117',
+    text: '#e6edf3',
+    textMuted: '#8b949e',
+    bgPanel: 'rgba(22,27,34,0.92)',
+    border: '#21262d',
+    player1Str: '#58a6ff',
+    player2Str: '#f0883e',
+    rematchBg: '#238636',
+    rematchBgHover: '#2ea043',
+    errorBg: 'rgba(35,10,10,0.92)',
+    error: '#f85149',
+    playing: '#58a6ff',
+    waiting: '#8b949e',
+    win: '#3fb950',
+    draw: '#d29922',
+    bg: '#0d1117',
+  },
+  mockEngine: {
+    status: 'win',
+    players: ['P1', 'P2'],
+    currentPlayer: 0,
+    playerIndex: 0,
+    winnerPlayerId: '0',
+    scores: { '0': { wins: 1 } },
+    opponentOnline: true,
+    isMuted: false,
+    addCell: vi.fn(),
+    applyMove: vi.fn(),
+    rejectMove: vi.fn(),
+    applyWin: vi.fn(),
+    applyDraw: vi.fn(),
+    applyRoomState: vi.fn(),
+    playerLeft: vi.fn(),
+    setOpponentOnline: vi.fn(),
+    toggleMute: vi.fn(),
+    placeLocalMove: vi.fn(),
+    sendMessage: vi.fn(),
+    onStateChanged: vi.fn(),
+    onError: vi.fn(),
+  },
+}))
+
+vi.mock('react-router-dom', () => ({
+  useParams: vi.fn(() => ({ roomId: 'test-room' })),
+  useNavigate: vi.fn(() => mockNavigate),
+  useLocation: vi.fn(() => ({ state: null })),
+}))
+
+vi.mock('../services/socket.ts', () => ({
+  sendMessage: vi.fn(),
+  onMessage: vi.fn(() => vi.fn()),
+  onReconnect: vi.fn(() => vi.fn()),
+  onConnectionChange: vi.fn(() => vi.fn()),
+  getConnectionStatus: vi.fn(() => 'connected'),
+}))
+
+vi.mock('../theme.ts', () => ({
+  theme: mockTheme,
+  THEMES: { midnight: { label: 'Midnight', emoji: '🌙' } },
+  useThemeMode: vi.fn(() => ['midnight', vi.fn()]),
+  getThemeMode: vi.fn(() => 'midnight'),
+  getPlayerName: vi.fn(() => 'Caro 1'),
+  setPlayerName: vi.fn(),
+  getPlayer2Name: vi.fn(() => 'Caro 2'),
+  setPlayer2Name: vi.fn(),
+  getPlayerSymbol: vi.fn(() => 'X'),
+  setPlayerSymbol: vi.fn(),
+  getPlayer1Symbol: vi.fn(() => 'X'),
+  setPlayer1Symbol: vi.fn(),
+  getPlayer2Symbol: vi.fn(() => 'O'),
+  setPlayer2Symbol: vi.fn(),
+  getPlayerColor: vi.fn(() => null),
+  setPlayerColor: vi.fn(),
+  getPlayer2Color: vi.fn(() => null),
+  setPlayer2Color: vi.fn(),
+  getPlayerDrawTower: vi.fn(() => true),
+  setPlayerDrawTower: vi.fn(),
+  getPlayer2DrawTower: vi.fn(() => true),
+  setPlayer2DrawTower: vi.fn(),
+}))
+
+vi.mock('../components/ThemeSelector.tsx', () => ({
+  default: () => null,
+}))
+
+vi.mock('../components/SymbolPicker.tsx', () => ({
+  default: () => null,
+}))
+
+vi.mock('../components/GameCanvas.tsx', () => ({
+  default: ({ onEngineReady }: any) => {
+    setTimeout(() => onEngineReady?.(mockEngine), 0)
+    return <div data-testid="game-canvas" />
+  },
+}))
+
+afterEach(() => {
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+  cleanup()
+})
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  vi.mocked(useParams).mockReturnValue({ roomId: 'test-room' })
+  vi.mocked(useLocation).mockReturnValue({ state: null } as any)
+  mockEngine.status = 'win'
+  mockEngine.players = ['P1', 'P2']
+  mockEngine.playerIndex = 0
+  mockEngine.winnerPlayerId = '0'
+  mockEngine.scores = { '0': { wins: 1 } }
+  mockEngine.opponentOnline = true
+  mockEngine.isMuted = false
+  mockEngine.placeLocalMove.mockReset()
+  mockNavigate.mockReset()
+})
+
+describe('Game page (with engine)', () => {
+  it('renders HUD with flexWrap and maxWidth', async () => {
+    render(<Game />)
+    const hud = await waitFor(() => {
+      const el = screen.getByText('test-room').closest('div')!
+      expect(el).toHaveStyle('maxWidth: min(600px, 90vw)')
+      return el
+    })
+    expect(hud).toHaveStyle('flexWrap: wrap')
+  })
+
+  it('renders edit name button with 36px touch target', async () => {
+    render(<Game />)
+    const editBtn = await screen.findByTitle('Change your name')
+    expect(editBtn).toHaveStyle('minWidth: 36px')
+    expect(editBtn).toHaveStyle('minHeight: 36px')
+  })
+
+  it('renders Rematch button with 44px touch target', async () => {
+    render(<Game />)
+    const rematchBtn = await screen.findByText('Rematch')
+    expect(rematchBtn).toHaveStyle('minWidth: 44px')
+    expect(rematchBtn).toHaveStyle('minHeight: 44px')
+  })
+
+  it('shows opponent disconnected banner with zIndex 6', async () => {
+    render(<Game />)
+    await screen.findByText('Rematch')
+    mockEngine.opponentOnline = false
+    mockEngine.onStateChanged?.()
+    await screen.findByText(/opponent disconnected/i)
+    const banner = screen.getByText(/opponent disconnected/i).closest('div')!
+    expect(banner).toHaveStyle('zIndex: 6')
+  })
+
+  it('shows turn indicator with maxWidth 90vw', async () => {
+    render(<Game />)
+    const turnMsg = await screen.findByText(/P1 wins/i)
+    const turnDiv = turnMsg.closest('div')!
+    expect(turnDiv).toHaveStyle('maxWidth: 90vw')
+  })
+
+  it('opens name modal with Cancel/Save 44px buttons', async () => {
+    render(<Game />)
+    const editBtn = await screen.findByTitle('Change your name')
+    editBtn.click()
+    const cancelBtn = await screen.findByText('Cancel')
+    expect(cancelBtn).toHaveStyle('minWidth: 44px')
+    expect(cancelBtn).toHaveStyle('minHeight: 44px')
+    const saveBtn = screen.getByText('Save')
+    expect(saveBtn).toHaveStyle('minWidth: 44px')
+    expect(saveBtn).toHaveStyle('minHeight: 44px')
+  })
+
+  it('renders name modal panel with min(320px, 85vw)', async () => {
+    render(<Game />)
+    const editBtn = await screen.findByTitle('Change your name')
+    editBtn.click()
+    const header = await screen.findByText('Change your name')
+    const panel = header.parentElement!
+    const src = readFileSync(resolve(__dirname, '../pages/Game.tsx'), 'utf-8')
+    expect(src).toContain("width: 'min(320px, 85vw)'")
+  })
+
+  it('allows toggling the 3D tower effect in local mode player modal settings', async () => {
+    vi.mocked(useParams).mockReturnValue({ roomId: 'local' })
+    vi.mocked(useLocation).mockReturnValue({ state: { player1Name: 'Caro 1', player2Name: 'Caro 2' } } as any)
+
+    // Setup mock properties for local mode
+    ;(mockEngine as any).camera = { setInitialZoom: vi.fn() }
+    ;(mockEngine as any).symbols = { customColors: [], drawTowers: [] }
+    ;(mockEngine as any).updatePlayerConfig = vi.fn()
+    ;(mockEngine as any).redraw = vi.fn()
+
+    render(<Game />)
+
+    // Wait for the game screen and engine initialization
+    const editP1Btn = await screen.findByTitle('Edit Player 1')
+    editP1Btn.click()
+
+    // Verify modal header is rendered
+    await screen.findByText('Edit Player 1 Settings')
+
+    // Find and toggle the 3D Tower Effect checkbox
+    const checkbox = screen.getByLabelText(/3D Tower Effect/i) as HTMLInputElement
+    expect(checkbox.checked).toBe(true)
+
+    // Click checkbox to uncheck
+    checkbox.click()
+    expect(checkbox.checked).toBe(false)
+
+    // Save changes
+    const saveBtn = screen.getByText('Save Changes')
+    saveBtn.click()
+
+    // Assert updatePlayerConfig has been called with drawTowers parameter [false, true]
+    await waitFor(() => {
+      expect(mockEngine.updatePlayerConfig).toHaveBeenLastCalledWith(
+        ['Caro 1', 'Caro 2'],
+        ['X', 'O'],
+        [expect.any(Number), expect.any(Number)],
+        [false, true]
+      )
+    })
+  })
+
+  it('renders built-in bot status in local mode', async () => {
+    vi.mocked(useParams).mockReturnValue({ roomId: 'local' })
+    vi.mocked(useLocation).mockReturnValue({
+      state: {
+        player1Name: 'Bot 1',
+        player2Name: 'Caro 2',
+        player1Type: 'bot',
+        player2Type: 'human',
+        rules: { swap2: false, noOverlines: false, boardSize: 15 },
+      },
+    } as any)
+
+    ;(mockEngine as any).camera = { setInitialZoom: vi.fn() }
+    ;(mockEngine as any).symbols = { customColors: [], drawTowers: [] }
+    ;(mockEngine as any).updatePlayerConfig = vi.fn()
+    ;(mockEngine as any).redraw = vi.fn()
+
+    render(<Game />)
+
+    await waitFor(() => expect((mockEngine as any).manager).toBeTruthy())
+    await screen.findByText(/Caro 1's turn \(Bot\)/)
+  })
+
+  it('renders the Swap2 step guide and shrinks the board fit in local mode', async () => {
+    vi.mocked(useParams).mockReturnValue({ roomId: 'local' })
+    vi.mocked(useLocation).mockReturnValue({
+      state: {
+        player1Name: 'Caro 1',
+        player2Name: 'Caro 2',
+        player1Type: 'human',
+        player2Type: 'human',
+        rules: { swap2: true, noOverlines: true, boardSize: 15 },
+      },
+    } as any)
+
+    ;(mockEngine as any).camera = { setInitialZoom: vi.fn() }
+    ;(mockEngine as any).symbols = { customColors: [], drawTowers: [] }
+    ;(mockEngine as any).updatePlayerConfig = vi.fn()
+    ;(mockEngine as any).redraw = vi.fn()
+
+    render(<Game />)
+
+    const guide = await screen.findByLabelText('Swap2 steps')
+    expect(guide).toBeInTheDocument()
+    expect(screen.getByText('1. Place three stones')).toHaveStyle(`color: ${mockTheme.player1Str}`)
+    expect(screen.getByText('2. Swap2 Choices')).toBeInTheDocument()
+    expect(screen.getByText('3. Continue the game')).toBeInTheDocument()
+    expect((mockEngine as any).camera.setInitialZoom).toHaveBeenCalledWith(15, 0.66)
+  })
+
+  it('hides the Swap2 guide after the first normal move following the choice', async () => {
+    vi.mocked(useParams).mockReturnValue({ roomId: 'local' })
+    vi.mocked(useLocation).mockReturnValue({
+      state: {
+        player1Name: 'Caro 1',
+        player2Name: 'Caro 2',
+        player1Type: 'human',
+        player2Type: 'human',
+        rules: { swap2: true, noOverlines: true, boardSize: 15 },
+      },
+    } as any)
+
+    ;(mockEngine as any).camera = { setInitialZoom: vi.fn() }
+    ;(mockEngine as any).symbols = { customColors: [], drawTowers: [] }
+    ;(mockEngine as any).updatePlayerConfig = vi.fn()
+    ;(mockEngine as any).redraw = vi.fn()
+
+    render(<Game />)
+
+    await screen.findByLabelText('Swap2 steps')
+    act(() => {
+      ;(mockEngine as any).manager.placeMove(7, 7)
+      ;(mockEngine as any).manager.placeMove(8, 7)
+      ;(mockEngine as any).manager.placeMove(9, 7)
+      ;(mockEngine as any).manager.chooseSwap(false)
+      ;(mockEngine as any).manager.placeMove(10, 7)
+      ;(mockEngine as any).onStateChanged?.()
+    })
+
+    await waitFor(() => expect(screen.queryByLabelText('Swap2 steps')).not.toBeInTheDocument())
+  })
+
+  it('shows + New Bot while waiting and starts a local bot match', async () => {
+    vi.mocked(useParams).mockReturnValue({ roomId: 'waiting-room' })
+    vi.mocked(useLocation).mockReturnValue({ state: null } as any)
+    mockEngine.status = 'waiting'
+    mockEngine.players = ['Caro 1']
+
+    const view = render(<Game />)
+
+    const newBot = await view.findByText('+ New Bot')
+    fireEvent.click(newBot)
+
+    expect(mockNavigate).toHaveBeenCalledWith('/play/local', {
+      state: {
+        player1Name: 'Caro 1',
+        player2Name: 'Bot 2',
+        player1Symbol: 'X',
+        player2Symbol: 'O',
+        player1Type: 'human',
+        player2Type: 'bot',
+        botProfile: 'balanced',
+        rules: { swap2: true, noOverlines: true, boardSize: 15 },
+      },
+    })
+  })
+
+  it('calls the server bot endpoint before placing a local bot move', async () => {
+    vi.mocked(useParams).mockReturnValue({ roomId: 'local' })
+    vi.mocked(useLocation).mockReturnValue({
+      state: {
+        player1Name: 'Bot 1',
+        player2Name: 'Caro 2',
+        player1Type: 'bot',
+        player2Type: 'human',
+        botProfile: 'expert',
+        rules: { swap2: false, noOverlines: false, boardSize: 15 },
+      },
+    } as any)
+
+    const fetchMock = vi.fn(async () => ({
+      ok: true,
+      json: async () => ({ move: { x: 7, y: 7 }, source: 'alpha_beta' }),
+    }))
+    vi.stubGlobal('fetch', fetchMock)
+    vi.useFakeTimers()
+
+    ;(mockEngine as any).camera = { setInitialZoom: vi.fn() }
+    ;(mockEngine as any).symbols = { customColors: [], drawTowers: [] }
+    ;(mockEngine as any).updatePlayerConfig = vi.fn()
+    ;(mockEngine as any).redraw = vi.fn()
+
+    render(<Game />)
+    await act(async () => {
+      vi.advanceTimersByTime(0)
+      await Promise.resolve()
+    })
+    expect((mockEngine as any).manager).toBeTruthy()
+    fetchMock.mockClear()
+    await act(async () => {
+      ;(mockEngine as any).status = 'active'
+      ;(mockEngine as any).currentPlayer = 0
+      ;(mockEngine as any).onStateChanged?.()
+      vi.advanceTimersByTime(221)
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+    expect(fetchMock).toHaveBeenCalledWith('/api/bot/move', expect.objectContaining({
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+    }))
+
+    const [, options] = fetchMock.mock.calls[0]
+    const body = JSON.parse((options as RequestInit).body as string)
+    expect(body.currentPlayer).toBe(0)
+    expect(body.profile).toBe('expert')
+    expect(body.rules).toEqual({ swap2: false, noOverlines: false, boardSize: 15 })
+    expect(mockEngine.placeLocalMove).toHaveBeenCalledWith(7, 7)
+  })
+
+  it('swaps player symbols and colors next to the player cards when local swap is applied', async () => {
+    vi.mocked(useParams).mockReturnValue({ roomId: 'local' })
+    vi.mocked(useLocation).mockReturnValue({ state: { player1Name: 'Caro 1', player2Name: 'Caro 2' } } as any)
+
+    // Setup mock properties for local mode
+    ;(mockEngine as any).camera = { setInitialZoom: vi.fn() }
+    ;(mockEngine as any).symbols = { customColors: [], drawTowers: [] }
+    ;(mockEngine as any).updatePlayerConfig = vi.fn()
+    ;(mockEngine as any).redraw = vi.fn()
+
+    render(<Game />)
+
+    // Wait for engine to initialize and edit buttons to render
+    await screen.findByTitle('Edit Player 1')
+
+    // Simulate engine swap values (names stay same, symbols swap)
+    ;(mockEngine as any).players = ['Caro 1', 'Caro 2']
+    ;(mockEngine as any).playerSymbols = ['O', 'X']
+
+    // Simulate swap applied
+    act(() => {
+      ;(mockEngine as any).onSwapApplied?.()
+    })
+
+    // Now Player 1 Card should display "Caro 1" and "O"
+    const card1 = await screen.findByTitle('Edit Player 1')
+    expect(within(card1).getByText(/Caro 1/)).toBeInTheDocument()
+    expect(within(card1).getByText('O')).toBeInTheDocument()
+
+    // Now Player 2 Card should display "Caro 2" and "X"
+    const card2 = await screen.findByTitle('Edit Player 2')
+    expect(within(card2).getByText(/Caro 2/)).toBeInTheDocument()
+    expect(within(card2).getByText('X')).toBeInTheDocument()
+  })
+
+  it('does not swap player colors or tower settings when local swap is applied with swapped=false', async () => {
+    vi.mocked(useParams).mockReturnValue({ roomId: 'local' })
+    vi.mocked(useLocation).mockReturnValue({ state: { player1Name: 'Caro 1', player2Name: 'Caro 2' } } as any)
+
+    // Setup mock properties for local mode
+    ;(mockEngine as any).camera = { setInitialZoom: vi.fn() }
+    ;(mockEngine as any).symbols = { customColors: [], drawTowers: [] }
+    ;(mockEngine as any).updatePlayerConfig = vi.fn()
+    ;(mockEngine as any).redraw = vi.fn()
+
+    render(<Game />)
+
+    // Wait for engine to initialize and edit buttons to render
+    await screen.findByTitle('Edit Player 1')
+
+    // Reset calls on mock functions
+    vi.mocked(setPlayerDrawTower).mockClear()
+    vi.mocked(setPlayer2DrawTower).mockClear()
+
+    // Simulate engine values (names and symbols stay same)
+    ;(mockEngine as any).players = ['Caro 1', 'Caro 2']
+    ;(mockEngine as any).playerSymbols = ['X', 'O']
+
+    // Simulate swap applied with false (stay)
+    act(() => {
+      ;(mockEngine as any).onSwapApplied?.(false)
+    })
+
+    // Assert that tower settings were not updated (since no swap happened)
+    expect(setPlayerDrawTower).not.toHaveBeenCalled()
+    expect(setPlayer2DrawTower).not.toHaveBeenCalled()
+
+    // Now Player 1 Card should still display "Caro 1" and "X"
+    const card1 = await screen.findByTitle('Edit Player 1')
+    expect(within(card1).getByText(/Caro 1/)).toBeInTheDocument()
+    expect(within(card1).getByText('X')).toBeInTheDocument()
+
+    // Now Player 2 Card should still display "Caro 2" and "O"
+    const card2 = await screen.findByTitle('Edit Player 2')
+    expect(within(card2).getByText(/Caro 2/)).toBeInTheDocument()
+    expect(within(card2).getByText('O')).toBeInTheDocument()
+  })
+})

client/src/__tests__/Game.test.tsx

@@ -0,0 +1,119 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, cleanup } from '@testing-library/react'
+import Game from '../pages/Game.tsx'
+
+const { mockTheme } = vi.hoisted(() => ({
+  mockTheme: {
+    bgStr: '#0d1117',
+    text: '#e6edf3',
+    textMuted: '#8b949e',
+    bgPanel: 'rgba(22,27,34,0.92)',
+    border: '#21262d',
+    player1Str: '#58a6ff',
+    player2Str: '#f0883e',
+    rematchBg: '#238636',
+    errorBg: 'rgba(35,10,10,0.92)',
+    error: '#f85149',
+    playing: '#58a6ff',
+    waiting: '#8b949e',
+    win: '#3fb950',
+    draw: '#d29922',
+    bg: '#0d1117',
+  },
+}))
+
+vi.mock('react-router-dom', () => ({
+  useParams: vi.fn(() => ({ roomId: 'test-room' })),
+  useNavigate: vi.fn(() => vi.fn()),
+  useLocation: vi.fn(() => ({ state: null })),
+}))
+
+vi.mock('../services/socket.ts', () => ({
+  sendMessage: vi.fn(),
+  onMessage: vi.fn(() => vi.fn()),
+  onReconnect: vi.fn(() => vi.fn()),
+  onConnectionChange: vi.fn(() => vi.fn()),
+  getConnectionStatus: vi.fn(() => 'connected'),
+}))
+
+vi.mock('../theme.ts', () => ({
+  theme: mockTheme,
+  THEMES: { midnight: { label: 'Midnight', emoji: '🌙' } },
+  useThemeMode: vi.fn(() => ['midnight', vi.fn()]),
+  getThemeMode: vi.fn(() => 'midnight'),
+  getPlayerName: vi.fn(() => 'Caro 1'),
+  setPlayerName: vi.fn(),
+  getPlayer2Name: vi.fn(() => 'Caro 2'),
+  setPlayer2Name: vi.fn(),
+  getPlayerSymbol: vi.fn(() => 'X'),
+  setPlayerSymbol: vi.fn(),
+  getPlayer1Symbol: vi.fn(() => 'X'),
+  setPlayer1Symbol: vi.fn(),
+  getPlayer2Symbol: vi.fn(() => 'O'),
+  setPlayer2Symbol: vi.fn(),
+  getPlayerColor: vi.fn(() => null),
+  setPlayerColor: vi.fn(),
+  getPlayer2Color: vi.fn(() => null),
+  setPlayer2Color: vi.fn(),
+  getPlayerDrawTower: vi.fn(() => true),
+  setPlayerDrawTower: vi.fn(),
+  getPlayer2DrawTower: vi.fn(() => true),
+  setPlayer2DrawTower: vi.fn(),
+}))
+
+vi.mock('../components/ThemeSelector.tsx', () => ({
+  default: () => null,
+}))
+
+vi.mock('../components/SymbolPicker.tsx', () => ({
+  default: () => null,
+}))
+
+vi.mock('../components/GameCanvas.tsx', () => ({
+  default: () => <div data-testid="game-canvas" />,
+}))
+
+afterEach(cleanup)
+
+describe('Game page (basic)', () => {
+  it('renders root container with 100dvh', () => {
+    render(<Game />)
+    const container = screen.getByTestId('game-canvas').parentElement!
+    expect(container).toHaveStyle('height: 100dvh')
+  })
+
+  it('renders Menu button with 44px touch target', () => {
+    render(<Game />)
+    const menuBtn = screen.getByText('← Menu')
+    expect(menuBtn).toHaveStyle('minWidth: 44px')
+    expect(menuBtn).toHaveStyle('minHeight: 44px')
+  })
+
+  it('renders +New Player button with 44px touch target', () => {
+    render(<Game />)
+    const newPlayerBtn = screen.getByText('+ New Player')
+    expect(newPlayerBtn).toHaveStyle('minWidth: 44px')
+    expect(newPlayerBtn).toHaveStyle('minHeight: 44px')
+  })
+
+  it('renders theme toggle with 44px touch target', () => {
+    render(<Game />)
+    const themeBtn = screen.getByText('🌙')
+    expect(themeBtn).toHaveStyle('minWidth: 44px')
+    expect(themeBtn).toHaveStyle('minHeight: 44px')
+  })
+
+  it('renders symbol button with 44px touch target', () => {
+    render(<Game />)
+    const symBtn = screen.getByText('X')
+    expect(symBtn).toHaveStyle('minWidth: 44px')
+    expect(symBtn).toHaveStyle('minHeight: 44px')
+  })
+
+  it('renders mute button with 44px touch target', () => {
+    render(<Game />)
+    const muteBtn = screen.getByText('🔊')
+    expect(muteBtn).toHaveStyle('minWidth: 44px')
+    expect(muteBtn).toHaveStyle('minHeight: 44px')
+  })
+})

client/src/__tests__/GeneratedReplay.test.tsx

@@ -0,0 +1,213 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import GeneratedReplay from '../pages/GeneratedReplay.tsx'
+
+const { mockNavigate, mockParams } = vi.hoisted(() => ({
+  mockNavigate: vi.fn(),
+  mockParams: { value: {} as { replayId?: string } },
+}))
+
+const { onMsgCb, sendMessage } = vi.hoisted(() => {
+  let msgCb: ((msg: any) => void) | null = null
+  return {
+    onMsgCb: { get value() { return msgCb }, set value(v) { msgCb = v } },
+    sendMessage: vi.fn(),
+  }
+})
+
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => mockNavigate,
+  useParams: () => mockParams.value,
+}))
+
+vi.mock('../services/socket.ts', () => ({
+  sendMessage: vi.fn((...args: unknown[]) => (sendMessage as any)(...args)),
+  onMessage: vi.fn((cb: any) => { (onMsgCb as any).value = cb; return vi.fn() }),
+}))
+
+vi.mock('../theme.ts', () => ({
+  theme: {
+    bgStr: '#0d1117',
+    text: '#e6edf3',
+    textMuted: '#8b949e',
+    bgPanel: 'rgba(22,27,34,0.92)',
+    border: '#21262d',
+    player1Str: '#58a6ff',
+    player2Str: '#f0883e',
+    error: '#f85149',
+    win: '#3fb950',
+    draw: '#d29922',
+    playing: '#58a6ff',
+    bg: '#0d1117',
+  },
+}))
+
+afterEach(cleanup)
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  onMsgCb.value = null
+  mockParams.value = {}
+})
+
+const catalog = {
+  games: [{
+    source: 'selfplay',
+    id: 'selfplay:test-1',
+    label: 'test-1',
+    batchId: 'selfplay',
+    batchLabel: 'Selfplay',
+    player1: 'mcts_weak',
+    player2: 'random_balanced',
+    winner: 0,
+    result: 'win',
+    moveCount: 5,
+    durationMs: 12,
+    mctsTargetCount: 1,
+    createdAt: '2026-01-01T00:00:00.000Z',
+  }],
+  batches: [{
+    id: 'selfplay',
+    label: 'Selfplay',
+    file: 'selfplay.jsonl',
+    source: 'selfplay',
+    gameCount: 1,
+  }],
+  presets: {
+    random: 'selfplay:test-1',
+    fastest: 'selfplay:test-1',
+    slowest: 'selfplay:test-1',
+    shortest: 'selfplay:test-1',
+    longest: 'selfplay:test-1',
+    mcts: 'selfplay:test-1',
+    draw: null,
+    player1_win: 'selfplay:test-1',
+    player2_win: null,
+  },
+}
+
+const replay = {
+  ...catalog.games[0],
+  rules: { boardSize: 15, swap2: true, noOverlines: true },
+  moves: [
+    { moveNumber: 1, x: 0, y: 0, player: 0, symbol: 'X' },
+    { moveNumber: 2, x: 0, y: 1, player: 1, symbol: 'O' },
+    { moveNumber: 3, x: 1, y: 0, player: 0, symbol: 'X' },
+    { moveNumber: 4, x: 1, y: 1, player: 1, symbol: 'O' },
+    { moveNumber: 5, x: 2, y: 0, player: 0, symbol: 'X' },
+  ],
+}
+
+describe('GeneratedReplay page', () => {
+  it('loads catalog and generated replay over socket', async () => {
+    render(<GeneratedReplay />)
+
+    expect(sendMessage).toHaveBeenCalledWith('GET_GENERATED_REPLAYS')
+    onMsgCb.value?.({ type: 'GENERATED_REPLAYS_DATA', payload: catalog })
+
+    await waitFor(() => expect(sendMessage).toHaveBeenCalledWith('GET_GENERATED_REPLAY', { id: 'selfplay:test-1' }))
+    onMsgCb.value?.({ type: 'GENERATED_REPLAY_DATA', payload: { replay } })
+
+    expect(await screen.findByText('Generated Replays')).toBeInTheDocument()
+    expect(screen.getByText('test-1')).toBeInTheDocument()
+    expect(screen.getByText(/mcts_weak vs random_balanced/)).toBeInTheDocument()
+    expect(screen.getByText(/Selfplay · 1 of 1 games/)).toBeInTheDocument()
+    expect(screen.getByText('One MCTS')).toBeInTheDocument()
+    expect(screen.getAllByTestId('generated-replay-cell')).toHaveLength(225)
+  })
+
+  it('requests the selected batch MCTS replay when the preset is selected', async () => {
+    render(<GeneratedReplay />)
+    onMsgCb.value?.({ type: 'GENERATED_REPLAYS_DATA', payload: catalog })
+    onMsgCb.value?.({ type: 'GENERATED_REPLAY_DATA', payload: { replay } })
+
+    fireEvent.click(await screen.findByText('One MCTS'))
+
+    expect(sendMessage).toHaveBeenCalledWith('GET_GENERATED_REPLAY', { id: 'selfplay:test-1' })
+  })
+
+  it('loads a direct replay id from the route instead of the first catalog game', async () => {
+    mockParams.value = { replayId: 'selfplay-112323-1' }
+    render(<GeneratedReplay />)
+
+    onMsgCb.value?.({ type: 'GENERATED_REPLAYS_DATA', payload: {
+      ...catalog,
+      games: [
+        { ...catalog.games[0], id: 'selfplay:first-game', label: 'first-game' },
+        { ...catalog.games[0], id: 'selfplay:selfplay-112323-1', label: 'selfplay-112323-1' },
+      ],
+    } })
+
+	    expect(sendMessage).toHaveBeenCalledWith('GET_GENERATED_REPLAY', { id: 'selfplay-112323-1' })
+	    expect(sendMessage).not.toHaveBeenCalledWith('GET_GENERATED_REPLAY', { id: 'selfplay:first-game' })
+	  })
+
+  it('opens a batch modal and loads the first replay from the selected batch', async () => {
+    render(<GeneratedReplay />)
+    onMsgCb.value?.({ type: 'GENERATED_REPLAYS_DATA', payload: {
+      ...catalog,
+      batches: [
+        catalog.batches[0],
+        { id: 'analysis-batch', label: 'Analysis Batch', file: 'analysis-batch.jsonl', source: 'selfplay', gameCount: 1 },
+      ],
+      games: [
+        catalog.games[0],
+        {
+          ...catalog.games[0],
+          id: 'selfplay:analysis-batch:test-2',
+          label: 'test-2',
+          batchId: 'analysis-batch',
+          batchLabel: 'Analysis Batch',
+        },
+      ],
+    } })
+    onMsgCb.value?.({ type: 'GENERATED_REPLAY_DATA', payload: { replay } })
+
+    fireEvent.click(await screen.findByText('Batch'))
+    expect(screen.getByRole('dialog', { name: 'Select replay batch' })).toBeInTheDocument()
+    fireEvent.click(screen.getByText('Analysis Batch'))
+
+    expect(sendMessage).toHaveBeenCalledWith('GET_GENERATED_REPLAY', { id: 'selfplay:analysis-batch:test-2' })
+  })
+
+  it('keeps preset buttons scoped to the chosen batch', async () => {
+    render(<GeneratedReplay />)
+    onMsgCb.value?.({ type: 'GENERATED_REPLAYS_DATA', payload: {
+      ...catalog,
+      batches: [
+        catalog.batches[0],
+        { id: 'analysis-batch', label: 'Analysis Batch', file: 'analysis-batch.jsonl', source: 'selfplay', gameCount: 2 },
+      ],
+      games: [
+        catalog.games[0],
+        {
+          ...catalog.games[0],
+          id: 'selfplay:analysis-batch:p1',
+          label: 'p1',
+          batchId: 'analysis-batch',
+          batchLabel: 'Analysis Batch',
+          winner: 0,
+          durationMs: 80,
+          mctsTargetCount: 0,
+        },
+        {
+          ...catalog.games[0],
+          id: 'selfplay:analysis-batch:p2',
+          label: 'p2',
+          batchId: 'analysis-batch',
+          batchLabel: 'Analysis Batch',
+          winner: 1,
+          durationMs: 10,
+          mctsTargetCount: 1,
+        },
+      ],
+    } })
+    onMsgCb.value?.({ type: 'GENERATED_REPLAY_DATA', payload: { replay } })
+
+    fireEvent.click(await screen.findByText('Batch'))
+    fireEvent.click(screen.getByText('Analysis Batch'))
+    fireEvent.click(screen.getByText('P2 Win'))
+
+    expect(sendMessage).toHaveBeenCalledWith('GET_GENERATED_REPLAY', { id: 'selfplay:analysis-batch:p2' })
+  })
+})

client/src/__tests__/Landing.test.tsx

@@ -0,0 +1,200 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, cleanup, fireEvent } from '@testing-library/react'
+import Landing from '../pages/Landing.tsx'
+
+const { mockTheme, mockNavigate } = vi.hoisted(() => ({
+  mockTheme: {
+    bgStr: '#0d1117',
+    text: '#e6edf3',
+    textMuted: '#8b949e',
+    bgPanel: 'rgba(22,27,34,0.92)',
+    border: '#21262d',
+    player1Str: '#58a6ff',
+    player2Str: '#f0883e',
+  },
+  mockNavigate: vi.fn(),
+}))
+
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => mockNavigate,
+}))
+
+const { onMsgCb, onConnCb, sendMessage, getConnectionStatus, onConnectionChange } = vi.hoisted(() => {
+  let msgCb: ((msg: any) => void) | null = null
+  let connCb: ((status: string) => void) | null = null
+  return {
+    onMsgCb: { get value() { return msgCb }, set value(v) { msgCb = v } },
+    onConnCb: { get value() { return connCb }, set value(v) { connCb = v } },
+    sendMessage: vi.fn(),
+    getConnectionStatus: vi.fn(() => 'connected'),
+    onConnectionChange: vi.fn((cb) => { connCb = cb; return vi.fn() }),
+  }
+})
+
+vi.mock('../services/socket.ts', () => ({
+  sendMessage: vi.fn((...args: unknown[]) => (sendMessage as any)(...args)),
+  onMessage: vi.fn((cb: any) => { (onMsgCb as any).value = cb; return vi.fn() }),
+  getConnectionStatus: vi.fn(() => (getConnectionStatus as any)()),
+  onConnectionChange: vi.fn((cb: any) => { (onConnCb as any).value = cb; return vi.fn() }),
+}))
+
+vi.mock('../theme.ts', () => ({
+  theme: mockTheme,
+  THEMES: { midnight: { label: 'Midnight', emoji: '🌙' } },
+  useThemeMode: vi.fn(() => ['midnight', vi.fn()]),
+  getThemeMode: vi.fn(() => 'midnight'),
+  getPlayerName: vi.fn(() => ''),
+  setPlayerName: vi.fn(),
+  getPlayer2Name: vi.fn(() => ''),
+  setPlayer2Name: vi.fn(),
+  getPlayerSymbol: vi.fn(() => 'X'),
+  setPlayerSymbol: vi.fn(),
+}))
+
+vi.mock('../components/ThemeSelector.tsx', () => ({
+  default: () => null,
+}))
+
+vi.mock('../components/SymbolPicker.tsx', () => ({
+  default: () => null,
+}))
+
+afterEach(cleanup)
+beforeEach(() => {
+  localStorage.clear()
+  vi.clearAllMocks()
+  onMsgCb.value = null
+  onConnCb.value = null
+})
+
+describe('Landing page', () => {
+  it('renders the title', () => {
+    render(<Landing />)
+    expect(screen.getByText('Caro5')).toBeInTheDocument()
+  })
+
+  it('renders the subtitle', () => {
+    render(<Landing />)
+    expect(screen.getByText('Infinite tactical board arena')).toBeInTheDocument()
+  })
+
+  it('renders only Player 1 name input initially', () => {
+    render(<Landing />)
+    const inputs = screen.getAllByPlaceholderText('Enter name')
+    expect(inputs).toHaveLength(1)
+  })
+
+  it('renders the start button', () => {
+    render(<Landing />)
+    expect(screen.getByText('Start New Game')).toBeInTheDocument()
+  })
+
+  it('renders theme toggle button with 44px touch targets', () => {
+    render(<Landing />)
+    const btn = screen.getByText('🌙')
+    expect(btn).toBeInTheDocument()
+    expect(btn).toHaveStyle('minWidth: 44px')
+    expect(btn).toHaveStyle('minHeight: 44px')
+  })
+
+  it('has 100dvh height on container', () => {
+    render(<Landing />)
+    const title = screen.getByText('Caro5')
+    const container = title.parentElement!
+    expect(container).toHaveStyle('height: 100dvh')
+  })
+
+  it('uses clamp() for the title font size', () => {
+    render(<Landing />)
+    const title = screen.getByText('Caro5')
+    expect(title).toHaveStyle('fontSize: clamp(2rem, 8vw, 3rem)')
+  })
+
+  it('renders symbol picker button with current symbol', () => {
+    render(<Landing />)
+    const btn = screen.getByText('Symbol: X')
+    expect(btn).toBeInTheDocument()
+    expect(btn).toHaveStyle('minWidth: 44px')
+    expect(btn).toHaveStyle('minHeight: 44px')
+  })
+
+  it('renders Player 1 label but not Player 2 initially', () => {
+    render(<Landing />)
+    expect(screen.getByText('Player 1')).toBeInTheDocument()
+    expect(screen.queryByText('Player 2')).not.toBeInTheDocument()
+  })
+
+  it('renders the local game button', () => {
+    render(<Landing />)
+    expect(screen.getByText('Caro vs Caro (same tab)')).toBeInTheDocument()
+  })
+})
+
+describe('Local game button', () => {
+  it('navigates to /local-setup on click with rules in state', () => {
+    render(<Landing />)
+    fireEvent.click(screen.getByText('Caro vs Caro (same tab)'))
+    expect(mockNavigate).toHaveBeenCalledTimes(1)
+    expect(mockNavigate).toHaveBeenCalledWith('/local-setup', {
+      state: { rules: { swap2: true, noOverlines: true, boardSize: 15 } }
+    })
+  })
+})
+
+describe('Create-phase state machine', () => {
+  it('starts in idle phase', () => {
+    render(<Landing />)
+    expect(screen.getByText('Start New Game')).toBeInTheDocument()
+    expect(screen.queryByText('Creating...')).not.toBeInTheDocument()
+  })
+
+  it('transitions to creating phase when clicked (already connected)', () => {
+    render(<Landing />)
+    const btn = screen.getByText('Start New Game')
+    fireEvent.click(btn)
+    expect(screen.getByText('Creating...')).toBeInTheDocument()
+    expect(screen.getByText('Creating room...')).toBeInTheDocument()
+    expect(btn).toBeDisabled()
+  })
+
+  it('shows progress bar during create phase', () => {
+    render(<Landing />)
+    fireEvent.click(screen.getByText('Start New Game'))
+    expect(screen.getByText('Creating room...')).toBeInTheDocument()
+  })
+
+  it('sends CREATE_ROOM on click', () => {
+    render(<Landing />)
+    fireEvent.click(screen.getByText('Start New Game'))
+    expect(sendMessage).toHaveBeenCalledWith('CREATE_ROOM', {
+      playerName: 'Player',
+      symbol: 'X',
+      rules: { swap2: true, noOverlines: true, boardSize: 15 },
+    })
+  })
+
+  it('transitions to navigating when ROOM_CREATED received', async () => {
+    render(<Landing />)
+    fireEvent.click(screen.getByText('Start New Game'))
+    expect(onMsgCb.value).toBeDefined()
+    onMsgCb.value({ type: 'ROOM_CREATED', payload: { roomId: 'abc123' } })
+    await screen.findByText('Starting game...')
+  })
+
+  it('navigates to room on ROOM_CREATED message', () => {
+    render(<Landing />)
+    fireEvent.click(screen.getByText('Start New Game'))
+    onMsgCb.value({ type: 'ROOM_CREATED', payload: { roomId: 'abc123' } })
+    expect(mockNavigate).toHaveBeenCalledWith('/play/abc123')
+  })
+
+  it('transitions from connecting to creating when connection established', async () => {
+    getConnectionStatus.mockReturnValue('disconnected')
+    render(<Landing />)
+    fireEvent.click(screen.getByText('Start New Game'))
+    expect(screen.getByText('Connecting to server...')).toBeInTheDocument()
+    expect(onConnCb.value).toBeDefined()
+    onConnCb.value('connected')
+    await screen.findByText('Creating room...')
+  })
+})

client/src/__tests__/SymbolPicker.test.tsx

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, cleanup, fireEvent } from '@testing-library/react'
+import SymbolPicker from '../components/SymbolPicker.tsx'
+
+const { mockTheme } = vi.hoisted(() => ({
+  mockTheme: {
+    bgStr: '#0d1117',
+    text: '#e6edf3',
+    textMuted: '#8b949e',
+    bgPanel: 'rgba(22,27,34,0.92)',
+    border: '#21262d',
+    player1Str: '#58a6ff',
+  },
+}))
+
+vi.mock('../theme.ts', () => ({
+  theme: mockTheme,
+}))
+
+afterEach(cleanup)
+
+describe('SymbolPicker', () => {
+  it('renders the title', () => {
+    render(<SymbolPicker current="X" onSelect={vi.fn()} onClose={vi.fn()} />)
+    expect(screen.getByText('Choose Your Symbol')).toBeInTheDocument()
+  })
+
+  it('renders all four category tabs', () => {
+    render(<SymbolPicker current="X" onSelect={vi.fn()} onClose={vi.fn()} />)
+    expect(screen.getByText('Classic')).toBeInTheDocument()
+    expect(screen.getByText('Hearts')).toBeInTheDocument()
+    expect(screen.getByText('Emojis')).toBeInTheDocument()
+    expect(screen.getByText('Letters')).toBeInTheDocument()
+  })
+
+  it('shows classic symbols by default', () => {
+    render(<SymbolPicker current="X" onSelect={vi.fn()} onClose={vi.fn()} />)
+    expect(screen.getByText('X')).toBeInTheDocument()
+    expect(screen.getByText('O')).toBeInTheDocument()
+    expect(screen.getByText('♥')).toBeInTheDocument()
+  })
+
+  it('switches to hearts category when tab clicked', () => {
+    render(<SymbolPicker current="X" onSelect={vi.fn()} onClose={vi.fn()} />)
+    fireEvent.click(screen.getByText('Hearts'))
+    expect(screen.getByText('❤️')).toBeInTheDocument()
+    expect(screen.getByText('💙')).toBeInTheDocument()
+  })
+
+  it('switches to emojis category when tab clicked', () => {
+    render(<SymbolPicker current="X" onSelect={vi.fn()} onClose={vi.fn()} />)
+    fireEvent.click(screen.getByText('Emojis'))
+    expect(screen.getByText('😀')).toBeInTheDocument()
+    expect(screen.getByText('🚀')).toBeInTheDocument()
+  })
+
+  it('switches to letters category when tab clicked', () => {
+    render(<SymbolPicker current="X" onSelect={vi.fn()} onClose={vi.fn()} />)
+    fireEvent.click(screen.getByText('Letters'))
+    expect(screen.getByText('A')).toBeInTheDocument()
+    expect(screen.getByText('Z')).toBeInTheDocument()
+  })
+
+  it('renders symbol buttons with 48x48 size', () => {
+    render(<SymbolPicker current="X" onSelect={vi.fn()} onClose={vi.fn()} />)
+    const btns = screen.getAllByRole('button')
+    const tabLabels = new Set(['Classic', 'Hearts', 'Emojis', 'Letters'])
+    for (const btn of btns) {
+      if (tabLabels.has(btn.textContent ?? '')) continue
+      expect(btn).toHaveStyle('width: 48px')
+      expect(btn).toHaveStyle('height: 48px')
+    }
+  })
+})

client/src/__tests__/css.test.ts

@@ -0,0 +1,33 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, it, expect } from 'vitest'
+
+const css = readFileSync(resolve(__dirname, '../index.css'), 'utf-8')
+
+describe('fadeIn animation', () => {
+  it('defines @keyframes fadeIn', () => {
+    expect(css).toContain('@keyframes fadeIn')
+  })
+})
+
+describe('touch target rules', () => {
+  it('sets touch-action: manipulation on buttons and inputs', () => {
+    expect(css).toContain('touch-action: manipulation')
+  })
+
+  it('disables tap highlight color', () => {
+    expect(css).toContain('-webkit-tap-highlight-color: transparent')
+  })
+})
+
+describe('scroll behavior', () => {
+  it('disables overscroll-behavior', () => {
+    expect(css).toContain('overscroll-behavior: none')
+  })
+})
+
+describe('mobile height', () => {
+  it('uses -webkit-fill-available as height fallback', () => {
+    expect(css).toContain('-webkit-fill-available')
+  })
+})

client/src/__tests__/html.test.ts

@@ -0,0 +1,40 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, it, expect } from 'vitest'
+
+const html = readFileSync(resolve(__dirname, '../../index.html'), 'utf-8')
+
+function findMeta(name: string): string | null {
+  const match = html.match(new RegExp(`<meta\\s+name="${name}"\\s+content="([^"]*)"`, 'i'))
+  return match?.[1] ?? null
+}
+
+describe('viewport meta', () => {
+  const content = findMeta('viewport')
+
+  it('has viewport meta', () => {
+    expect(content).not.toBeNull()
+  })
+
+  it('has width=device-width', () => {
+    expect(content).toContain('width=device-width')
+  })
+
+  it('has viewport-fit=cover', () => {
+    expect(content).toContain('viewport-fit=cover')
+  })
+
+  it('has user-scalable=no', () => {
+    expect(content).toContain('user-scalable=no')
+  })
+
+  it('has maximum-scale=1.0', () => {
+    expect(content).toContain('maximum-scale=1.0')
+  })
+})
+
+describe('theme-color meta', () => {
+  it('has theme-color meta tag', () => {
+    expect(findMeta('theme-color')).not.toBeNull()
+  })
+})

client/src/__tests__/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'