improved gadget layout

tank-frontend/src/Controls.css

@@ -32,19 +32,17 @@ kbd:active {
     box-shadow: 0 1px rgba(0, 0, 0, .13) inset;
 }
 
-.controls {
+.Controls {
     display: flex;
     color: lightgray;
+    text-align: center;
+    align-items: center !important;
 }
 
 .control {
     margin: 0 1em;
 }
 
-.control h3 {
-    text-align: center;
-}
-
 .row {
     display: flex;
 }

tank-frontend/src/Controls.tsx

@@ -59,23 +59,21 @@ export default function Controls({playerId, logout}: {
         };
     }, [sendMessage]);
 
-    return <>
+    return <Column className="Controls">
-        <Column className="Controls">
+        <div className="control">
-            <div className="control">
+            <div className="row">
-                <div className="row">
+                <kbd className="up">↑</kbd>
-                    <kbd className="up">▲</kbd>
-                </div>
-                <div className="row">
-                    <kbd>◀</kbd>
-                    <kbd>▼</kbd>
-                    <kbd>▶</kbd>
-                </div>
             </div>
-            <h3>Move</h3>
+            <div className="row">
-            <div className="control">
+                <kbd>←</kbd>
-                <kbd className="space">Space</kbd>
+                <kbd>↓</kbd>
+                <kbd>→</kbd>
             </div>
-            <h3>Fire</h3>
+        </div>
-        </Column>
+        <h3>Move</h3>
-    </>;
+
+        <kbd className="space control">Space</kbd>
+
+        <h3>Fire</h3>
+    </Column>;
 }

tank-frontend/src/PlayerInfo.tsx

@@ -3,7 +3,6 @@ import './PlayerInfo.css'
 import {PlayerResponse, getPlayer} from './serverCalls';
 import {Guid} from "./Guid.ts";
 import Column from "./components/Column.tsx";
-import Row from "./components/Row.tsx";
 
 export default function PlayerInfo({playerId, logout}: {
     playerId: Guid,
@@ -27,15 +26,19 @@ export default function PlayerInfo({playerId, logout}: {
 
     return <Column className='PlayerInfo'>
         <h3>
-            {player ? `Playing as "${player?.name}"` : 'loading...'}
+            {player ? `Playing as ${player?.name}` : 'loading...'}
         </h3>
-        <Row>
+        <table>
-            <p className='Elems'> kills: </p>
+            <tbody>
-            <p className='Elems'>{player?.scores.kills}</p>
+            <tr>
-        </Row>
+                <td>kills:</td>
-        <Row>
+                <td>{player?.scores.kills}</td>
-            <p className='Elems'>deaths: </p>
+            </tr>
-            <p className='Elems'>{player?.scores.deaths}</p>
+            <tr>
-        </Row>
+                <td>deaths:</td>
+                <td>{player?.scores.deaths}</td>
+            </tr>
+            </tbody>
+        </table>
     </Column>;
 }

tank-frontend/src/components/Column.css

@@ -1,7 +1,6 @@
 .Column {
     display: flex;
     flex-direction: column;
-    flex: auto;
     max-height: 100%;
     align-items: stretch;
     gap: 8px;

tank-frontend/src/components/DataTable.css

@@ -1,3 +1,3 @@
 .DataTable {
-    flex-grow: 1;
+    table-layout: auto;
 }

tank-frontend/src/components/Row.css

@@ -1,7 +1,6 @@
 .Row {
     display: flex;
     flex-direction: row;
-    flex: auto;
     max-width: 100%;
     align-items: stretch;
     gap: 8px;

tank-frontend/src/index.css

@@ -2,12 +2,18 @@
     box-sizing: border-box;
 }
 
-html, body {
+@font-face {
-    height: 100%;
+    font-family: 'CCCBFont';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/CCCBFont.ttf') format('ttf'), url('/CCCBFont.woff') format('woff');
 }
 
-body {
+html, body {
-    font-family: sans-serif;
+    height: 100%;
+
+    font-family: CCCBFont, monospace;
     margin: 0;
     display: flex;
     align-items: center;
@@ -29,14 +35,7 @@ body {
     flex-grow: 1;
 }
 
-@font-face {
+.GadgetRows {
-    font-family: 'CCCBFont';
+    justify-content: space-evenly;
-    font-style: normal;
+    margin-top: 24px;
-    font-weight: 400;
-    font-display: swap;
-    src: url('/public/CCCBFont.woff') format('woff');
-}
-
-* {
-    font-family: CCCBFont, monospace;
 }

tank-frontend/src/index.tsx

@@ -38,7 +38,7 @@ function App() {
         </Row>
         <ClientScreen logout={logout}/>
         {nameId.name === '' && <JoinForm setNameId={setNameId} clientId={nameId.id}/>}
-        {isLoggedIn && <Row>
+        {isLoggedIn && <Row className='GadgetRows'>
             <Controls playerId={nameId.id} logout={logout}/>
             <PlayerInfo playerId={nameId.id} logout={logout}/>
             <Scoreboard/>