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
|
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() {
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: "var(--disk-b)",
borderRadius: 16,
display: "inline-block"
}}/>
<h2 style={{
fontSize: 20,
margin: 12,
verticalAlign: "top",
display: "inline-block"
}}>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>;
}
|