cccb font, layout adjustments

tank-frontend/src/PlayerInfo.css

@@ -1,9 +1,4 @@
-.PlayerInfo {
-    border: 2px solid rgb(76, 76, 76);
-    border-radius: 4px;
-}
-
-.Elems {
+    .Elems {
     padding: 8px 8px;
     margin: 8px 8px;
 }

tank-frontend/src/PlayerInfo.tsx

@@ -4,12 +4,10 @@ import {PlayerResponse, getPlayer} from './serverCalls';
 import {Guid} from "./Guid.ts";
 import Column from "./components/Column.tsx";
 import Row from "./components/Row.tsx";
-import Button from "./components/Button.tsx";
 
-export default function PlayerInfo({playerId, logout, reset}: {
+export default function PlayerInfo({playerId, logout}: {
     playerId: Guid,
-    logout: () => void,
-    reset: () => void
+    logout: () => void
 }) {
     const [player, setPlayer] = useState<PlayerResponse | null>();
 
@@ -28,12 +26,9 @@ export default function PlayerInfo({playerId, logout, reset}: {
     }, [playerId]);
 
     return <Column className='PlayerInfo'>
-        <Row>
-            <h3 className='grow'>
-                {player ? `Playing as "${player?.name}"` : 'loading...'}
-            </h3>
-            <Button className='PlayerInfo-Reset' onClick={() => reset()} text='x'/>
-        </Row>
+        <h3>
+            {player ? `Playing as "${player?.name}"` : 'loading...'}
+        </h3>
         <Row>
             <p className='Elems'> kills: </p>
             <p className='Elems'>{player?.scores.kills}</p>

tank-frontend/src/components/Column.css

@@ -4,4 +4,5 @@
     flex: auto;
     max-height: 100%;
     align-items: stretch;
+    gap: 8px;
 }

tank-frontend/src/components/Row.css

@@ -4,4 +4,5 @@
     flex: auto;
     max-width: 100%;
     align-items: stretch;
+    gap: 8px;
 }

tank-frontend/src/index.css

@@ -21,10 +21,22 @@ body {
     display: flex;
     flex-direction: row;
     align-items: center;
-    width: 100vw;
-    height: 100vh;
+    width: 95vw;
+    height: 95vh;
 }
 
 .grow {
     flex-grow: 1;
 }
+
+@font-face {
+    font-family: 'CCCBFont';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/public/CCCBFont.woff') format('woff');
+}
+
+* {
+    font-family: CCCBFont, monospace;
+}

tank-frontend/src/index.tsx

@@ -10,6 +10,7 @@ import {NameId, postPlayer} from './serverCalls.tsx';
 import Column from "./components/Column.tsx";
 import Row from "./components/Row.tsx";
 import Scoreboard from "./Scoreboard.tsx";
+import Button from "./components/Button.tsx";
 
 const getNewNameId = () => ({
     id: crypto.randomUUID(),
@@ -30,12 +31,16 @@ function App() {
     }, [nameId, isLoggedIn])();
 
     return <Column className='grow'>
-        <h1>Tanks!</h1>
-        {nameId.name === '' && <JoinForm setNameId={setNameId} clientId={nameId.id}/>}
+        <Row>
+            <h1 className='grow'>Tanks!</h1>
+            {nameId.name !== '' &&
+                <Button className='PlayerInfo-Reset' onClick={() => setNameId(getNewNameId)} text='x'/>}
+        </Row>
         <ClientScreen logout={logout}/>
+        {nameId.name === '' && <JoinForm setNameId={setNameId} clientId={nameId.id}/>}
         {isLoggedIn && <Row>
             <Controls playerId={nameId.id} logout={logout}/>
-            <PlayerInfo playerId={nameId.id} logout={logout} reset={() => setNameId(getNewNameId)}/>
+            <PlayerInfo playerId={nameId.id} logout={logout}/>
             <Scoreboard/>
         </Row>
         }