jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Auto-scroll stickiness

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-01-29 16:57:11 -08:00
parent 5088d63729
commit be750e64ce
2 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/Board.css
View File

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

55
client/src/Board.js
View File

@ -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((<>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)}>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>));
} 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((<><br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></>));
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>));
}
}
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) &&
<>