Making eventlog scrollable

Cheneth · Dec 25, 2020 · ac4880b · ac4880b
1 parent 754e46c
commit ac4880b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/coup-client/src/components/game/Coup.js b/coup-client/src/components/game/Coup.js
@@ -95,9 +95,6 @@ export default class Coup extends Component {
                 return <>{item+' '}</>
             })
             bind.state.logs = [...bind.state.logs, coloredLog]
-            if(bind.state.logs.length === 5){
-                bind.state.logs.shift();
-            }
             bind.setState({logs :bind.state.logs})
         })
         this.props.socket.on('g-chooseAction', () => {        

diff --git a/coup-client/src/components/game/CoupStyles.css b/coup-client/src/components/game/CoupStyles.css
@@ -357,6 +357,8 @@
         position: absolute;
         right: 10VW;
         top: 10VH;
+        overflow-y: scroll;
+        height: 9VH;
     }
     .GameHeader {
         height: 15VH;

diff --git a/coup-client/src/components/game/EventLog.js b/coup-client/src/components/game/EventLog.js
@@ -12,7 +12,22 @@ export default class EventLog extends Component {
                     }
                     return <p>{x}</p>
                 })}
+                <div style={{ float:"left", clear: "both" }}
+                    ref={(el) => { this.messagesEnd = el; }}>
+                </div>
             </div>
         )
     }
+
+    scrollToBottom = () => {
+        this.messagesEnd.scrollIntoView({ behavior: "smooth" });
+      }
+
+      componentDidMount() {
+        this.scrollToBottom();
+      }
+
+      componentDidUpdate() {
+        this.scrollToBottom();
+      }
 }