diff options
| -rw-r--r-- | components/gameSettings.tsx | 19 | ||||
| -rw-r--r-- | components/ui.tsx | 21 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | yarn.lock | 5 |
4 files changed, 31 insertions, 17 deletions
diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx index 15e3591..b89f429 100644 --- a/components/gameSettings.tsx +++ b/components/gameSettings.tsx @@ -65,8 +65,9 @@ function GameSettingsSection(props: { title: string; state: boolean; noMarginBottom?: boolean; + id: string; }) { - return <Vierkant style={{ + return <Vierkant id={props.id} style={{ backgroundColor: "var(--background-alt)", width: "100%", padding: 16, @@ -78,7 +79,7 @@ function GameSettingsSection(props: { fontSize: 14, fontWeight: 600 }}>{props.title}</span> - <CheckBox state={props.state} style={{ + <CheckBox state={props.state} id={`${props.id}_enabled`} style={{ verticalAlign: "top", float: "right", margin: -3 @@ -141,16 +142,16 @@ export class EditGameSettings extends Component<editGameSettingsProps> { overflowY: "scroll", borderRadius: 8, }}> - <GameSettingsSection title="Tijdslimiet" state={false}> + <GameSettingsSection title="Tijdslimiet" state={false} id="timelimit"> <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gridGap: 16, margin: "16px 0" }}> - <Input type="number" label="min" min={0} max={60}/> - <Input type="number" label="sec" min={0} max={60}/> - <Input type="number" label="plus" min={0}/> + <Input id="timelimit_minutes" type="number" label="min" min={0} max={60}/> + <Input id="timelimit_seconds" type="number" label="sec" min={0} max={60}/> + <Input id="timelimit_addmove" type="number" label="plus" min={0}/> </div> <CheckBox state={false}/> <span style={{ @@ -158,8 +159,12 @@ export class EditGameSettings extends Component<editGameSettingsProps> { marginLeft: 4 }}>Timer gebruiken voor bijde spelers</span> </GameSettingsSection> - <GameSettingsSection title="Gerangschikt spel" state={true} noMarginBottom/> + <GameSettingsSection title="Gerangschikt spel" state={true} id="ranked" noMarginBottom/> </div> + <Button style={{ + textAlign: "center", + marginTop: 24 + }}>Instellingen opslaan</Button> </DialogBox>; } } diff --git a/components/ui.tsx b/components/ui.tsx index 492bab7..a0c34a4 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -10,8 +10,9 @@ export function Vierkant(props: { height?: string; style?: CSSProperties; children?: ReactNode; - className?: string; }) -{ + className?: string; + id?: string; +}) { return <a style={{ padding: 24, backgroundColor: "var(--background)", @@ -24,7 +25,7 @@ export function Vierkant(props: { width: props.width ? props.width : undefined, height: props.height ? props.height : undefined, ...props.style - }} href={props.href} className={props.className}>{props.children}</a> + }} href={props.href} className={props.className} id={props.id}>{props.children}</a> } export function Button(props: { @@ -32,9 +33,10 @@ export function Button(props: { children?: ReactNode; style?: CSSProperties; href?: string; - onclick?: (() => void); }) -{ - return <a onClick={props.onclick} href={props.href} style={{ + onclick?: (() => void); + id?: string; +}) { + return <a onClick={props.onclick} href={props.href} id={props.id} style={{ padding: props.text ? 8 : 16, textAlign: props.text ? "center" : "left", borderRadius: 8, @@ -115,14 +117,15 @@ export function SearchBar(props: { label?: string }) { } export class CheckBox extends Component<{ - state?: boolean, - style?: CSSProperties + state?: boolean; + style?: CSSProperties; + id?: string; }> { state = { on: this.props.state || false } public toggle = () => this.setState({ on: !this.state.on }) render() { - return <div onClick={this.toggle} style={{ + return <div onClick={this.toggle} id={this.props.id} className={this.state.on ? "on" : "off"} style={{ ...this.props.style, display: "inline-block", cursor: "pointer" diff --git a/package.json b/package.json index be14a14..e6b0373 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "swr": "^0.4.0", "typescript": "^4.1.3", "uuid": "^8.3.2", - "web-vitals": "^0.2.4" + "web-vitals": "^0.2.4", + "zustand": "^3.3.1" }, "scripts": { "dev": "next dev", @@ -12733,3 +12733,8 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +zustand@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.3.1.tgz#de5c4b51112b84e0f819d8b3f336fbfbc087d758" + integrity sha512-o0rgrBsi29nCkPHdhtkAHisCIlmRUoXOV+1AmDMeCgkGG0i5edFSpGU0KiZYBvFmBYycnck4Z07JsLYDjSET9g== |