Description
A good application is a working application, so let's get ours to work! We'll start with the fundamental parts: the cells. The player should be able to open any cell by clicking it, or flag it with a right-click. To make this possible, you need to add a state. Store the array that contains information about the field; make a function for creating an initial array with the placed mines. Remember that each time, the game field should be different, that is, the function should place mines at random.
Reminder: not only one component can have a state, so think about every piece of data and which component is responsible for it.
Then, you need to take care of conditional rendering because you need to distinguish between the cells with different statuses. Understand how to handle events, and do it for opening and flagging cells. To show these changes, you should have styles for the closed, opened, and flagged cells. Add contrasting borders or change the background color for the opened cells, and mark the flagged cells with a flag/mine image. Here, you can apply your knowledge about box-shadow!
If you change the cell status, the state of the field should be changed, too; implement the methods that will do it! You can use passing functions to components here and read about execution context in JavaScript.
For testing purposes, each cell should have className=”cell”. In case you need to use another className, you should concatenate it with the required one, for example: className=”cell fired”.
Your intermediate solution can be compiled and run in a browser using the npm start command in the WebStorm terminal, to stop the server use Ctrl+C.
Objectives
- State to store the situation on the field
- Functions to set the initial field and change it
- Conditional rendering of cells
- Event listeners for cells
- Add required CSS
Examples
In a browser, the result of this step will look something like this:
