From 6c0f2aa1989f707ef3a831f0ca1a73fa78baa31f Mon Sep 17 00:00:00 2001
From: Vinzenz Schroeter <vinzenz.f.s@gmail.com>
Date: Sat, 13 Apr 2024 23:53:09 +0200
Subject: [PATCH] cccb font, layout adjustments

---
 tank-frontend/public/CCCBFont.woff      | Bin 0 -> 6428 bytes
 tank-frontend/src/PlayerInfo.css        |   7 +------
 tank-frontend/src/PlayerInfo.tsx        |  15 +++++----------
 tank-frontend/src/components/Column.css |   1 +
 tank-frontend/src/components/Row.css    |   1 +
 tank-frontend/src/index.css             |  16 ++++++++++++++--
 tank-frontend/src/index.tsx             |  11 ++++++++---
 7 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100644 tank-frontend/public/CCCBFont.woff

diff --git a/tank-frontend/public/CCCBFont.woff b/tank-frontend/public/CCCBFont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..04b40af0f609fe954369ff94a8fa6fc909f23545
GIT binary patch
literal 6428
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
FtN>>!CMN&@

literal 0
HcmV?d00001

diff --git a/tank-frontend/src/PlayerInfo.css b/tank-frontend/src/PlayerInfo.css
index 720171a..c3a8623 100644
--- a/tank-frontend/src/PlayerInfo.css
+++ b/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;
 }
diff --git a/tank-frontend/src/PlayerInfo.tsx b/tank-frontend/src/PlayerInfo.tsx
index 518b5b1..a2f1f5b 100644
--- a/tank-frontend/src/PlayerInfo.tsx
+++ b/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>
diff --git a/tank-frontend/src/components/Column.css b/tank-frontend/src/components/Column.css
index c19f81c..791c0ae 100644
--- a/tank-frontend/src/components/Column.css
+++ b/tank-frontend/src/components/Column.css
@@ -4,4 +4,5 @@
     flex: auto;
     max-height: 100%;
     align-items: stretch;
+    gap: 8px;
 }
diff --git a/tank-frontend/src/components/Row.css b/tank-frontend/src/components/Row.css
index 45e17f2..b26cc11 100644
--- a/tank-frontend/src/components/Row.css
+++ b/tank-frontend/src/components/Row.css
@@ -4,4 +4,5 @@
     flex: auto;
     max-width: 100%;
     align-items: stretch;
+    gap: 8px;
 }
diff --git a/tank-frontend/src/index.css b/tank-frontend/src/index.css
index ab5bd76..5830fc5 100644
--- a/tank-frontend/src/index.css
+++ b/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;
+}
diff --git a/tank-frontend/src/index.tsx b/tank-frontend/src/index.tsx
index d9a7c05..1b45f4a 100644
--- a/tank-frontend/src/index.tsx
+++ b/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>
         }