Improve UI; add end game button

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}

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;