From 368dcd4a650cc33bbf426121d539ea1b4c08faba Mon Sep 17 00:00:00 2001
From: Joel Therrien <joel@joeltherrien.ca>
Date: Sun, 20 Aug 2023 10:00:10 -0700
Subject: [PATCH] Add auto-scrolling for log

Styling is still a WIP
---
 ui/src/elements.tsx | 15 +++++++++++++--
 ui/src/style.less   | 21 +++++++++++++++------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/ui/src/elements.tsx b/ui/src/elements.tsx
index 4058248..e34672c 100644
--- a/ui/src/elements.tsx
+++ b/ui/src/elements.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import {GameWasm, Letter as LetterData, MyResult, PlayedTile, PlayerAndScore, Tray, WordResult} from "word_grid";
-import {ChangeEvent, JSX, useEffect, useMemo, useReducer, useState} from "react";
+import {ChangeEvent, JSX, useEffect, useMemo, useReducer, useRef, useState} from "react";
 
 export interface Settings {
     trayLength: number;
@@ -200,6 +200,17 @@ export function Game(props: {wasm: GameWasm, settings: Settings}) {
 
     }, [turnCount]);
 
+    const logDivRef = useRef(null);
+
+
+    useEffect(() => {
+        // Effect is to keep the log window scrolled down
+        if (logDivRef.current != null) {
+            logDivRef.current.scrollTo(0, logDivRef.current.scrollHeight); // scroll down
+        }
+    }, [logInfo])
+
+
 
 
     return <>
@@ -207,7 +218,7 @@ export function Game(props: {wasm: GameWasm, settings: Settings}) {
             <Grid cellTypes={cellTypes} playerLetters={playerLetters} boardLetters={boardLetters} dispatch={trayDispatch}/>
             <div className="message-log">
                 <Scores playerScores={playerAndScores}/>
-                <div className="log">
+                <div className="log" ref={logDivRef}>
                     {logInfo}
                 </div>
             </div>
diff --git a/ui/src/style.less b/ui/src/style.less
index b9af0ea..6cbe86e 100644
--- a/ui/src/style.less
+++ b/ui/src/style.less
@@ -125,20 +125,29 @@
 }
 
 .board-log {
-  display: flex;
-  justify-content: start;
-  flex-flow: row wrap;
-  align-items: stretch;
+  display: grid;
+  grid-template-columns: @tile-width*@board-length+15px 1fr;
+  height: @tile-width*@board-length + 15px;
 }
 
 .message-log {
   border-color: black;
   border-style: solid;
   border-width: 2px;
-  width: max-content;
-  margin: 5px
+  width: 100%;
+  margin: 5px;
+  height: inherit;
+
+  display: grid;
+  grid-template-rows: 6em 1fr;
+
+  .log {
+    overflow-y: scroll;
+  }
 }
 
+
+
 .scoring {
   text-align: center;
   display: flex;