1 files changed, 134 insertions, 0 deletions
diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
new file mode 100644
index 0000000..fb5188e
--- /dev/null
+++ b/components/gameSettings.tsx
@@ -0,0 +1,134 @@
+import { ReactNode, CSSProperties } 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%)"
+		}}>
+			<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>
+	</div>;
+}
+
+function GameSettingsSection(props: {
+	children?: ReactNode;
+	title: string;
+	state: boolean;
+	noMarginBottom?: boolean;
+}) {
+	return <Vierkant style={{
+		backgroundColor: "var(--background-alt)",
+		width: "100%",
+		padding: 16,
+		margin: 0,
+		marginBottom: props.noMarginBottom ? 0 : 24
+	}}>
+	<span style={{
+		verticalAlign: "top",
+		fontSize: 14,
+		fontWeight: 600
+	}}>{props.title}</span>
+	<CheckBox state={props.state} style={{
+		verticalAlign: "top",
+		float: "right",
+		margin: -3
+	}}/>
+	<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",
+			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>;
+}