Welcome back! In the previous blog post, you drew the game board and made the game playable by clicking on the board columns. In this post, you'll be adding the status area component to your four-in-a-row game.
Breaking Down The Status Area Component#
Let's refer back to the mockup of the finished game:
The status area is at the top. It's broken down into 2 parts:
- Player Turn Indicator: Indicates the current player's turn by showing the associated player's colour.
- Status Message: Describes what is happening at each stage of the game (whose turn is it? Which player won? etc.)
Together they inform players and spectators about what is happening in the game.
Creating The StatusArea Class#
To get started, create a file under the
src/components directory called
In the file that you've just created, create an empty class called
StatusArea. This class will inherit
Player Turn Indicator#
The player turn indicator is a small circle that appears in the status area. It may have either of these states:
- Yellow - Has a yellow colour when it's the yellow player's turn or the yellow player has won the game.
- Red - Has a red colour when it's the red player's turn or the red player has won the game.
- Invisible - The indicator is not visible when the game ends in a draw.
Now that you know how the player turn indicator behaves, the next step for you is to add it to your game.
Start Drawing The Player Turn Indicator#
To start off, import the
Constants object from the
gameLogic directory as well as
TokenColor from the
; ; ;
renderPlayerTurnIndicator() to the
render() to the
Before continuing any further, you need to expose the
StatusArea class as a module through the
; ; ;
Now what you've implemented the rendering logic of the player turn indicator and exposed the
StatusArea class through the
components directory, you are now ready to start rendering the player turn indicator.
Render Player Turn Indicator#
; ; ;
Next, add the
statusArea field to the
createStatusArea() to the
statusArea to a new status area returned from
determineIndicatorColor() to the
processMoveResult() so that it also determines the next player's turn and passes in the colour of the next player to a call to the
render() method on
createBoard(), update the call to the
Board constructor so that the board when the game board is rendered, it's shifted down below the status area:
If you check the game in your browser while a server is running, you'll see the indicator colour being rendered.
It'll update based on the current state of the game.
The status message is the text portion of the status area.
It is used to:
- Display the current player's turn
- Reveal which player has won a game
- Shows when a game ends in a draw
Start Implementing Status Messages#
renderMessage() method to the
Proceed by adding the
message parameter to the
render() method then calling
Once you've done that, switch back to the
src/FrontEnd.js file. Import
StatusMessages from the
; ; ;
Now, add logic that determines which status message to display depending on the current state of the game. Add
pickStatusMessage() to the
Then in the
processMoveResult() method, update the
render() call on
statusArea so that it has an additional argument passed in. This argument is a method call to
pickStatusMessage() with the status value of
moveResult passed in:
Lastly, repeat this same change in
createStatusArea() except that the argument passed in to
pickStatusMessage() will be the game's current status:
If you check the game in your browser with a server running, you'll see that the status area will always reflect the current status of the game:
- The player turn indicator will appear in states regarding a specific player
- The status message will describe the current state of the game
Congratulations on getting this far! It's now clear to understand what is happening during gameplay.
Unfortunately, when the game ends, there's no way to start a new game without refreshing the page.
In the next (and final) part of this tutorial, you'll solve this problem by adding the final component to the game, the play again button.