diff options
author | lonkaars <l.leblansch@gmail.com> | 2021-01-16 11:40:36 +0100 |
---|---|---|
committer | lonkaars <l.leblansch@gmail.com> | 2021-01-16 11:40:36 +0100 |
commit | d2c2cc62a4c2e1ac10f8434bea7bb834da820869 (patch) | |
tree | d8d0ed49957d1103a0fd79d4bb2928d7e1b5846e /src/components/gameBar.tsx | |
parent | be52cd3265f93b09fc400ecaa58cde0a93ed41e6 (diff) |
semi working next project
Diffstat (limited to 'src/components/gameBar.tsx')
-rw-r--r-- | src/components/gameBar.tsx | 88 |
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>; -} |