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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
import { CSSProperties, ReactNode } from 'react';
import { Bubble, Vierkant } from './ui';
import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
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>;
}
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>;
}
|