Skip to content

CLAUDE.md

Latest commit

 

History

History
51 lines (35 loc) · 2.08 KB

CLAUDE.md

File metadata and controls

51 lines (35 loc) · 2.08 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Development Commands

  • Start development server: npm run dev
  • Build for production: npm run build
  • Lint code: npm run lint
  • Preview production build: npm run preview

Project Architecture

This is a React-based Minesweeper game built with Vite. The application follows a component-based architecture with clear separation of concerns:

Core Structure

  • Entry Point: src/main.jsx renders the App component
  • Main App: src/App.jsx contains the root Minesweeper component
  • Game Logic: src/utils/gameLogic.js contains all pure functions for game mechanics
  • Components: src/components/ contains UI components with co-located CSS files

Key Components

  • Minesweeper.jsx: Main game container managing state and game flow
  • GameHeader.jsx: Header with timer, mine counter, difficulty selector, and reset button
  • GameBoard.jsx: Grid container that renders the game board using CSS Grid
  • Cell.jsx: Individual cell component handling click events and visual states

Game Logic Architecture

The game logic is separated into pure functions in gameLogic.js:

  • State Management: Uses constants for CELL_STATES, GAME_STATES, and DIFFICULTIES
  • Board Operations: Functions for creating board, placing mines, revealing cells
  • Game Flow: Win/lose detection, flag management, mine placement on first click
  • Immutable Updates: All functions return new board states rather than mutating

Styling Architecture

Each component has a co-located CSS file following the pattern ComponentName.css. The game uses:

  • CSS Grid for board layout with dynamic columns/rows
  • CSS classes for cell states (hidden, revealed, flagged, mine)
  • Number-specific classes (number-1 through number-8) for mine count styling

ESLint Configuration

The project uses modern ESLint configuration with:

  • React Hooks rules
  • React Refresh plugin for Vite
  • Custom rule allowing unused vars with uppercase pattern (for constants)