Modern Full-Stack Development

 Message Handler Methods
After the properties are defined, we find a series of simple methods, the ones called 
from the socketComm code in response to the messages that can be sent by the server, 
beginning with the handler function for the connected message:
handleMessage_connected : function(inPID: string) {
  this.setState({ pid : inPID });
}.bind(inParentComponent),
All we need to do when this message is received is store the player ID sent to the 
client in state, so that one is very easy.
The next handler is for the start message, send when the second player connects to 
the server, and the game begins:
handleMessage_start: function(inLayout: number[][][]) {
  this.setState({
    timeSinceLastMatch : new Date().getTime(),
    layout : inLayout,
    gameState : "playing"
  });
}.bind(inParentComponent),
We need an initial time so that we can determine how long it takes to match the first tile 
pair. Of course, we need to store the layout sent from the server too. Finally, the gameState 
needs to transition to the playing state. The result of this all being set in state is that the 
board will now appear, with the shuffle done by the server showing the appropriate tiles, as a 
result of React seeing the change in state and the PlayerBoard component reacting to it.
The next message we need to deal with is update, sent whenever either player clears a tile:
handleMessage_update:
  function(inPID: string, inScore: number) {
  if (inPID !== this.state.pid) {
    const scores: IScores = { ...this.state.scores };
    scores.opponent = inScore;
    this.setState({ scores : scores });
  }
}.bind(inParentComponent),
Chapter 11   time for fun: BattleJong, the Client

---

335
This method received the player ID of the player the update is for and the new score 
for that player. So, we need to see if the message is for the current player or not. If it’s 
not, then the scores property is cloned, the opponent’s score is updated, and the scores 
object is set back into state, resulting in a screen update. Note that nothing needs to be 
done if the update message was for this player because the score will already have been 
updated, as you’ll see the code for soon.
The final message is for when the game ends:
handleMessage_gameOver: function(inPID: string) {
  if (inPID === this.state.pid) {
    this.setState({ gameState : "gameOver",
      gameOutcome : "**** YOU WON! ****" });
  } else {
    this.setState({ gameState : "gameOver",
      gameOutcome : "Tough luck, you lost :(" });
  }
}.bind(inParentComponent),
All we need to do is see if the winning player, as specified by the server, is this 
player, based on the player ID. If it is, the “you won” message is set in the state object’s 
gameOutcome property; otherwise, the “you lost” message is set. The message will be 
displayed on the screen once React triggers the update.