editGameSettings dialog

1 files changed, 119 insertions, 93 deletions

diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index fb5188e..c037fe3 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -1,49 +1,63 @@
-import { ReactNode, CSSProperties } from 'react';
+import { ReactNode, Component } 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%)"
+export class CurrentGameSettings extends Component {
+	state: {
+		editGameRulesDialogVisible: boolean;
+	} = {
+		editGameRulesDialogVisible: false
+	}
+
+	showEditGameRules = () => this.setState({ editGameRulesDialogVisible: true });
+	hideEditGameRules = () => this.setState({ editGameRulesDialogVisible: false });
+
+	render() {
+		return <div style={{
+			position: "relative",
+			height: 80,
+			overflow: "visible",
+			zIndex: 1
 		}}>
-			<BuildRoundedIcon style={{ fontSize: 48 }}/>
-			<span style={{
-				fontWeight: 600,
+			<p style={{
+				opacity: .75,
+				fontStyle: "italic",
+				userSelect: "none",
 				position: "absolute",
-				right: 24,
 				top: "50%",
-				width: 85,
-				verticalAlign: "middle",
-				textAlign: "center",
-				transform: "translateY(-50%)",
-				userSelect: "none"
-			}}>Spelregels aanpassen</span>
-		</Button>
-	</div>;
+				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%)"
+			}} onclick={this.showEditGameRules}>
+				<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>
+			<EditGameSettings parentState={this.state} hideEditGameRules={this.hideEditGameRules}/>
+		</div>;
+	}
 }
 
 function GameSettingsSection(props: {
@@ -73,62 +87,74 @@ function GameSettingsSection(props: {
 	</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
+/* 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>; */
+/* } */
+
+/*
+<GameSettingsSection title="Regelset" state={false}>
+	<div style={{
+		display: "grid",
+		gridTemplateColumns: "1fr 1fr",
+		gridGap: 16,
+		margin: "16px 0"
 	}}>
-		<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>;
-}
+		<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>
+*/
 
-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>;
+export class EditGameSettings extends Component<{
+	parentState: { editGameRulesDialogVisible: boolean; };
+	hideEditGameRules: () => void;
+}> {
+
+	render () {
+		return <DialogBox title="Spelregels aanpassen" style={{
+			margin: 0,
+			display: this.props.parentState.editGameRulesDialogVisible ? "block" : "none"
+		}} onclick={this.props.hideEditGameRules}>
+			<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="Gerangschikt spel" state={true} noMarginBottom/>
+			</div>
+		</DialogBox>;
+	}
 }