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 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

  • Create a new game when the page loads, and render it on the screen
  • 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.

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).

Additional Resources