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

Scroll is sticky, except when changing views then it gets confused

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-01-29 18:05:12 -08:00
parent db3299a57a
commit c7360e7003
1 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
client/src/Board.js
View File

@ -208,7 +208,11 @@ const Chat = ({ board, promoteGameState }) => {
const chatKeyPress = (event) => {
if (event.key === "Enter") {
console.log(`Send: ${event.target.value} ${lastHeight}`);
const chatList = document.getElementById("ChatList");
setLastHeight(0); /* Reset sticky scroll */
chatList.scrollTop = chatList.scrollHeight - chatList.offsetHeight;
promoteGameState({
chat: {
player: board.game.color ? board.game.color : undefined,
@ -222,15 +226,20 @@ const Chat = ({ board, promoteGameState }) => {
const classes = useStyles();
useEffect(() => {
const chatList = document.getElementById("ChatList");
const scrolled = Math.abs((lastHeight ? lastHeight : chatList.scrollHeight) - chatList.offsetHeight - chatList.scrollTop);
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) {
if (lastHeight === 0 || scrolled < 20) {
console.log("Auto scroll", scrolled, chatList.scrollHeight, lastHeight);
chatList.scrollTop = chatList.scrollHeight - chatList.offsetHeight;
setLastHeight(Math.round(chatList.scrollHeight));
} else {
console.log('Sticking scroll position', scrolled, chatList.scrollHeight, lastHeight);
setLastHeight(Math.round(chatList.scrollHeight));
}
setLastHeight(Math.round(chatList.scrollHeight));
}
})
});
//const timeDelta = game.timestamp - Date.now();
const messages = board.game.chat.map((item, index) => {
@ -280,11 +289,10 @@ const Action = ({ board }) => {
return (
<Paper className="Action">
{ board.game.state == 'lobby' && <>
{ 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 ? true : false} onClick={() => {board.setState({ pickName: true})}}>Change name</Button>
</> }
<Button disabled={board.game.color ? true : false} onClick={() => {board.setState({ pickName: true})}}>Change name</Button> </> }
{ board.game.state === 'game-order' &&
<Button disabled={board.game.order !== 0} onClick={rollClick}>Roll Dice</Button> }
{ board.game.state === 'active' && <>
@ -304,7 +312,7 @@ const PlayerName = ({board}) => {
const sendName = () => {
console.log(`Send: ${name}`);
if (name != board.game.name) {
if (name !== board.game.name) {
board.setPlayerName(name);
} else {
board.setState({ pickName: false, error: "" });
@ -366,7 +374,7 @@ const Players = ({ board }) => {
<ListItemText primary={name} secondary={(
<>
{ item.status + ' ' }
{ item.status != 'Not active' && <Moment fromNow date={item.lastActive}/>}
{ item.status !== 'Not active' && <Moment fromNow date={item.lastActive}/>}
</>)} />
{ (item.status === 'Not active' || board.game.color === color) &&
<Switch edge="end"
@ -624,7 +632,7 @@ class Board extends React.Component {
}).then((game) => {
const error = (game.status !== 'success') ? game.status : undefined;
console.log (`Game ${game.id} loaded ${moment().format()}.`);
//console.log (`Game ${game.id} loaded ${moment().format()}.`);
this.updateGame(game);
this.updateMessage();
@ -668,7 +676,6 @@ class Board extends React.Component {
}
return res.json();
}).then((game) => {
console.log (`Game state changed.`);
this.updateGame(game);
this.setState({ game: game, error: "" });
}).catch((error) => {
@ -1002,7 +1009,7 @@ class Board extends React.Component {
ctx.fillStyle = "rgba(128, 128, 0, 0.125)";
ctx.strokeStyle = "rgba(255, 255, 0, 0.5)";
if (this.game.state != 'lobby') {
if (this.game.state !== 'lobby') {
const roll = dice[0].pips + dice[1].pips;
if (roll) this.tiles.forEach((tile) => {
if (tile.pip.roll === roll) {
@ -1395,7 +1402,7 @@ class Board extends React.Component {
}).then((res) => {
return res.json();
}).then((game) => {
console.log (`Game ${game.id} loaded ${moment().format()}.`);
// console.log (`Game ${game.id} loaded ${moment().format()}.`);
if (!this.id) {
history.push(`${gamesPath}/${game.id}`);
@ -1451,7 +1458,7 @@ class Board extends React.Component {
</div>
}
{
game && game.state == "active" &&
game && game.state === "active" &&
<>
<div>In hand</div>
<div className="Hand">