diff options
| -rw-r--r-- | src/components/gameBar.tsx | 88 | ||||
| -rw-r--r-- | src/components/page.tsx | 6 | ||||
| -rw-r--r-- | src/components/ui.tsx | 3 | ||||
| -rw-r--r-- | src/dark.css | 5 | ||||
| -rw-r--r-- | src/global.css | 3 | ||||
| -rw-r--r-- | src/pages/game.tsx | 12 |
6 files changed, 106 insertions, 11 deletions
diff --git a/src/components/gameBar.tsx b/src/components/gameBar.tsx new file mode 100644 index 0000000..53eda88 --- /dev/null +++ b/src/components/gameBar.tsx @@ -0,0 +1,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 + }}>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>; +} diff --git a/src/components/page.tsx b/src/components/page.tsx index 73981c2..37634a3 100644 --- a/src/components/page.tsx +++ b/src/components/page.tsx @@ -1,8 +1,9 @@ -import { Component, ReactNode } from 'react'; +import { Component, CSSProperties, ReactNode } from 'react'; interface CenteredPageProps { width?: number; children?: ReactNode; + style?: CSSProperties; } export function CenteredPage (props: CenteredPageProps) { @@ -12,7 +13,8 @@ export function CenteredPage (props: CenteredPageProps) { }}> <div className="CenteredPageInner" style={{ margin: "0 6px", - lineHeight: 0 + lineHeight: 0, + ...props.style }}>{props.children}</div> </div>; } diff --git a/src/components/ui.tsx b/src/components/ui.tsx index 27d98cd..4b4b489 100644 --- a/src/components/ui.tsx +++ b/src/components/ui.tsx @@ -8,6 +8,7 @@ interface VierkantProps { height?: string; style?: CSSProperties; children?: ReactNode; + className?: string; } export function Vierkant(props: VierkantProps) { @@ -23,7 +24,7 @@ export function Vierkant(props: VierkantProps) { width: props.width ? props.width : undefined, height: props.height ? props.height : undefined, ...props.style - }} href={props.href}>{props.children}</a> + }} href={props.href} className={props.className}>{props.children}</a> } interface ButtonProps { diff --git a/src/dark.css b/src/dark.css index d3a6a4c..6d49b43 100644 --- a/src/dark.css +++ b/src/dark.css @@ -5,10 +5,5 @@ --page-background: #11171a; --background: #222d33; --background-alt: #4d5f69; - - --disk-a: #E16D82; - --disk-a-text: #FDC0C4; - --disk-b: #73D0C5; - --disk-b-text: #C0FDEB; } diff --git a/src/global.css b/src/global.css index f132027..926934d 100644 --- a/src/global.css +++ b/src/global.css @@ -61,5 +61,6 @@ input::placeholder { :focus { outline: none; } /* icon size fix */ -.navbar svg { font-size: 24px; } +.navbar svg, +.gameBar svg { font-size: 24px; } diff --git a/src/pages/game.tsx b/src/pages/game.tsx index f3feb89..18007cb 100644 --- a/src/pages/game.tsx +++ b/src/pages/game.tsx @@ -6,6 +6,7 @@ import { VoerBord } from '../components/voerBord'; import { DialogBox } from '../components/dialogBox'; import { CurrentGameSettings } from '../components/gameSettings'; import { Button, SearchBar } from '../components/ui'; +import { GameBar } from '../components/gameBar'; import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded'; import LinkRoundedIcon from '@material-ui/icons/LinkRounded'; @@ -40,8 +41,15 @@ export default function GamePage() { return ( <div> <NavBar/> - <CenteredPage width={900}> - <VoerBord width={7} height={6}/> + <CenteredPage width={900} style={{ height: "100vh" }}> + <div style={{ + position: "relative", + top: "50%", + transform: "translateY(-50%)" + }}> + <VoerBord width={7} height={6}/> + <GameBar/> + </div> <DialogBox title="Nieuw spel"> <CurrentGameSettings/> <div style={{ |