diff options
| -rw-r--r-- | src/components/gameSettings.tsx | 44 | ||||
| -rw-r--r-- | src/components/ui.tsx | 29 |
2 files changed, 68 insertions, 5 deletions
diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx index 86dea5b..bd28221 100644 --- a/src/components/gameSettings.tsx +++ b/src/components/gameSettings.tsx @@ -2,13 +2,47 @@ // gameID: string; // } +import { Button } from './ui'; + +import BuildRoundedIcon from '@material-ui/icons/BuildRounded'; + export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { - return <div> - <p style={{ opacity: .6, fontStyle: "italic" }}> - Geen tijdslimiet<br/> - Standaardregels<br/> - Gerangschikt + return <div style={{ + position: "relative", + height: 80 + }}> + <p style={{ + opacity: .6, + fontStyle: "italic", + userSelect: "none", + position: "absolute", + top: "50%", + left: 0, + transform: "translateY(-50%)" + }}> + Geen tijdslimiet<br/> + Standaardregels<br/> + Gerangschikt </p> + <Button style={{ + width: 150, + position: "absolute", + top: "50%", + right: 0, + transform: "translateY(-50%)" + }}> + <BuildRoundedIcon style={{ fontSize: 48 }}/> + <span style={{ + fontWeight: 600, + position: "absolute", + right: 24, + top: "50%", + width: 85, + verticalAlign: "middle", + textAlign: "center", + transform: "translateY(-50%)" + }}>Spelregels aanpassen</span> + </Button> </div>; } diff --git a/src/components/ui.tsx b/src/components/ui.tsx index 558eab8..d869151 100644 --- a/src/components/ui.tsx +++ b/src/components/ui.tsx @@ -24,3 +24,32 @@ export function Vierkant(props: VierkantProps) { }} href={props.href}>{props.children}</a> } +interface ButtonProps { + text?: string; + children?: ReactNode; + style?: CSSProperties; + onclick?: (() => void); +} + +export function Button(props: ButtonProps) { + return <div onClick={props.onclick} style={{ + padding: props.text ? 8 : 16, + textAlign: props.text ? "center" : "left", + borderRadius: 8, + backgroundColor: "var(--disk-a)", + cursor: "pointer", + position: "relative", + ...props.style + }}> + { + props.text ? + <span style={{ + fontWeight: 600, + userSelect: "none" + }}>{props.text}</span> + : undefined + } + { props.children } + </div>; +} + |