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,18 +173,22 @@
   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 {
+  .scoring {
     text-align: center;
-  display: flex;
+    display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: none;
 
@@ -196,8 +200,10 @@
       margin-left: 10px;
       margin-right: 10px;
     }
+  }
 }
 
+
 dialog {
   border-radius: 10px;
   z-index: 1;