From cb3a0c38944c9eb61bc3e7dc02ca28fc6922993f Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Thu, 7 Jan 2021 23:15:33 +0100
Subject: balk :tada:

---
 src/components/gameBar.tsx | 88 ++++++++++++++++++++++++++++++++++++++++++++++
 src/components/page.tsx    |  6 ++--
 src/components/ui.tsx      |  3 +-
 src/dark.css               |  5 ---
 src/global.css             |  3 +-
 src/pages/game.tsx         | 12 +++++--
 6 files changed, 106 insertions(+), 11 deletions(-)
 create mode 100644 src/components/gameBar.tsx

(limited to 'src')

diff --git a/src/components/gameBar.tsx b/src/components/gameBar.tsx
new file mode 100644
index 0000000..53eda88
--- /dev/null
+++ b/src/components/gameBar.tsx
@@ -0,0 +1,88 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Vierkant } from './ui';
+
+import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
+import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
+import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded';
+import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
+
+interface GameBarModuleProps {
+	children?: ReactNode;
+}
+
+function GameBarModule(props: GameBarModuleProps) {
+	return <Vierkant style={{
+		backgroundColor: "var(--background-alt)",
+		padding: 12,
+		borderRadius: 6,
+		margin: 0,
+		verticalAlign: "top"
+	}}>{props.children}</Vierkant>
+}
+
+var GameBarSpacer = () => <div style={{ width: 8, display: "inline-block" }}></div>;
+
+var GameBarAlignStyle: CSSProperties = {
+	display: "inline-block"
+}
+
+export function GameBar() {
+	return <Vierkant className="gameBar" style={{
+		padding: 8,
+		width: "calc(100% - 12px)"
+	}}>
+		<div style={{ gridAutoColumns: "auto" }}>
+			<div style={{ ...GameBarAlignStyle, float: "left" }}>
+				<div style={{
+					width: 32, height: 32,
+					margin: 8,
+					backgroundColor: "var(--disk-b)",
+					borderRadius: 16,
+					display: "inline-block"
+				}}/>
+				<h2 style={{
+					fontSize: 20,
+					margin: 12,
+					verticalAlign: "top",
+					display: "inline-block"
+				}}>Tegenstander</h2>
+			</div>
+			<div style={{
+				...GameBarAlignStyle,
+				position: "absolute",
+				top: "50%", left: "50%",
+				transform: "translate(-50%, -50%)"
+			}}>
+				<span style={{
+					color: "var(--text)",
+					fontSize: 20,
+					opacity: .75
+				}}>0-0</span>
+			</div>
+			<div style={{ ...GameBarAlignStyle, float: "right" }}>
+				<GameBarModule>
+					<SettingsRoundedIcon/>
+				</GameBarModule>
+				<GameBarSpacer/>
+				<GameBarModule>
+					<span style={{
+						margin: "0 4px",
+						fontSize: 20
+					}}>00:00</span>
+				</GameBarModule>
+				<GameBarSpacer/>
+				<GameBarModule>
+					<ExitToAppRoundedIcon/>
+				</GameBarModule>
+				<GameBarSpacer/>
+				<GameBarModule>
+					<NavigateBeforeRoundedIcon/>
+				</GameBarModule>
+				<GameBarSpacer/>
+				<GameBarModule>
+					<NavigateNextRoundedIcon/>
+				</GameBarModule>
+			</div>
+		</div>
+	</Vierkant>;
+}
diff --git a/src/components/page.tsx b/src/components/page.tsx
index 73981c2..37634a3 100644
--- a/src/components/page.tsx
+++ b/src/components/page.tsx
@@ -1,8 +1,9 @@
-import { Component, ReactNode } from 'react';
+import { Component, CSSProperties, ReactNode } from 'react';
 
 interface CenteredPageProps {
 	width?: number;
 	children?: ReactNode;
+	style?: CSSProperties;
 }
 
 export function CenteredPage (props: CenteredPageProps) {
@@ -12,7 +13,8 @@ export function CenteredPage (props: CenteredPageProps) {
 	}}>
 		<div className="CenteredPageInner" style={{
 			margin: "0 6px",
-			lineHeight: 0
+			lineHeight: 0,
+			...props.style
 		}}>{props.children}</div>
 	</div>;
 }
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index 27d98cd..4b4b489 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -8,6 +8,7 @@ interface VierkantProps {
 	height?: string;
 	style?: CSSProperties;
 	children?: ReactNode;
+	className?: string;
 }
 
 export function Vierkant(props: VierkantProps) {
@@ -23,7 +24,7 @@ export function Vierkant(props: VierkantProps) {
 		width: props.width ? props.width : undefined,
 		height: props.height ? props.height : undefined,
 		...props.style
-	}} href={props.href}>{props.children}</a>
+	}} href={props.href} className={props.className}>{props.children}</a>
 }
 
 interface ButtonProps {
diff --git a/src/dark.css b/src/dark.css
index d3a6a4c..6d49b43 100644
--- a/src/dark.css
+++ b/src/dark.css
@@ -5,10 +5,5 @@
     --page-background: #11171a;
     --background: #222d33;
     --background-alt: #4d5f69;
-
-    --disk-a: #E16D82;
-    --disk-a-text: #FDC0C4;
-    --disk-b: #73D0C5;
-    --disk-b-text: #C0FDEB;
 }
 
diff --git a/src/global.css b/src/global.css
index f132027..926934d 100644
--- a/src/global.css
+++ b/src/global.css
@@ -61,5 +61,6 @@ input::placeholder {
 :focus { outline: none; }
 
 /* icon size fix */
-.navbar svg { font-size: 24px; }
+.navbar svg,
+.gameBar svg { font-size: 24px; }
 
diff --git a/src/pages/game.tsx b/src/pages/game.tsx
index f3feb89..18007cb 100644
--- a/src/pages/game.tsx
+++ b/src/pages/game.tsx
@@ -6,6 +6,7 @@ import { VoerBord } from '../components/voerBord';
 import { DialogBox } from '../components/dialogBox';
 import { CurrentGameSettings } from '../components/gameSettings';
 import { Button, SearchBar } from '../components/ui';
+import { GameBar } from '../components/gameBar';
 
 import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded';
 import LinkRoundedIcon from '@material-ui/icons/LinkRounded';
@@ -40,8 +41,15 @@ export default function GamePage() {
 	return (
 		<div>
 			<NavBar/>
-			<CenteredPage width={900}>
-				<VoerBord width={7} height={6}/>
+			<CenteredPage width={900} style={{ height: "100vh" }}>
+				<div style={{
+					position: "relative",
+					top: "50%",
+					transform: "translateY(-50%)"
+				}}>
+					<VoerBord width={7} height={6}/>
+					<GameBar/>
+				</div>
 				<DialogBox title="Nieuw spel">
 					<CurrentGameSettings/>
 					<div style={{
-- 
cgit v1.2.3