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 have never played it.
- 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
Read over the documentation for the API we will be using:
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. Consider using
grid, or an old-fashioned
table to organize these.
Here is an example implementation of this assignment:
degit $GITHUB_USER/react-project-template Minesweeper
- React Mouse Events
- Brief, but good article on using two-dimensional-arrays in React
- Use Insomnia to test out the API. Try "playing" games with the API. This will help you understand the "flow" of the game via the API.
- Create a button to create a new game. Use the animated gif above as a user interface guide. Do at least that much, but also feel free to have fun.
- Style the cells appropriately.
- Left-clicking a cell performs the
- Right/secondary clicking a cell performs the
- When the game status changed to
losta victory or failure message - Do not use
alertfor this. Update the user interface.
- Before creating the game, allow the user to choose: Easy, Medium, or Hard mode.
- Have fun with the styling. Make it your own.
- Learn how to use
localStorageAPI to store data in the browser. Use this to allow the user to close the browser window and come back to a game already in progress.
- Add sound effects.