week 04 - day 04 - minesweeper

[mdewey]

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

[wmurch]

https://github.com/wmurch/mind-sweeper

I am still working this

[mdewey]

I would like to see

• lift click event working
• right click event working

[mdewey]

but that is a great start!