semi werkende checkbox

2 files changed, 49 insertions, 31 deletions

diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx
index 9f96c52..19eadb7 100644
--- a/src/components/gameSettings.tsx
+++ b/src/components/gameSettings.tsx
@@ -1,11 +1,9 @@
-// interface CurrentGameSettingsProps {
-// gameID: string;
-// }
+import { ReactNode } from 'react';
 
-import { Button } from './ui';
+import { Button, Vierkant, CheckBox } from './ui';
+import { DialogBox } from './dialogBox';
 
 import BuildRoundedIcon from '@material-ui/icons/BuildRounded';
-import {DialogBox} from './dialogBox';
 
 export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) {
 	return <div style={{
@@ -46,7 +44,21 @@ export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) {
 			}}>Spelregels aanpassen</span>
 		</Button>
 	</div>;
+}
+
+interface GameSettingsSectionProps {
+	children?: ReactNode;
+	title: string;
+	state: boolean;
+}
 
+function GameSettingsSection(props: GameSettingsSectionProps) {
+	return <Vierkant style={{
+		backgroundColor: "var(--background-alt)",
+		width: "calc(100% - 12px)"
+	}}>
+	<div>{props.children}</div>
+	</Vierkant>
 }
 
 export function EditGameSettings() {
@@ -56,16 +68,9 @@ export function EditGameSettings() {
 			maxHeight: 500,
 			overflowY: "scroll"
 		}}>
-			<span>Hier is een scrollende pagina in een dialoogvenster</span>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
+			<CheckBox state={false}/>
+			<GameSettingsSection title="Tijdslimiet" state={false}>
+			</GameSettingsSection>
 		</div>
 	</DialogBox>;
 }
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index 4b4b489..a9ca479 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -1,17 +1,17 @@
-import { CSSProperties, ReactNode } from "react";
+import { Component, CSSProperties, ReactNode } from "react";
 
 import SearchIcon from '@material-ui/icons/Search';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
 
-interface VierkantProps {
+export function Vierkant(props: {
 	href?: string;
 	width?: string;
 	height?: string;
 	style?: CSSProperties;
 	children?: ReactNode;
-	className?: string;
-}
-
-export function Vierkant(props: VierkantProps) {
+	className?: string; })
+{
 	return <a style={{
 		padding: 24,
 		backgroundColor: "var(--background)",
@@ -27,14 +27,12 @@ export function Vierkant(props: VierkantProps) {
 	}} href={props.href} className={props.className}>{props.children}</a>
 }
 
-interface ButtonProps {
+export function Button(props: {
 	text?: string;
 	children?: ReactNode;
 	style?: CSSProperties;
-	onclick?: (() => void);
-}
-
-export function Button(props: ButtonProps) {
+	onclick?: (() => void); })
+{
 	return <div onClick={props.onclick} style={{
 		padding: props.text ? 8 : 16,
 		textAlign: props.text ? "center" : "left",
@@ -56,11 +54,7 @@ export function Button(props: ButtonProps) {
 	</div>;
 }
 
-interface SearchBarProps {
-	label?: string;
-}
-
-export function SearchBar(props: SearchBarProps) {
+export function Input(props: { label?: string }) {
 	return <div style={{
 		marginTop: 24,
 		borderRadius: 8,
@@ -96,3 +90,22 @@ export function SearchBar(props: SearchBarProps) {
 	</div>
 }
 
+export class CheckBox extends Component<{
+	state?: boolean
+}> {
+	state = { on: this.props.state || false }
+	public toggle = () => this.setState({ on: !this.state.on })
+
+	render() {
+		return <div onClick={this.toggle}>
+		{
+			this.state.on ?
+			<CheckBoxIcon style={{ fontSize: 24 }}/> :
+			<CheckBoxOutlineBlankIcon style={{ fontSize: 24 }}/>
+		}
+		</div>;
+	}
+}
+
+
+