From c7360e70037bb831629a5c9f85f37082440a9bfe Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Sat, 29 Jan 2022 18:05:12 -0800
Subject: [PATCH] Scroll is sticky, except when changing views then it gets
 confused

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

diff --git a/client/src/Board.js b/client/src/Board.js
index cb085b6..5930d3c 100755
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -202,13 +202,17 @@ 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} ${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">