Getting Started

This guide covers installation, project structure, configuration, and basic usage of MindGames.

Prerequisites

Before you begin, ensure you have the following installed:

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 application 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 visualization
│   │   ├── OperationMixSlider.tsx  # Mix configuration UI
│   │   └── Timer.tsx           # Countdown timer component
│   ├── contexts/
│   │   ├── GameContext.tsx     # Game state management
│   │   └── ThemeContext.tsx    # Dark/light theme toggle
│   ├── lib/
│   │   └── problem-generator.ts  # Core generation algorithm
│   └── types/
│       └── index.ts            # TypeScript definitions
├── __tests__/                  # Test files
├── jest.config.js              # Jest configuration
├── tailwind.config.ts          # Tailwind configuration
└── package.json

Key Files Explained

Available Scripts

Configuration

Game Configuration

Default game settings are 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 per worksheet
  timeLimit: 0,             // Seconds (0 = no time limit)
  operationMix: {
    add: 40,                // 40% addition
    subtract: 40,           // 40% subtraction
    multiply: 10,           // 10% multiplication
    divide: 10,             // 10% division
  },
  allowNegativeResults: false,
};

Tailwind Theme Colors

Custom colors are configured in tailwind.config.ts:

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

Usage Guide

Basic Workflow

1. Configure Settings - Adjust operation mix, chain length, and time limit in the sidebar
2. Generate Worksheet - Click "Generate" to create a new set of problem chains
3. Start Session - Click "Start" to begin timed practice (optional)
4. Solve Problems - Enter answers in the input fields
5. Submit Answers - Press Tab or Enter to submit and move to the next problem
6. Review Results - See your score and accuracy when complete

Keyboard Shortcuts

Profile Modes

Select your profile mode from the settings:

• Kid Mode: Encouraging messages, confetti celebrations, fun language
• Adult Mode: Clean interface, focus on metrics and accuracy

Next Steps