blob: 9a7ca59b8f94dfc60536b01f2ce8c891b93da871 (
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
|
import { ReactNode } from 'react';
import { 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;
className?: string;
}) {
return <Vierkant
className={'gameBarButton bg-700 pad-m round-t valigntop ' + props.className + ' '
+ (props.onclick ? 'cpointer' : '')}
onclick={props.onclick}
>
{props.children}
</Vierkant>;
}
export function GameBar(props: {
turn: boolean;
player1: boolean;
active: boolean;
resignFunction: () => void;
}) {
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
? 'Jouw beurt'
: 'Tegenstander'}
</h2>
</div>
<div className='score winning dispnone subtile posabs abscenter'>
<span>0-0</span>
</div>
<div className='buttons floatr dispinbl'>
<GameBarModule>
<SettingsRoundedIcon />
</GameBarModule>
<GameBarModule className='timer nosel'>
<span>00:00</span>
</GameBarModule>
<GameBarModule onclick={props.resignFunction}>
<ExitToAppRoundedIcon />
</GameBarModule>
<GameBarModule>
<NavigateBeforeRoundedIcon />
</GameBarModule>
<GameBarModule>
<NavigateNextRoundedIcon />
</GameBarModule>
</div>
</div>
</Vierkant>;
}
|