aboutsummaryrefslogtreecommitdiff
path: root/src/components/gameBar.tsx
diff options
context:
space:
mode:
authorlonkaars <l.leblansch@gmail.com>2021-01-16 11:40:36 +0100
committerlonkaars <l.leblansch@gmail.com>2021-01-16 11:40:36 +0100
commitd2c2cc62a4c2e1ac10f8434bea7bb834da820869 (patch)
treed8d0ed49957d1103a0fd79d4bb2928d7e1b5846e /src/components/gameBar.tsx
parentbe52cd3265f93b09fc400ecaa58cde0a93ed41e6 (diff)
semi working next project
Diffstat (limited to 'src/components/gameBar.tsx')
-rw-r--r--src/components/gameBar.tsx88
1 files changed, 0 insertions, 88 deletions
diff --git a/src/components/gameBar.tsx b/src/components/gameBar.tsx
deleted file mode 100644
index 53eda88..0000000
--- a/src/components/gameBar.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-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
- }}>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>;
-}