Auto-scroll stickiness

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/Board.css

@@ -179,6 +179,9 @@
   padding: 1em;
 }
 
+.Message div {
+  display: inline-block;
+}
 
 .PlayerName {
   display: flex;

client/src/Board.js

@@ -201,12 +201,14 @@ class Resource extends React.Component {
 };
 
 const Chat = ({ board, promoteGameState }) => {
+  const [lastHeight, setLastHeight] = useState(0);
+
   const chatInput = (event) => {
   };
 
   const chatKeyPress = (event) => {
     if (event.key === "Enter") {
-      console.log(`Send: ${event.target.value}`);
+      setLastHeight(0); /* Reset sticky scroll */
       promoteGameState({ 
         chat: {
           player: board.game.color ? board.game.color : undefined,
@@ -218,10 +220,16 @@ const Chat = ({ board, promoteGameState }) => {
   };
 
   const classes = useStyles();
-
   useEffect(() => {
     const chatList = document.getElementById("ChatList");
-    chatList.scrollTop = chatList.scrollHeight - chatList.offsetHeight;
+    if (lastHeight !== Math.round(chatList.scrollHeight)) {
+      const height = lastHeight ? lastHeight : chatList.offsetHeight,
+        delta = height - Math.round(chatList.offsetHeight);
+      if (lastHeight === 0 || Math.abs(chatList.scrollTop - delta) < 20) {
+        chatList.scrollTop = chatList.scrollHeight - chatList.offsetHeight;
+      }
+      setLastHeight(Math.round(chatList.scrollHeight));
+    }
   })
   
   //const timeDelta = game.timestamp - Date.now();
@@ -271,11 +279,11 @@ const Action = ({ board }) => {
   }
 
   return (
-    <Paper class="Action">
+    <Paper className="Action">
       { board.game.state == 'lobby' && <>
         <Button disabled={!board.game.color || board.game.active < 2} onClick={startClick}>Start game</Button>
         <Button disabled={!board.game.color} onClick={newBoardClick}>New board</Button>
-        <Button disabled={board.game.color} onClick={() => {board.setState({ pickName: true})}}>Change name</Button>
+        <Button disabled={board.game.color !== ''} onClick={() => {board.setState({ pickName: true})}}>Change name</Button>
       </> }
       { board.game.state === 'game-order' && 
         <Button disabled={board.game.order !== 0} onClick={rollClick}>Roll Dice</Button> }
@@ -1279,52 +1287,53 @@ class Board extends React.Component {
     const player = (this.game && this.game.color) ? this.game.players[this.game.color] : undefined,
       name = this.game ? this.game.name : "";
 
-    let message = [];
+    let message = [],
+      key = 0;
     if (this.state.pickName || !name) {
-      message.push((<>Enter the name you would like to be known by, then press&nbsp;<b>ENTER</b>&nbsp;or select &nbsp;<b>SET</b>.</>));
+      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>));
     } else {
       switch (this.game && this.game.state) {
       case 'lobby':
-        message.push((<>You are in the lobby as&nbsp;<b>{name}</b>.</>));
+        message.push((<div key={'message-'+(++key)}>You are in the lobby as&nbsp;<b>{name}</b>.</div>));
         if (!this.game.color) {
-          message.push((<>You need to pick your color.</>));
+          message.push((<div key={'message-'+(++key)}>You need to pick your color.</div>));
         } else {
-          message.push((<>You have selected&nbsp;<b>{this.game.color}</b>.</>));
+          message.push((<div key={'message-'+(++key)}>You have selected&nbsp;<b>{this.game.color}</b>.</div>));
         }
-        message.push((<>You can chat with other players below.</>));
+        message.push((<div key={'message-'+(++key)}>You can chat with other players below.</div>));
         if (this.game.active < 2) {
-          message.push((<>Once there are two or more players, you can select&nbsp;<b>START GAME</b>.</>));
+          message.push((<div key={'message-'+(++key)}>Once there are two or more players, you can select&nbsp;<b>START GAME</b>.</div>));
         } else {
-          message.push((<>There are enough players to start the game. Select&nbsp;<b>START GAME</b>&nbsp;when ready.</>));
+          message.push((<div key={'message-'+(++key)}>There are enough players to start the game. Select&nbsp;<b>START GAME</b>&nbsp;when ready.</div>));
         }
         break;
       case 'game-order':
         if (!player) {
-          message.push((<>This game as an observer as &nbsp;<b>{name}</b>.</>));
+          message.push((<div key={'message-'+(++key)}>This game as an observer as &nbsp;<b>{name}</b>.</div>));
-          message.push((<>You can chat with other players below as&nbsp;<b>{this.game.name}</b>, but cannot play unless players go back to the Lobby.</>));
+          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>));
         } else {
           if (!player.order) {
-            message.push((<>You need to roll for game order. Click&nbsp;<b>Roll Dice</b>&nbsp;below.</>));
+            message.push((<div key={'message-'+(++key)}>You need to roll for game order. Click&nbsp;<b>Roll Dice</b>&nbsp;below.</div>));
           } else {
-            message.push((<>You rolled&nbsp;<b>{player.order}</b>&nbsp;for game order. Waiting for all players.</>));
+            message.push((<div key={'message-'+(++key)}>You rolled&nbsp;<b>{player.order}</b>&nbsp;for game order. Waiting for all players.</div>));
-            message.push((<><br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></>));
+            message.push((<div key={'message-'+(++key)}><br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></div>));
           }
         }
         break;
       case 'active':
         if (!player) {
-          message.push((<>This game is no longer in the lobby.<br/><b>TODO: Override game state to allow Lobby mode while in-game</b></>)); 
+          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>)); 
         } else {
-          message.push((<><br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></>));
+          message.push((<div key={'message-'+(++key)}><br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></div>));
         }
         break;
       case null:
       case undefined:
       case '':
-        message.push((<>The game is in a wonky state. Sorry :(</>));
+        message.push((<div key={'message-'+(++key)}>The game is in a wonky state. Sorry :(</div>));
         break;
       default:
-        message.push((<>Game state is: {this.game.state}</>));
+        message.push((<div key={'message-'+(++key)}>Game state is: {this.game.state}</div>));
         break;
       }
     }
@@ -1429,7 +1438,7 @@ class Board extends React.Component {
          <div className="Cards" ref={el => this.cards = el}>
           { game && 
               <div className={'Game ' + game.state}>
-              <Paper class="Message">{ this.state.message }</Paper>
+              <Paper className="Message">{ this.state.message }</Paper>
               {(this.state.pickName || !this.game.name) && <PlayerName board={this}/> }
               {(!this.state.pickName && this.game.name) && 
                 <>