Getting Started

This guide will help you set up MindGames for local development.

Prerequisites

• Node.js 18+
• npm or yarn
• Git

Installation

1. Clone the Repository

git clone https://github.com/zeroleaf/MindGames.git
cd MindGames

2. Install Dependencies

npm install

3. Start Development Server

npm run dev

The app will be available at http://localhost:3000.

Project Structure

MindGames/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Root layout with providers
│   │   ├── page.tsx        # Main game page
│   │   └── globals.css     # Global styles + Tailwind
│   ├── components/
│   │   ├── ChainDisplay.tsx      # Problem chain UI
│   │   ├── OperationMixSlider.tsx # Mix configuration
│   │   └── Timer.tsx             # Countdown timer
│   ├── contexts/
│   │   ├── GameContext.tsx  # Game state management
│   │   └── ThemeContext.tsx # Dark/light theme
│   ├── lib/
│   │   └── problem-generator.ts # Core generation logic
│   └── types/
│       └── index.ts         # TypeScript definitions
├── __tests__/               # Test files
├── jest.config.js           # Jest configuration
├── tailwind.config.ts       # Tailwind configuration
└── package.json

Available Scripts

Script	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint
npm test	Run Jest tests
npm run test:watch	Run tests in watch mode
npm run test:coverage	Run tests with coverage report

Configuration

Game Configuration

Default configuration is defined in src/types/index.ts:

export const DEFAULT_CONFIG: GameConfig = {
  maxResult: 100,           // Maximum result value
  chainLength: 6,           // Problems per chain
  chainCount: 5,            // Number of chains
  timeLimit: 0,             // Seconds (0 = no limit)
  operationMix: {
    add: 40,
    subtract: 40,
    multiply: 10,
    divide: 10,
  },
  allowNegativeResults: false,
};

Tailwind Theme

Custom colors are defined in tailwind.config.ts:

colors: {
  primary: {
    // Indigo color scale
    500: '#6366f1',
    // ...
  },
  accent: {
    // Violet color scale
    500: '#8b5cf6',
    // ...
  },
}

Usage Guide

Basic Flow

1. Configure Settings - Adjust operation mix and other settings
2. Generate Worksheet - Click "Generate" to create problem chains
3. Start Session - Click "Start" to begin timed practice
4. Solve Problems - Enter answers and press Tab/Enter to submit
5. Review Results - See score and accuracy when complete

Keyboard Navigation

Key	Action
Tab	Submit current answer and move to next
Enter	Submit current answer and move to next
Number keys	Enter answer

Profile Modes

Kid Mode:

• Encouraging messages after each chain
• Confetti celebration when all chains complete
• Fun, motivating language

Adult Mode:

• Clean, professional interface
• Focus on metrics and accuracy
• No animations or celebrations

Next Steps

• Architecture - Learn about technical decisions
• Testing - Understand the test suite