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
92
93
94
95
96
97
|
import { CSSProperties, ReactNode } from 'react';
import { Vierkant, Bubble } 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';
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>
}
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"
}}>{
!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>
<div style={{ ...GameBarAlignStyle, float: "right" }}>
<GameBarModule>
<SettingsRoundedIcon/>
</GameBarModule>
<GameBarSpacer/>
<GameBarModule>
<span style={{
margin: "0 4px",
fontSize: 20
}}>00:00</span>
</GameBarModule>
<GameBarSpacer/>
<GameBarModule onclick={props.resignFunction}>
<ExitToAppRoundedIcon/>
</GameBarModule>
<GameBarSpacer/>
<GameBarModule>
<NavigateBeforeRoundedIcon/>
</GameBarModule>
<GameBarSpacer/>
<GameBarModule>
<NavigateNextRoundedIcon/>
</GameBarModule>
</div>
</div>
</Vierkant>;
}
|