From 36677dc22c615520b69e242578aa0d7fe6381bd7 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Sun, 30 Jan 2022 13:53:43 -0800
Subject: [PATCH] Message box is no longer a bunch of borken blocks

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Board.js | 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/client/src/Board.js b/client/src/Board.js
index 7f05732..c56bd33 100755
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -1315,51 +1315,55 @@ class Board extends React.Component {
 
     let message = [],
       key = 0;
+      const color = 'B';
+    message=<></>;
+    //message=<>{message}<i>itallic</i></>;
+  //  this.setState({ message: message})
     if (this.state.pickName || !name) {
-      message.push((<div key={'message-'+(++key)}>Enter the name you would like to be known by, then press&nbsp;<b>ENTER</b>&nbsp;or select &nbsp;<b>SET</b>.</div>));
+      message = <>{message}Enter the name you would like to be known by, then press&nbsp;<b>ENTER</b>&nbsp;or select &nbsp;<b>SET</b>.</>;
     } else {
       switch (this.game && this.game.state) {
       case 'lobby':
-        message.push((<div key={'message-'+(++key)}>You are in the lobby as&nbsp;<b>{name}</b>.</div>));
+        message = <>{message}You are in the lobby as&nbsp;<b>{name}</b>.</>;
         if (!this.game.color) {
-          message.push((<div key={'message-'+(++key)}>You need to pick your color.</div>));
+          message = <>{message}You need to pick your color.</>;
         } else {
-          message.push((<div key={'message-'+(++key)}>You have selected <PlayerColor color={this.game.color}/>.</div>));
+          message = <>{message}You have selected <PlayerColor color={this.game.color}/>.</>;
         }
-        message.push((<div key={'message-'+(++key)}>You can chat with other players below.</div>));
+        message = <>{message}You can chat with other players below.</>;
         if (this.game.active < 2) {
-          message.push((<div key={'message-'+(++key)}>Once there are two or more players, you can select&nbsp;<b>START GAME</b>.</div>));
+          message = <>{message}Once there are two or more players, you can select&nbsp;<b>START GAME</b>.</>;
         } else {
-          message.push((<div key={'message-'+(++key)}>There are enough players to start the game. Select&nbsp;<b>START GAME</b>&nbsp;when ready.</div>));
+          message = <>{message}There are enough players to start the game. Select&nbsp;<b>START GAME</b>&nbsp;when ready.</>;
         }
         break;
       case 'game-order':
         if (!player) {
-          message.push((<div key={'message-'+(++key)}>This game as an observer as &nbsp;<b>{name}</b>.</div>));
-          message.push((<div key={'message-'+(++key)}>You can chat with other players below as&nbsp;<b>{this.game.name}</b>, but cannot play unless players go back to the Lobby.</div>));
+          message = <>{message}This game as an observer as &nbsp;<b>{name}</b>.</>;
+          message = <>{message}You can chat with other players below as&nbsp;<b>{this.game.name}</b>, but cannot play unless players go back to the Lobby.</>;
         } else {
           if (!player.order) {
-            message.push((<div key={'message-'+(++key)}>You need to roll for game order. Click&nbsp;<b>Roll Dice</b>&nbsp;below.</div>));
+            message = <>{message}You need to roll for game order. Click&nbsp;<b>Roll Dice</b>&nbsp;below.</>;
           } else {
-            message.push((<div key={'message-'+(++key)}>You rolled&nbsp;<b>{player.order}</b>&nbsp;for game order. Waiting for all players.</div>));
-            message.push((<div key={'message-'+(++key)}><br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></div>));
+            message = <>{message}You rolled&nbsp;<b>{player.order}</b>&nbsp;for game order. Waiting for all players.</>;
+            message = <>{message}<br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></>;
           }
         }
         break;
       case 'active':
         if (!player) {
-          message.push((<div key={'message-'+(++key)}>This game is no longer in the lobby.<br/><b>TODO: Override game state to allow Lobby mode while in-game</b></div>)); 
+          message = <>{message}This game is no longer in the lobby.<br/><b>TODO: Override game state to allow Lobby mode while in-game</b></>; 
         } else {
-          message.push((<div key={'message-'+(++key)}><br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></div>));
+          message = <>{message}<br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></>;
         }
         break;
       case null:
       case undefined:
       case '':
-        message.push((<div key={'message-'+(++key)}>The game is in a wonky state. Sorry :(</div>));
+        message = <>{message}The game is in a wonky state. Sorry :(</>;
         break;
       default:
-        message.push((<div key={'message-'+(++key)}>Game state is: {this.game.state}</div>));
+        message = <>{message}Game state is: {this.game.state}</>;
         break;
       }
     }