diff options
| -rw-r--r-- | components/gameSettings.tsx | 63 | ||||
| -rw-r--r-- | components/globalState.tsx | 2 | ||||
| -rw-r--r-- | components/ui.tsx | 2 | ||||
| -rw-r--r-- | pages/login.tsx | 1 |
4 files changed, 53 insertions, 15 deletions
diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx index b89f429..c41d55a 100644 --- a/components/gameSettings.tsx +++ b/components/gameSettings.tsx @@ -5,15 +5,37 @@ import { DialogBox } from './dialogBox'; import BuildRoundedIcon from '@material-ui/icons/BuildRounded'; +type ruleset = { + timelimit: { + enabled: boolean; + minutes?: number; + seconds?: number; + addmove?: number; + shared: boolean; + }, + ranked: boolean; +}; + +type CurrentGameSettingsStateType = { + editGameRulesDialogVisible: boolean; + ruleset: ruleset; +} + export class CurrentGameSettings extends Component { - state: { - editGameRulesDialogVisible: boolean; - } = { - editGameRulesDialogVisible: false + state: CurrentGameSettingsStateType = { + editGameRulesDialogVisible: false, + ruleset: { // default ruleset (should be replaced in this.constructor()) + timelimit: { + enabled: false, + shared: false + }, + ranked: false + } } showEditGameRules = () => this.setState({ editGameRulesDialogVisible: true }); hideEditGameRules = () => this.setState({ editGameRulesDialogVisible: false }); + setGameRules = (newRules: ruleset) => this.setState({ ruleset: newRules }); render() { return <div style={{ @@ -32,7 +54,6 @@ export class CurrentGameSettings extends Component { transform: "translateY(-50%)" }}> Geen tijdslimiet<br/> - Standaardregels<br/> Gerangschikt </p> <Button style={{ @@ -55,7 +76,7 @@ export class CurrentGameSettings extends Component { userSelect: "none" }}>Spelregels aanpassen</span> </Button> - <EditGameSettings parentState={this.state} hideEditGameRules={this.hideEditGameRules}/> + <EditGameSettings parentState={this.state} hideEditGameRules={this.hideEditGameRules} setGameRules={this.setGameRules}/> </div>; } } @@ -122,13 +143,15 @@ function GameSettingsSection(props: { */ type editGameSettingsProps = { - parentState: { editGameRulesDialogVisible: boolean; }; + parentState: CurrentGameSettingsStateType; hideEditGameRules: () => void; + setGameRules: (newRules: ruleset) => void; }; export class EditGameSettings extends Component<editGameSettingsProps> { constructor(props: editGameSettingsProps) { super(props); + console.log(this.props.parentState) } render () { @@ -142,28 +165,42 @@ export class EditGameSettings extends Component<editGameSettingsProps> { overflowY: "scroll", borderRadius: 8, }}> - <GameSettingsSection title="Tijdslimiet" state={false} id="timelimit"> + <GameSettingsSection title="Tijdslimiet" state={this.props.parentState.ruleset.timelimit.enabled} id="timelimit"> <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gridGap: 16, margin: "16px 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}/> + <Input id="timelimit_minutes" type="number" label="min" min={0} max={60} value={this.props.parentState.ruleset.timelimit.minutes}/> + <Input id="timelimit_seconds" type="number" label="sec" min={0} max={60} value={this.props.parentState.ruleset.timelimit.seconds}/> + <Input id="timelimit_addmove" type="number" label="plus" min={0} value={this.props.parentState.ruleset.timelimit.addmove}/> </div> - <CheckBox state={false}/> + <CheckBox id="timelimit_shared" state={this.props.parentState.ruleset.timelimit.shared}/> <span style={{ verticalAlign: "super", marginLeft: 4 }}>Timer gebruiken voor bijde spelers</span> </GameSettingsSection> - <GameSettingsSection title="Gerangschikt spel" state={true} id="ranked" noMarginBottom/> + <GameSettingsSection title="Gerangschikt spel" state={this.props.parentState.ruleset.ranked} id="ranked" noMarginBottom/> </div> <Button style={{ textAlign: "center", marginTop: 24 + }} onclick={() => { + var rules: ruleset = { + timelimit: { + enabled: document.getElementById("timelimit_enabled").classList.contains("on"), + minutes: Number((document.getElementById("timelimit_minutes") as HTMLInputElement).value), + seconds: Number((document.getElementById("timelimit_seconds") as HTMLInputElement).value), + addmove: Number((document.getElementById("timelimit_addmove") as HTMLInputElement).value), + shared: document.getElementById("timelimit_shared").classList.contains("on"), + }, + ranked: document.getElementById("ranked_enabled").classList.contains("on") + } + this.props.setGameRules(rules); + this.props.hideEditGameRules(); + console.log(rules) }}>Instellingen opslaan</Button> </DialogBox>; } diff --git a/components/globalState.tsx b/components/globalState.tsx index bf6ee40..5b01947 100644 --- a/components/globalState.tsx +++ b/components/globalState.tsx @@ -4,7 +4,7 @@ type globalState = { gameSettings: { timeLimit: { on: boolean; - time: Number; + time: number; useForBoth: boolean; } rankedGame: boolean; diff --git a/components/ui.tsx b/components/ui.tsx index a0c34a4..8745c67 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -66,6 +66,7 @@ export function Input(props: { id?: string; min?: number; max?: number; + value?: string|number; }) { return <input id={props.id} @@ -73,6 +74,7 @@ export function Input(props: { min={props.min} max={props.max} placeholder={props.label} spellCheck={false} + value={props.value} style={{ padding: 12, border: 0, diff --git a/pages/login.tsx b/pages/login.tsx index 0061c70..42411f6 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -1,4 +1,3 @@ -import { v4 as uuidv4 } from 'uuid'; import axios from 'axios'; import { NavBar } from '../components/navbar'; |