Modern Full-Stack Development

 Game State Messages
While the scores are always present, the messages that can appear below them are not, 
and they change. So, we’re going to use some conditional rendering again as you saw in 
MailBag, and the first message that may be shown is what you see when you’re waiting 
for an opponent to join:
{ state.gameState === "awaitingOpponent" &&
  

    textAlign:"center" }}>Waiting for opponent to join

}
As I’m sure you’ve surmised, the gameState property of the state object tells us what 
state the game is in. We can be waiting for an opponent, actually playing, waiting for the 
game to end because our board has dead-ended or has been cleared, and the game can 
be over. The first state is when we’re waiting for an opponent, so appropriate verbiage is 
shown, as you can see.
When the board is dead-ended, we again show a suitable message:
{ state.gameState === "deadEnd" &&
  

    textAlign:"center" }}>
    You have no moves left.
    
    Waiting for opponent to finish.
  

}
Similarly, when the board has been cleared, we congratulate the player, because 
that’s super cool of them:
{ state.gameState === "cleared" &&
  

Chapter 11   time for fun: BattleJong, the Client

---

319
    textAlign:"center" }}>
    Congratulations!
    
    You've cleared the board!
Waiting for opponent
    to finish.
  

}
Finally, when the game is over, we tell them that, along with who the winner was, as 
determined by the server:
{ state.gameState === "gameOver" &&
  

    textAlign:"center" }}>
    The game is over.
    
    { state.gameOutcome }
  

}
Like I said, this isn’t a tough component, not much in it. But the next one is where 
most of the action is, naturally enough, since it’s where the game is played!