https://github.com/0mppula/minesweeper
React & TypeScript Minesweeper game.
https://github.com/0mppula/minesweeper
Last synced: 9 months ago
JSON representation
React & TypeScript Minesweeper game.
- Host: GitHub
- URL: https://github.com/0mppula/minesweeper
- Owner: 0mppula
- Created: 2025-09-12T11:10:27.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-09-12T11:27:57.000Z (9 months ago)
- Last Synced: 2025-09-12T13:25:49.902Z (9 months ago)
- Language: TypeScript
- Homepage: https://minesweeper-seven-coral.vercel.app
- Size: 51.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Minesweeper (React + TypeScript)
A classic **Minesweeper game** built with **React**, **TypeScript**, and **TailwindCSS**.
This project is a modern web-based version of Minesweeper where you can flag mines, reveal cells, and race against the timer to win.
---
## Features
- Built with **React + TypeScript** for type safety
- Styled with **TailwindCSS + shadcn/ui**
- Built-in timer and mine counter
- Right-click to flag suspected mines
- Win/Lose game states with UI feedback
---
## Installation & Setup
### 1. Clone the repository
```bash
git clone https://github.com/YOUR_USERNAME/minesweeper.git
cd minesweeper
```
### 2. Install dependencies
```bash
npm install
```
### 3. Run the development server
```bash
npm run dev
```
The app will be available at http://localhost:5173
---
## How to Play
### Start the game
Click **Start** to begin, or it will automatically start when you reveal your first cell.
### Revealing cells
- **Left-click** on a cell to reveal it.
- If the cell contains:
- A **number** → it shows how many mines are in the 8 surrounding cells.
- **Empty** → adjacent empty cells will also open automatically.
- A **mine** → you lose the game.
### Placing flags
- **Right-click** a cell to place or remove a flag (marking where you think a mine is).
- The counter at the top shows remaining unflagged mines.
### Winning the game
You win if **all non-mine cells are revealed** OR **all mines are correctly flagged**.
### Restarting
Click **Restart** to start a new game anytime.
---
## Tech Stack
- **React 18**
- **TypeScript**
- **Vite**
- **TailwindCSS**
- **shadcn/ui**
- **lucide-react** (icons)
---
## Project Structure (key parts)
```bash
src/
components/
├── Board.tsx # Game board grid
├── Cell.tsx # Individual cell logic & rendering
├── Header.tsx # Timer, mine counter, start/restart controls
hooks/
└── useGame.ts # Game logic (state, clicks, win/lose detection)
utils/
└── index.ts # Board initialization & helper functions
types/
└── index.ts # TypeScript types (Cell, Board, GameStatus, etc.)
App.tsx # Entry point
```
---
## License
This project is open source under the **MIT License**.