💣 Minefield Game — Next.js + TypeScript + TailwindCSS

A modern, responsive Minesweeper-style Minefield Game built with Next.js App Router, TypeScript, and TailwindCSS v4.

This project focuses on clean game logic, a polished glass-style UI and mobile-friendly controls (long-press to place flags).

🔗 Live Demo: https://mine-tarlasi.vercel.app

---

🚀 Features

• ⚡ Next.js 16 App Router architecture (app/layout.tsx & app/page.tsx)
• 🧩 Fully typed TypeScript codebase
• 🎨 Modern UI with glass / gradient panels using TailwindCSS v4
• 📱 Mobile friendly: long-press on a cell to place / remove a flag
• ⏱️ Live in‑game timer
• 💣 3 difficulty presets:
  • 8 × 8 • 10 mines
  • 16 × 16 • 40 mines
  • 30 × 16 • 99 mines
• ✅ First click is always safe
• 🔁 Flood‑fill opening for empty regions (classic Minesweeper feel)
• 🔐 Cannot place more flags than the total mine count
• 🧮 Live statistics:
  • Remaining mines
  • Placed flags
  • Game status (Idle, Playing, Paused, Game Over, Victory)
• 🎉 End game modal with summary (time, mines, flags) and Play Again button
• 🧱 Feature‑based architecture:
  • GameScreen
  • GameHeader
  • GameBoard
  • GameEndModal
  • GameFooter
  • useGame custom hook

---

🛠️ Tech Stack

Layer	Technology
Framework	Next.js 16
Language	TypeScript
Styling	TailwindCSS
State	React Context + custom hooks
Router	App Router
Hosting	Vercel or custom server
Other	React 19.2.1, React Icons 5.5.0, clsx 2.1.1

---

📦 Installation

Clone the repository:

git clone https://github.com/slipbey/minefield.git
cd minefield

Install dependencies:

npm install
# or
yarn install

Run development server:

npm run dev

Then open:

http://localhost:3000

---

🎮 How to Play

1. Choose a difficulty from the Zorluk section (8×8 / 16×16 / 30×16).
2. Click on any cell to reveal it. The first click is always safe.
3. Numbers show how many mines are touching that cell.
4. Right‑click (desktop) or long‑press (mobile) to place or remove a flag.
5. You cannot place more flags than the total number of mines.
6. If you click on a mine, all mines are revealed and the game is lost.
7. If you open all safe cells, you win and see the Victory modal with your time.

---

📁 Project Structure

src/
 ├── app/
 │   ├── globals.css
 │   ├── layout.tsx
 │   └── page.tsx
 └── features/
     └── game/
         ├── components/
         │   ├── GameBoard.tsx
         │   ├── GameEndModal.tsx
         │   ├── GameFooter.tsx
         │   ├── GameHeader.tsx
         │   └── GameScreen.tsx
         └── hooks/
             └── useGame.ts
public/
 └── screenshot.png

You can adapt the folders to your own feature‑based structure if needed.

---

📸 Preview

---

📄 License

GPL-3.0 license © 2025 — Created by Slipbey
Feel free to use, modify, and distribute with attribution.

---

👨‍💻 Author

SlipBey
Discord • LinkedIn • Website