From a34ad8cd123a11d5de46666e3f9b28aa1746ca3f Mon Sep 17 00:00:00 2001
From: Joel Therrien <joel@joeltherrien.ca>
Date: Thu, 21 Sep 2023 19:01:56 -0700
Subject: [PATCH] Improve UI; add end game button

---
 ui/src/Game.tsx   |  7 +++++++
 ui/src/style.less | 42 ++++++++++++++++++++++++------------------
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/ui/src/Game.tsx b/ui/src/Game.tsx
index 28874d4..bc83b2a 100644
--- a/ui/src/Game.tsx
+++ b/ui/src/Game.tsx
@@ -305,6 +305,13 @@ export function Game(props: {
         <div className="board-log">
             <Grid cellTypes={cellTypes} playerLetters={playerLetters} boardLetters={boardLetters} dispatch={trayDispatch}/>
             <div className="message-log">
+                <button className="end-game"
+                    onClick={() => {
+                        props.end_game_fn();
+                    }}
+                >
+                    End Game
+                </button>
                 <Scores playerScores={playerAndScores}/>
                 <div className="log" ref={logDivRef}>
                     {logInfo}
diff --git a/ui/src/style.less b/ui/src/style.less
index e893181..2d0737f 100644
--- a/ui/src/style.less
+++ b/ui/src/style.less
@@ -173,31 +173,37 @@
   max-height: inherit;
 
   display: grid;
-  grid-template-rows: 6em 1fr;
+  grid-template-rows: 1.5em 6em 1fr;
 
   .log {
     overflow-y: scroll;
+    padding: 0.5em;
+  }
+
+  button.end-game {
+    margin: 0.5em;
+    width: fit-content;
+    height: fit-content;
+  }
+
+  .scoring {
+    text-align: center;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: none;
+
+    span {
+      font-size: 20px;
+    }
+
+    div {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
   }
 }
 
 
-
-.scoring {
-  text-align: center;
-  display: flex;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: none;
-
-  span {
-    font-size: 20px;
-  }
-
-  div {
-    margin-left: 10px;
-    margin-right: 10px;
-  }
-}
-
 dialog {
   border-radius: 10px;
   z-index: 1;