diff --git a/client/src/Board.css b/client/src/Board.css index 49e53c8..eb45259 100755 --- a/client/src/Board.css +++ b/client/src/Board.css @@ -179,6 +179,9 @@ padding: 1em; } +.Message div { + display: inline-block; +} .PlayerName { display: flex; diff --git a/client/src/Board.js b/client/src/Board.js index 3de0a5c..50bb06d 100755 --- a/client/src/Board.js +++ b/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 ( - + { board.game.state == 'lobby' && <> - + } { board.game.state === 'game-order' && } @@ -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 ENTER or select  SET.)); + message.push((
Enter the name you would like to be known by, then press ENTER or select  SET.
)); } else { switch (this.game && this.game.state) { case 'lobby': - message.push((<>You are in the lobby as {name}.)); + message.push((
You are in the lobby as {name}.
)); if (!this.game.color) { - message.push((<>You need to pick your color.)); + message.push((
You need to pick your color.
)); } else { - message.push((<>You have selected {this.game.color}.)); + message.push((
You have selected {this.game.color}.
)); } - message.push((<>You can chat with other players below.)); + message.push((
You can chat with other players below.
)); if (this.game.active < 2) { - message.push((<>Once there are two or more players, you can select START GAME.)); + message.push((
Once there are two or more players, you can select START GAME.
)); } else { - message.push((<>There are enough players to start the game. Select START GAME when ready.)); + message.push((
There are enough players to start the game. Select START GAME when ready.
)); } break; case 'game-order': if (!player) { - message.push((<>This game as an observer as  {name}.)); - message.push((<>You can chat with other players below as {this.game.name}, but cannot play unless players go back to the Lobby.)); + message.push((
This game as an observer as  {name}.
)); + message.push((
You can chat with other players below as {this.game.name}, but cannot play unless players go back to the Lobby.
)); } else { if (!player.order) { - message.push((<>You need to roll for game order. Click Roll Dice below.)); + message.push((
You need to roll for game order. Click Roll Dice below.
)); } else { - message.push((<>You rolled {player.order} for game order. Waiting for all players.)); - message.push((<>
THIS IS THE END OF THE FUNCTIONALITY SO FAR)); + message.push((
You rolled {player.order} for game order. Waiting for all players.
)); + message.push((

THIS IS THE END OF THE FUNCTIONALITY SO FAR
)); } } break; case 'active': if (!player) { - message.push((<>This game is no longer in the lobby.
TODO: Override game state to allow Lobby mode while in-game)); + message.push((
This game is no longer in the lobby.
TODO: Override game state to allow Lobby mode while in-game
)); } else { - message.push((<>
THIS IS THE END OF THE FUNCTIONALITY SO FAR)); + message.push((

THIS IS THE END OF THE FUNCTIONALITY SO FAR
)); } break; case null: case undefined: case '': - message.push((<>The game is in a wonky state. Sorry :()); + message.push((
The game is in a wonky state. Sorry :(
)); break; default: - message.push((<>Game state is: {this.game.state})); + message.push((
Game state is: {this.game.state}
)); break; } } @@ -1429,7 +1438,7 @@ class Board extends React.Component {
this.cards = el}> { game &&
- { this.state.message } + { this.state.message } {(this.state.pickName || !this.game.name) && } {(!this.state.pickName && this.game.name) && <>