Merge pull request #12 from lonkaars/css-files

big redesign css move thing

1 files changed, 17 insertions, 75 deletions

diff --git a/components/gameBar.tsx b/components/gameBar.tsx
index 0d7d4d9..9a7ca59 100644
--- a/components/gameBar.tsx
+++ b/components/gameBar.tsx
@@ -1,5 +1,5 @@
-import { CSSProperties, ReactNode } from 'react';
-import { Bubble, Vierkant } from './ui';
+import { ReactNode } from 'react';
+import { Vierkant } from './ui';
 
 import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
 import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
@@ -9,61 +9,30 @@ import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
 function GameBarModule(props: {
 	children?: ReactNode;
 	onclick?: () => void;
+	className?: string;
 }) {
 	return <Vierkant
-		style={{
-			backgroundColor: 'var(--background-alt)',
-			padding: 12,
-			borderRadius: 6,
-			margin: 0,
-			verticalAlign: 'top',
-			cursor: props.onclick ? 'pointer' : 'default',
-		}}
+		className={'gameBarButton bg-700 pad-m round-t valigntop ' + props.className + ' '
+			+ (props.onclick ? 'cpointer' : '')}
 		onclick={props.onclick}
 	>
 		{props.children}
 	</Vierkant>;
 }
 
-var GameBarSpacer = () => <div style={{ width: 8, display: 'inline-block' }}></div>;
-
-var GameBarAlignStyle: CSSProperties = {
-	display: 'inline-block',
-};
-
 export function GameBar(props: {
 	turn: boolean;
 	player1: boolean;
 	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',
-					}}
-				>
+	return <Vierkant className='gameBar bg-800 w100m2m pad-s'>
+		<div>
+			<div className='floatl dispinbl'>
+				{props.active && <div
+					className={'move dispinbl ' + (props.turn ? 'move-a' : 'move-b')}
+				/>}
+				<h2 className='pad-m valigntop dispinbl'>
 					{!props.active
 						? 'Wachten op tegenstander...'
 						: props.turn == props.player1
@@ -71,49 +40,22 @@ export function GameBar(props: {
 						: '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 className='score winning dispnone subtile posabs abscenter'>
+				<span>0-0</span>
 			</div>
-			<div style={{ ...GameBarAlignStyle, float: 'right' }}>
+			<div className='buttons floatr dispinbl'>
 				<GameBarModule>
 					<SettingsRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer />
-				<GameBarModule>
-					<span
-						style={{
-							margin: '0 4px',
-							fontSize: 20,
-						}}
-					>
-						00:00
-					</span>
+				<GameBarModule className='timer nosel'>
+					<span>00:00</span>
 				</GameBarModule>
-				<GameBarSpacer />
 				<GameBarModule onclick={props.resignFunction}>
 					<ExitToAppRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer />
 				<GameBarModule>
 					<NavigateBeforeRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer />
 				<GameBarModule>
 					<NavigateNextRoundedIcon />
 				</GameBarModule>