aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/dialogBox.tsx15
-rw-r--r--components/gameSettings.tsx212
-rw-r--r--pages/settings.tsx1
3 files changed, 128 insertions, 100 deletions
diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx
index 74fe99b..5ef5c3f 100644
--- a/components/dialogBox.tsx
+++ b/components/dialogBox.tsx
@@ -1,23 +1,25 @@
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
import { Vierkant } from './ui';
import CancelIcon from '@material-ui/icons/Cancel';
-interface DialogBoxProps {
+export function DialogBox(props: {
children: ReactNode;
title: string;
-}
-
-export function DialogBox(props: DialogBoxProps) {
+ style?: CSSProperties;
+ onclick?: () => void;
+}) {
return <Vierkant style={{
position: "fixed",
top: "50%", left: "50%",
transform: "translate(-50%, -50%)",
boxShadow: "0 8px 32px -5px #0007",
- width: 392
+ width: 392,
+ ...props.style
}}>
<h2 style={{ marginBottom: 24 }}>{props.title}</h2>
+ <span onClick={props.onclick}>
<CancelIcon style={{
position: "absolute",
top: 25, right: 25,
@@ -25,6 +27,7 @@ export function DialogBox(props: DialogBoxProps) {
opacity: .85,
cursor: "pointer"
}}/>
+ </span>
{props.children}
</Vierkant>
}
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>;
+ }
}
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 2daa90b..6bb7c46 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -26,7 +26,6 @@ export default function SettingsPage() {
<h2 style={SettingsSectionHeaderStyle}>Standaard spelregels</h2>
<CurrentGameSettings/>
</Vierkant>
- <EditGameSettings/>
</CenteredPage>
</div>
);