css variables

tank-frontend/src/App.css

@@ -1,4 +1,4 @@
 .GadgetRows {
     justify-content: space-evenly;
-    margin-top: 24px;
+    margin-top: calc(4 * var(--padding-normal));
 }

tank-frontend/src/App.tsx

@@ -29,11 +29,14 @@ export default function App() {
         setLoggedIn(result !== null);
     }, [nameId, isLoggedIn])();
 
-    return <Column className='grow'>
+    return <Column className='flex-grow'>
         <Row>
-            <h1 className='grow'>Tanks!</h1>
+            <h1 className='flex-grow'>CCCB-Tanks!</h1>
+            <Button
+                onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}
+                text='GitHub'/>
             {nameId.name !== '' &&
-                <Button className='PlayerInfo-Reset' onClick={() => setNameId(getNewNameId)} text='logout'/>}
+                <Button onClick={() => setNameId(getNewNameId)} text='logout'/>}
         </Row>
         <ClientScreen logout={logout}/>
         {nameId.name === '' && <JoinForm setNameId={setNameId} clientId={nameId.id}/>}

tank-frontend/src/Controls.css

@@ -1,65 +1,30 @@
-.Controls * {
+.Controls {
+    display: flex;
+    text-align: center;
+    flex-grow: 1;
+}
+
+.Controls-Container {
     box-sizing: content-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--padding-normal);
 }
 
 kbd {
-    background: hsl(0, 0%, 96%);
-    padding: 10px;
+    --kbd-key-size: 2em;
+
+    background: var(--color-secondary);
+    padding: var(--padding-normal);
     display: block;
 
-    margin: 5px;
-    width: 1.6em;
-    height: 1.3em;
+    width: var(--kbd-key-size);
+    height: var(--kbd-key-size);
     text-align: center;
-    box-shadow: 0 1px rgba(0, 0, 0, .21);
     user-select: none;
     color: black;
 }
 
-kbd.up {
-    margin-left: calc(1.6em + 35px);
-}
-
 kbd.space {
-    margin-top: calc(1.3em + 35px);
-    width: 14em;
-}
-
-kbd:active {
-    position: relative;
-    top: 2px;
-    background: hsl(0, 0%, 94%);
-    box-shadow: 0 1px rgba(0, 0, 0, .13) inset;
-}
-
-.Controls {
-    display: flex;
-    color: lightgray;
-    text-align: center;
-    align-items: center !important;
-}
-
-.control {
-    margin: 0 1em;
-}
-
-.row {
-    display: flex;
-}
-
-.splash {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: radial-gradient(transparent, red);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 500ms;
-}
-
-.was-killed .splash {
-    opacity: 1;
-    transition: opacity 120ms;
+    width: calc(3 * var(--kbd-key-size) + 2 * var(--padding-normal));
 }

tank-frontend/src/Controls.tsx

@@ -60,20 +60,19 @@ export default function Controls({playerId, logout}: {
     }, [sendMessage]);
 
     return <Column className="Controls">
-        <div className="control">
-            <div className="row">
-                <kbd className="up">▲</kbd>
-            </div>
-            <div className="row">
+        <div className='flex-column Controls-Container'>
+            <h3>Move</h3>
+            <kbd>▲</kbd>
+            <div className='flex-row Controls-Container'>
                 <kbd>◄</kbd>
                 <kbd>▼</kbd>
                 <kbd>►</kbd>
             </div>
         </div>
-        <h3>Move</h3>
 
-        <kbd className="space control">Space</kbd>
-
-        <h3>Fire</h3>
+        <div className='flex-column Controls-Container'>
+            <h3>Fire</h3>
+            <kbd className="space">Space</kbd>
+        </div>
     </Column>;
 }

tank-frontend/src/JoinForm.css

@@ -2,28 +2,28 @@
 @keyframes BlinkJoinForm {
     from {
         font-weight: normal;
-        border-color: rgb(76, 76, 76);
+        border-color: var(--color-secondary);
     }
 
     50% {
-        border-color: black;
+        border-color: var(--color-background);
     }
 
     to {
         font-weight: bold;
-        border-color: green;
+        border-color: var(--color-primary);
     }
 }
 
 .JoinForm {
-    border: 8px solid rgb(76, 76, 76);
+    border: solid var(--border-size-thick) var(--color-secondary);
 
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 
-    background: black;
+    background: var(--color-background);
 
     gap: 16px;
     padding: 16px;

tank-frontend/src/PlayerInfo.css

@@ -1,5 +0,0 @@
-.Elems {
-    padding: 8px 8px;
-    margin: 8px 8px;
-}
-

tank-frontend/src/PlayerInfo.tsx

@@ -1,5 +1,4 @@
 import {useEffect, useState} from 'react';
-import './PlayerInfo.css'
 import {PlayerResponse, getPlayer} from './serverCalls';
 import {Guid} from "./Guid.ts";
 import Column from "./components/Column.tsx";
@@ -24,7 +23,7 @@ export default function PlayerInfo({playerId, logout}: {
         return () => clearInterval(timer);
     }, [playerId]);
 
-    return <Column className='PlayerInfo'>
+    return <Column className='PlayerInfo flex-grow'>
         <h3>
             {player ? `Playing as ${player?.name}` : 'loading...'}
         </h3>

tank-frontend/src/Scoreboard.tsx

@@ -17,10 +17,13 @@ export default function Scoreboard({}: {}) {
         return () => clearInterval(timer);
     }, [players]);
 
-    return <DataTable<PlayerResponse> data={players} columns={[
-        {field: 'name'},
-        {field: 'kills', visualize: p => p.scores.kills},
-        {field: 'deaths', visualize: p => p.scores.deaths},
-        {field: 'k/d', visualize: p => p.scores.kills / p.scores.deaths}
-    ]}/>
+    return <DataTable
+        data={players}
+        className='flex-grow'
+        columns={[
+            {field: 'name'},
+            {field: 'kills', visualize: p => p.scores.kills},
+            {field: 'deaths', visualize: p => p.scores.deaths},
+            {field: 'k/d', visualize: p => p.scores.kills / p.scores.deaths}
+        ]}/>
 }

tank-frontend/src/components/Button.css

@@ -1,14 +1,13 @@
 .Button {
-    border: solid 4px green;
-    padding: 8px;
+    border: solid var(--border-size-thin) var(--color-primary);
+    padding: var(--padding-normal);
 
-    color: green;
-    background: transparent;
+    color: var(--color-primary);
+    background: var(--color-background);
 }
 
 .Button:hover, .Button:active {
-    background-color: green;
-    color: black;
+    background-color: var(--color-primary);
+    color: var(--color-background);
     cursor: pointer;
 }
-

tank-frontend/src/components/Column.css

@@ -1,7 +1,5 @@
 .Column {
-    display: flex;
-    flex-direction: column;
     max-height: 100%;
     align-items: stretch;
-    gap: 8px;
+    gap: var(--padding-normal);
 }

tank-frontend/src/components/Column.tsx

@@ -6,7 +6,7 @@ export default function Column({children, className}: {
     children: ReactNode,
     className?: string
 }) {
-    return <div className={'Column ' + (className ?? '')}>
+    return <div className={'Column flex-column ' + (className ?? '')}>
         {children}
     </div>
 }

tank-frontend/src/components/DataTable.css

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

tank-frontend/src/components/DataTable.tsx

@@ -39,14 +39,17 @@ function DataTableRow({rowData, columns}: {
     </tr>;
 }
 
-export default function DataTable<T>({data, columns}: {
+export default function DataTable<T>({data, columns, className}: {
     data: T[],
-    columns: DataTableColumnDefinition<any>[]
+    columns: DataTableColumnDefinition<any>[],
+    className?: string
 }) {
-    return <table className='DataTable'>
-        <TableHead columns={columns}/>
-        <tbody>
-        {data.map((element, index) => <DataTableRow key={index} rowData={element} columns={columns}/>)}
-        </tbody>
-    </table>
+    return <div className={'DataTable ' + (className ?? '')}>
+        <table>
+            <TableHead columns={columns}/>
+            <tbody>
+            {data.map((element, index) => <DataTableRow key={index} rowData={element} columns={columns}/>)}
+            </tbody>
+        </table>
+    </div>;
 }

tank-frontend/src/components/Row.css

@@ -1,7 +1,5 @@
 .Row {
-    display: flex;
-    flex-direction: row;
     max-width: 100%;
     align-items: stretch;
-    gap: 8px;
+    gap: var(--padding-normal);
 }

tank-frontend/src/components/Row.tsx

@@ -3,7 +3,7 @@ import {ReactNode} from "react";
 import './Row.css';
 
 export default function Row({children, className}: { children: ReactNode, className?: string }) {
-    return <div className={'Row ' + (className ?? '')}>
+    return <div className={'Row flex-row ' + (className ?? '')}>
         {children}
     </div>
 }

tank-frontend/src/components/TextInput.css

@@ -1,3 +1,3 @@
 .TextInput {
-    padding: 8px;
+    padding: var(--padding-normal);
 }

tank-frontend/src/index.css

@@ -12,6 +12,18 @@
     text-transform: uppercase;
 }
 
+:root {
+    --color-background: black;
+    --color-primary: green;
+    --color-secondary: rgb(76, 76, 76);
+    --color-text: white;
+
+    --border-size-thin: 4px;
+    --border-size-thick: 8px;
+
+    --padding-normal: 8px;
+}
+
 html, body {
     height: 100%;
 
@@ -20,8 +32,8 @@ html, body {
     align-items: center;
     justify-content: center;
 
-    background-color: black;
-    color: white;
+    background-color: var(--color-background);
+    color: var(--color-text);
 }
 
 #root {
@@ -32,6 +44,17 @@ html, body {
     height: 95vh;
 }
 
-.grow {
+.flex-grow {
+    display: flex;
     flex-grow: 1;
 }
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}