diff options
Diffstat (limited to 'src/components/gameSettings.tsx')
-rw-r--r-- | src/components/gameSettings.tsx | 134 |
1 files changed, 0 insertions, 134 deletions
diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx deleted file mode 100644 index fb5188e..0000000 --- a/src/components/gameSettings.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import { ReactNode, CSSProperties } from 'react'; - -import { Button, Vierkant, CheckBox, Input } from './ui'; -import { DialogBox } from './dialogBox'; - -import BuildRoundedIcon from '@material-ui/icons/BuildRounded'; - -export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { - return <div style={{ - position: "relative", - height: 80 - }}> - <p style={{ - opacity: .75, - 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%)", - userSelect: "none" - }}>Spelregels aanpassen</span> - </Button> - </div>; -} - -function GameSettingsSection(props: { - children?: ReactNode; - title: string; - state: boolean; - noMarginBottom?: boolean; -}) { - return <Vierkant style={{ - backgroundColor: "var(--background-alt)", - width: "100%", - padding: 16, - margin: 0, - marginBottom: props.noMarginBottom ? 0 : 24 - }}> - <span style={{ - verticalAlign: "top", - fontSize: 14, - fontWeight: 600 - }}>{props.title}</span> - <CheckBox state={props.state} style={{ - verticalAlign: "top", - float: "right", - margin: -3 - }}/> - <div>{props.children}</div> - </Vierkant> -} - -function GameRule(props: { - title: string; - description: string; - style?: CSSProperties; -}) { - return <div style={{ - backgroundColor: "var(--page-background)", - borderRadius: 8, - padding: "16px 0", - textAlign: "center", - ...props.style - }}> - <h1 style={{ color: "var(--disk-a)", fontSize: 42 }}>{props.title}</h1> - <p style={{ color: "var(--text-alt)", maxWidth: 250, margin: "0 auto" }}>{props.description}</p> - </div>; -} - -export function EditGameSettings() { - return <DialogBox title="Spelregels aanpassen"> - <div style={{ - marginTop: 24, - maxHeight: 500, - overflowY: "scroll", - borderRadius: 8 - }}> - <GameSettingsSection title="Tijdslimiet" state={false}> - <div style={{ - display: "grid", - gridTemplateColumns: "1fr 1fr 1fr", - gridGap: 16, - margin: "16px 0" - }}> - <Input type="number" label="min"/> - <Input type="number" label="sec"/> - <Input type="number" label="plus"/> - </div> - <CheckBox state={false}/> - <span style={{ - verticalAlign: "super", - marginLeft: 4 - }}>Timer gebruiken voor bijde spelers</span> - </GameSettingsSection> - <GameSettingsSection title="Regelset" state={false}> - <div style={{ - display: "grid", - gridTemplateColumns: "1fr 1fr", - gridGap: 16, - margin: "16px 0" - }}> - <GameRule title="+2" description="Extra kolommen"/> - <GameRule title="+4" description="Extra kolommen"/> - </div> - <GameRule style={{ marginBottom: 16 }} title="Gravity" description="De zwaartekracht draait soms"/> - <GameRule title="Flashlight" description="Het veld wordt opgelicht door de vallende fiches"/> - </GameSettingsSection> - <GameSettingsSection title="Gerangschikt spel" state={true} noMarginBottom/> - </div> - </DialogBox>; -} |