From 2e290d9540cf69d64e3c3b460587ca9a60a3f0b5 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 3 Feb 2021 09:12:26 +0100
Subject: edit game rules form submit

---
 components/gameSettings.tsx | 63 +++++++++++++++++++++++++++++++++++----------
 components/globalState.tsx  |  2 +-
 components/ui.tsx           |  2 ++
 3 files changed, 53 insertions(+), 14 deletions(-)

(limited to 'components')

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,
-- 
cgit v1.2.3