aboutsummaryrefslogtreecommitdiff
path: root/components/gameBar.tsx
blob: a2ced12f7510c686d7b8e33bdff6d563b630db20 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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(props: {
	turn: boolean;
	player1: boolean;
}) {
	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.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>
			<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>;
}