sb2bg / next-minesweeper

Minesweeper game made using Next.js

Minesweeper

This is a simple project of a classic minesweeper game used to show the power and ease of use of Next.js. You can make changes to the project, or play the game if you'd like. If you want to learn more, see the Demo section.

Demo

The game has the rules of regular minesweeper. Currently there is only an easy board (10x8), but in the future medium and hard boards will be available. It is also currently not mobile friendly.

You can play the game here.

Cloning the Repo

To clone the project, run the following command into the desired folder

git clone https://github.com/sb2bg/next-minesweeper

See Getting Started for instructions on how to run the server

Getting Started

To start the development server, first, you must cd into the project folder. Then, you can run either of the following commands

npm run dev
# or
yarn dev

Once thats done, to view the webpage, open localhost:3000 to play the game or help debug your changes.

next-minesweeper's Issues

Add new modes

Medium and expert should be added

Doesn't scale well on small screens

Make it so small screens can play too! Add a way for mobile users to add flags eventually as well

Fix flag break

When flood filling and flag gets removed, add it back to bank

Prettier pre-commit hook

Setup a prettier pre-commit hook so when working from devices without prettier formatting stays the same.

Remove setTimeout

next-minesweeper/components/Minesweeper.tsx

Line 95 in 7716dd1

setTimeout(() => setGame(generateGame(width, height, bombs)), 10); // timeout (only 10ms) to prevent the answers to the next generated board being able to be seen

Try replacing this line of code something more sound such as useEffect