Initialize ConnectX: game engine, React UI, bot AI, state management, CI

[Copilot]

Bootstraps the full ConnectX application from the existing spec documents. Sets up the project infrastructure and implements the Phase 1 MVP: local play with configurable Connect N, multi-round matches, and bot opponents.

Game Engine (src/engine/)

• Board operations: creation, gravity-based piece drops, move validation, fullboard-mode blocked cells
• Win detection: 4-direction scan (horizontal, vertical, both diagonals) for Connect 4/5/6, winning cell identification for UI highlighting
• Bot AI: three tiers — random w/ heuristics (easy), rule-based with center preference + 1-step lookahead (medium), minimax with alpha-beta pruning at depth 6 (hard)

State Management (src/store/gameStore.ts)

• Zustand store managing full game lifecycle: menu → lobby → playing → roundEnd → matchEnd
• Classic and fullboard modes, multi-round scoring, automatic bot turn scheduling

React UI (src/components/)

• Menu, Lobby (game config), and Game screens
• Interactive board with ARIA labels, keyboard support, winning cell glow
• Pastel bubble gum + soft brutalism theme per spec-visual-design.md

Infrastructure

• Vite + React 19 + TypeScript 5.9
• ESLint 9 flat config, Vitest with 36 unit tests
• GitHub Actions CI: lint → type-check/build → test

// Pure engine — no framework dependencies
import { createBoard, dropPiece, checkWinAtPosition } from './engine';

const board = createBoard({ rows: 6, cols: 7, connectN: 4 });
const result = dropPiece(board, 3, /*player*/ 1);
const winner = checkWinAtPosition(result.board, result.row, 3, 4);

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.