Minesweeper

In this assignment, you will communicate with a back-end API server to create the user-interface for a Minesweeper clone. It might help to familiarize yourself with the game if you've never played it.

Objectives

Understand how state drives changes to an interface in React
Respond to user events in React
Understand and use REST APIs
Use React lifecycle methods
Understand and interpret API documentation
Use fetch or axios to perform POST request or

Requirements

Read over the documentation for the API we'll be using:

https://minesweeper-api.herokuapp.com/

You will need to interpret the response and render a graphical user interface. The API results include an array of arrays (two-dimensional array), these represent rows and columns. These are probably best translated into table rows (<tr>) and table data (<td>) cells.

Here's an example implementation of this assignment:

Explorer Mode

[ ] Create a new game when the page loads, and render it on the screen, this look as close to gif as possible.
[ ] Style the cells appropriately.
[ ] Left clicking a cell performs the check action
[ ] Right/secondary clicking a cell performs the flag action
[ ] When the game status changed to won or lost, show a victory or failure message.

Adventure Mode

[ ] Before creating the game, prompt the user to choose: Easy, Medium, or Hard mode.
[ ] Have fun with the styling, make it your own

Epic Mode

[ ] Render your victory/failure message as it's own "screen".
[ ] On that screen add a button to restart or play again.
[ ] Store the current game id in localStorage, and render the same game, rather than creating a new one every time (until the player presses the restart button).
[ ] Add sound effects.

Additional Resources

[ ] React Mouse Events

Implemented Explorer Mode, Adventure Mode and some of Epic Mode:

Did not use HTML-table to arrange tiles, but instead flexbox by ensuring minefield container is always square, no matter what browser's dimensions are.
Player chooses difficulty by drop-down menu (selection box).
Game (id) is stored in local storage and previous game - if it exists - automatically preloaded on page load.
Font-size on tiles is dependent on browser width, so it's somewhat responsive, but without media queries.
Fontawesome icons (bomb and flag) are "pre-loaded" by including them with zero opacity next to selection box. This way there is no load delay when setting flag or showing bomb for the first time.
Game won/lost is shown at end of game above minefield on right with blinking effect to get user's attention.

https://github.com/Schnorschel/minesweeper https://minesweeper-schorschi.netlify.com

Schnorschel / assignments

week 04 - day 04 - minesweeper - #15