diff --git a/tank-frontend/public/CCCBFont.ttf b/tank-frontend/public/CCCBFont.ttf new file mode 100644 index 0000000..f85643d Binary files /dev/null and b/tank-frontend/public/CCCBFont.ttf differ diff --git a/tank-frontend/src/Controls.css b/tank-frontend/src/Controls.css index 88b5b6e..6946ffc 100644 --- a/tank-frontend/src/Controls.css +++ b/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; } diff --git a/tank-frontend/src/Controls.tsx b/tank-frontend/src/Controls.tsx index 8f43450..dfaed5d 100644 --- a/tank-frontend/src/Controls.tsx +++ b/tank-frontend/src/Controls.tsx @@ -59,23 +59,21 @@ export default function Controls({playerId, logout}: { }; }, [sendMessage]); - return <> - -
-
- -
-
- - - -
+ return +
+
+
-

Move

-
- Space +
+ + +
-

Fire

- - ; +
+

Move

+ + Space + +

Fire

+ ; } diff --git a/tank-frontend/src/PlayerInfo.tsx b/tank-frontend/src/PlayerInfo.tsx index a2f1f5b..a3e6d3d 100644 --- a/tank-frontend/src/PlayerInfo.tsx +++ b/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

- {player ? `Playing as "${player?.name}"` : 'loading...'} + {player ? `Playing as ${player?.name}` : 'loading...'}

- -

kills:

-

{player?.scores.kills}

-
- -

deaths:

-

{player?.scores.deaths}

-
+ + + + + + + + + + + +
kills:{player?.scores.kills}
deaths:{player?.scores.deaths}
; } diff --git a/tank-frontend/src/components/Column.css b/tank-frontend/src/components/Column.css index 791c0ae..a5e48ab 100644 --- a/tank-frontend/src/components/Column.css +++ b/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; diff --git a/tank-frontend/src/components/DataTable.css b/tank-frontend/src/components/DataTable.css index 2fc4e78..3ba8ebc 100644 --- a/tank-frontend/src/components/DataTable.css +++ b/tank-frontend/src/components/DataTable.css @@ -1,3 +1,3 @@ .DataTable { - flex-grow: 1; + table-layout: auto; } diff --git a/tank-frontend/src/components/Row.css b/tank-frontend/src/components/Row.css index b26cc11..d0a8c9f 100644 --- a/tank-frontend/src/components/Row.css +++ b/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; diff --git a/tank-frontend/src/index.css b/tank-frontend/src/index.css index 5830fc5..dcd795f 100644 --- a/tank-frontend/src/index.css +++ b/tank-frontend/src/index.css @@ -2,12 +2,18 @@ box-sizing: border-box; } -html, body { - height: 100%; +@font-face { + font-family: 'CCCBFont'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('/CCCBFont.ttf') format('ttf'), url('/CCCBFont.woff') format('woff'); } -body { - font-family: sans-serif; +html, body { + height: 100%; + + font-family: CCCBFont, monospace; margin: 0; display: flex; align-items: center; @@ -29,14 +35,7 @@ body { 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; +.GadgetRows { + justify-content: space-evenly; + margin-top: 24px; } diff --git a/tank-frontend/src/index.tsx b/tank-frontend/src/index.tsx index 1b45f4a..67c3cc7 100644 --- a/tank-frontend/src/index.tsx +++ b/tank-frontend/src/index.tsx @@ -38,7 +38,7 @@ function App() { {nameId.name === '' && } - {isLoggedIn && + {isLoggedIn &&