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 to perform POST request
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
[x] Create a new game when the page loads, and render it on the screen
[x] Style the cells appropriately.
[x] Left clicking a cell performs the check action
[x] Right/secondary clicking a cell performs the flag action
[x] When the game status changed to won or lost, show a victory or failure message.
Adventure Mode
[x] Before creating the game, prompt the user to choose: Easy, Medium, or Hard mode.
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).
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
fetch
to performPOST
requestRequirements
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
check
actionflag
actionwon
orlost
, show a victory or failure message.Adventure Mode
Epic Mode
localStorage
, and render the same game, rather than creating a new one every time (until the player presses the restart button).Additional Resources