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
|
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
className={'gameBarButton bg-700 pad-m round-t valigntop ' + (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 bg-800 w100m2m pad-s'>
<div>
<div style={{ ...GameBarAlignStyle, float: 'left' }}>
{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
? '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>;
}
|