1 files changed, 87 insertions, 61 deletions

diff --git a/components/gameBar.tsx b/components/gameBar.tsx
index 67712e2..0d7d4d9 100644
--- a/components/gameBar.tsx
+++ b/components/gameBar.tsx
@@ -1,30 +1,35 @@
 import { CSSProperties, ReactNode } from 'react';
-import { Vierkant, Bubble } from './ui';
+import { Bubble, 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';
+import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded';
+import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
 
 function GameBarModule(props: {
 	children?: ReactNode;
 	onclick?: () => void;
 }) {
-	return <Vierkant style={{
-		backgroundColor: "var(--background-alt)",
-		padding: 12,
-		borderRadius: 6,
-		margin: 0,
-		verticalAlign: "top",
-		cursor: props.onclick ? "pointer" : "default"
-	}} onclick={props.onclick}>{props.children}</Vierkant>
+	return <Vierkant
+		style={{
+			backgroundColor: 'var(--background-alt)',
+			padding: 12,
+			borderRadius: 6,
+			margin: 0,
+			verticalAlign: 'top',
+			cursor: props.onclick ? 'pointer' : 'default',
+		}}
+		onclick={props.onclick}
+	>
+		{props.children}
+	</Vierkant>;
 }
 
-var GameBarSpacer = () => <div style={{ width: 8, display: "inline-block" }}></div>;
+var GameBarSpacer = () => <div style={{ width: 8, display: 'inline-block' }}></div>;
 
 var GameBarAlignStyle: CSSProperties = {
-	display: "inline-block"
-}
+	display: 'inline-block',
+};
 
 export function GameBar(props: {
 	turn: boolean;
@@ -32,64 +37,85 @@ export function GameBar(props: {
 	active: boolean;
 	resignFunction: () => void;
 }) {
-	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: props.turn ? "var(--disk-b)" : "var(--disk-a)",
-					borderRadius: 16,
-					display: "inline-block"
-				}}/>
-				<h2 style={{
-					fontSize: 20,
-					margin: 12,
-					verticalAlign: "top",
-					display: "inline-block"
-				}}>{
-					!props.active ? "Wachten op tegenstander..." :
-					props.turn == props.player1 ?
-					"Jouw beurt" : "Tegenstander"
-					}</h2>
+	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: props.turn ? 'var(--disk-b)' : 'var(--disk-a)',
+						borderRadius: 16,
+						display: 'inline-block',
+					}}
+				/>
+				<h2
+					style={{
+						fontSize: 20,
+						margin: 12,
+						verticalAlign: 'top',
+						display: 'inline-block',
+					}}
+				>
+					{!props.active
+						? 'Wachten op tegenstander...'
+						: props.turn == props.player1
+						? 'Jouw beurt'
+						: '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 - .75
-				}}>0-0</span>
+			<div
+				style={{
+					...GameBarAlignStyle,
+					position: 'absolute',
+					top: '50%',
+					left: '50%',
+					transform: 'translate(-50%, -50%)',
+				}}
+			>
+				<span
+					style={{
+						color: 'var(--text)',
+						fontSize: 20,
+						opacity: .75 - .75,
+					}}
+				>
+					0-0
+				</span>
 			</div>
-			<div style={{ ...GameBarAlignStyle, float: "right" }}>
+			<div style={{ ...GameBarAlignStyle, float: 'right' }}>
 				<GameBarModule>
-					<SettingsRoundedIcon/>
+					<SettingsRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer/>
+				<GameBarSpacer />
 				<GameBarModule>
-					<span style={{
-						margin: "0 4px",
-						fontSize: 20
-					}}>00:00</span>
+					<span
+						style={{
+							margin: '0 4px',
+							fontSize: 20,
+						}}
+					>
+						00:00
+					</span>
 				</GameBarModule>
-				<GameBarSpacer/>
+				<GameBarSpacer />
 				<GameBarModule onclick={props.resignFunction}>
-					<ExitToAppRoundedIcon/>
+					<ExitToAppRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer/>
+				<GameBarSpacer />
 				<GameBarModule>
-					<NavigateBeforeRoundedIcon/>
+					<NavigateBeforeRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer/>
+				<GameBarSpacer />
 				<GameBarModule>
-					<NavigateNextRoundedIcon/>
+					<NavigateNextRoundedIcon />
 				</GameBarModule>
 			</div>
 		</div>