MineSweeper Crash Game

A crash-style minesweeper game built with React and TypeScript. This is a mini-game where players flip cards to win coins while avoiding mines, with the option to cash out at any time.

Setup Instructions

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser to play.

How to Play

The game is played on a 3x3 grid where each card hides either a win or a mine.

Game Rules

1. Start: Click any card to reveal it
2. Win: 💰 Each successful flip earns you coins
3. Mine: 💣 Hit a mine and lose everything
4. Cash Out: Secure your winnings anytime before hitting a mine

Gameplay Flow

• Player starts with 0 coins
• Each winning card adds coins based on the amountPerWin value
• Player can continue flipping or cash out to keep winnings
• Game ends when hitting a mine or cashing out
• Each new game generates a fresh random board

Project Structure

src/
├── App.tsx              # Main game logic and state management
├── types.ts             # TypeScript type definitions
├── index.css            # Global styles
├── api/
│   └── gameApi.ts      # Simulated API for board generation
└── components/
    ├── Card.tsx         # Individual card with flip animation
    ├── GameBoard.tsx    # 3x3 grid layout
    ├── ScoreBoard.tsx   # Displays coins, per-win amount, and revealed count
    └── GameControls.tsx # Cash out and restart buttons

Technical Implementation

Simulated API

The game uses a simulated API (fetchBoard()) that returns:

type Game = {
  board: { isWinning: boolean }[][];
  amountPerWin: number;
}

Features:

• Random 3x3 board generation
• 1-3 mines placed randomly per game
• Random coin value (10-50) per win
• Simulated network delay (500-1000ms)

State Management

• React hooks for state (useState, useEffect)
• Game states: PLAYING, WON, LOST
• Real-time score tracking
• Card reveal tracking

UI/UX Features

• Responsive Design: Works on mobile and desktop
• Smooth Animations: Card flips, win pulse, lose shake
• Visual Feedback: Clear distinction between hidden, winning, and losing cards
• Dark Theme: Casino-style design with purple and gold accents

Tech Stack

• Framework: React 18
• Language: TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite
• Package Manager: npm

Testing

The project includes E2E tests using Playwright to ensure the game works correctly.

# Run E2E tests
npm run test:e2e

# Run tests with UI (interactive mode)
npm run test:e2e:ui

Note: Before running tests for the first time, install Playwright browsers:

npx playwright install chromium

Test Coverage

• Game loads correctly with 3x3 grid
• Cards can be clicked and revealed
• Win detection and coin accumulation
• Lose detection and game over state
• Cash out functionality
• Game restart functionality
• UI instructions display

Build for Production

# Build optimized production bundle
npm run build

# Preview production build locally
npm run preview

The build output will be in the dist/ directory.

Requirements Checklist

✅ 3x3 grid layout
✅ Game initialization with simulated API
✅ Card flip mechanics
✅ Win/lose detection
✅ Score tracking and display
✅ Cash-out functionality
✅ Game restart option
✅ Responsive design for all devices
✅ Smooth animations and transitions