diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/gameSettings.tsx | 49 |
1 files changed, 41 insertions, 8 deletions
diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx index 79a5029..fb5188e 100644 --- a/src/components/gameSettings.tsx +++ b/src/components/gameSettings.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from 'react'; +import { ReactNode, CSSProperties } from 'react'; import { Button, Vierkant, CheckBox, Input } from './ui'; import { DialogBox } from './dialogBox'; @@ -50,11 +50,14 @@ function GameSettingsSection(props: { children?: ReactNode; title: string; state: boolean; + noMarginBottom?: boolean; }) { return <Vierkant style={{ backgroundColor: "var(--background-alt)", - width: "calc(100% - 12px)", - padding: 16 + width: "100%", + padding: 16, + margin: 0, + marginBottom: props.noMarginBottom ? 0 : 24 }}> <span style={{ verticalAlign: "top", @@ -66,25 +69,41 @@ function GameSettingsSection(props: { float: "right", margin: -3 }}/> - <div style={{ - marginTop: 16 - }}>{props.children}</div> + <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" + overflowY: "scroll", + borderRadius: 8 }}> <GameSettingsSection title="Tijdslimiet" state={false}> <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gridGap: 16, - marginBottom: 16 + margin: "16px 0" }}> <Input type="number" label="min"/> <Input type="number" label="sec"/> @@ -96,6 +115,20 @@ export function EditGameSettings() { 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>; } |