Refactor: Extract game types, board ops, and UI components

[sebryu]

Summary

This PR refactors the codebase to improve modularity and maintainability by extracting shared types, constants, board operations, and UI components into dedicated modules. Game logic remains unchanged; this is purely a structural reorganization.

Type of Change

• Game logic change (refactored into separate modules)
• Board rendering change (extracted BoardCell and BoardLines)
• Screen / UI change (extracted WinModal, MiniBoard, tutorialData)
• Utility change (new boardLayout.ts, theme.ts)
• Config / tooling change (new module structure)

---

Changes Overview

New Modules Created

1. src/engine/types.ts — Centralized type definitions

   • Piece, Turn, Phase, Position, GameMode, Difficulty
   • GameConfig, GameMove, GameState

2. src/engine/constants.ts — Game constants

   • BOARD_SIZE = 5, TOTAL_SHEEP = 20, SHEEP_TO_WIN = 5

3. src/engine/boardOps.ts — Board utility functions

   • isInBounds(), hasDiagonals(), getNeighbors(), getCaptureTargets(), getValidMovesForPiece()

4. src/theme.ts — Centralized color palette

   • Replaces hardcoded hex values throughout components

5. src/utils/boardLayout.ts — Shared board layout calculations

   • BOARD_WIDTH, CELL_SIZE, PIECE_SIZE, DOT_SIZE, MINI_BOARD_WIDTH, MINI_CELL, etc.
   • hasDiag() helper function

6. src/components/BoardCell.tsx — Extracted cell component

   • Piece rendering, selection pulse, capture flash, valid move indicator
   • Previously inline in Board.tsx

7. src/components/BoardLines.tsx — Extracted board lines component

   • Horizontal, vertical, and diagonal line rendering
   • Previously inline in Board.tsx

8. src/components/WinModal.tsx — Extracted win modal

   • Win screen UI with piece display, title, subtitle, and action buttons
   • Previously inline in GameScreen.tsx

9. src/components/MiniBoard.tsx — Extracted mini board component

   • Tutorial board with animations, piece placement, and movement
   • Previously inline in TutorialScreen.tsx

10. src/components/tutorialData.ts — Tutorial step definitions

    • TutorialStepData, PiecePlacement, AnimStep interfaces
    • STEPS array with all 7 tutorial steps
    • Previously inline in TutorialScreen.tsx

11. src/hooks/useGameEvents.ts — Game event detection hook

    • Detects win, phase change, capture, selection, and move events
    • Triggers haptics, sounds, and animations
    • Previously inline in GameScreen.tsx

12. src/hooks/useAIPlayer.ts — AI player orchestration hook

    • Manages AI turn detection, move computation, and state updates
    • Drives "thinking" pulse animation
    • Previously inline in GameScreen.tsx

Modified Files

• src/engine/gameEngine.ts — Now re-exports types and functions from new modules for backward compatibility
• src/components/TutorialScreen.tsx — Imports STEPS from tutorialData.ts, MiniBoard from MiniBoard.tsx
• src/components/GameScreen.tsx — Imports WinModal, useGameEvents, useAIPlayer, colors
• src/components/Board.tsx — Imports BoardCell, BoardLines, uses boardLayout.ts constants

https://claude.ai/code/session_01CfaghKuVR5AAttkwx96CgH

[cursor]

PR Summary

Medium Risk
Mostly a structural refactor, but it touches core engine exports and move-generation helpers; mistakes could subtly change rules, AI behavior, or UI interactions without obvious compile errors.

Overview
Refactors the codebase for modularity by splitting engine definitions into engine/types.ts, engine/constants.ts, and engine/boardOps.ts, updating gameEngine.ts/aiEngine.ts to consume these modules, and re-exporting from gameEngine.ts for backward compatibility.

Extracts UI and side-effect logic into dedicated modules: BoardCell/BoardLines are pulled out of Board, win overlay is moved to WinModal, and tutorial step data + animated mini-board are moved to tutorialData.ts and MiniBoard.

Introduces reusable hooks and shared styling utilities by moving game event side effects to useGameEvents, AI turn orchestration to useAIPlayer, and centralizing layout constants (utils/boardLayout.ts) and colors (theme.ts), with screens updated to use the new imports.

^{Written by Cursor Bugbot for commit 48736f7. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[cursor]

Tutorial highlighted cell opacity changed during refactoring

Low Severity

The tutorial mini board's highlighted cell backgroundColor was originally 'rgba(76, 175, 80, 0.4)' but now uses colors.validMove which is 'rgba(76, 175, 80, 0.5)'. The original tutorial intentionally used a more transparent green (0.4 alpha) than the main board's valid move indicator (0.5 alpha), but the refactoring consolidated both to the same colors.validMove value, losing the distinction.

Additional Locations (1)

• src/theme.ts#L42-L43