added ui id's and checkbox state class

2 files changed, 24 insertions, 16 deletions

diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index 15e3591..b89f429 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -65,8 +65,9 @@ function GameSettingsSection(props: {
 	title: string;
 	state: boolean;
 	noMarginBottom?: boolean;
+	id: string;
 }) {
-	return <Vierkant style={{
+	return <Vierkant id={props.id} style={{
 		backgroundColor: "var(--background-alt)",
 		width: "100%",
 		padding: 16,
@@ -78,7 +79,7 @@ function GameSettingsSection(props: {
 		fontSize: 14,
 		fontWeight: 600
 	}}>{props.title}</span>
-	<CheckBox state={props.state} style={{
+	<CheckBox state={props.state} id={`${props.id}_enabled`} style={{
 		verticalAlign: "top",
 		float: "right",
 		margin: -3
@@ -141,16 +142,16 @@ export class EditGameSettings extends Component<editGameSettingsProps> {
 				overflowY: "scroll",
 				borderRadius: 8,
 			}}>
-				<GameSettingsSection title="Tijdslimiet" state={false}>
+				<GameSettingsSection title="Tijdslimiet" state={false} id="timelimit">
 					<div style={{
 						display: "grid",
 						gridTemplateColumns: "1fr 1fr 1fr",
 						gridGap: 16,
 						margin: "16px 0"
 					}}>
-						<Input type="number" label="min" min={0} max={60}/>
-						<Input type="number" label="sec" min={0} max={60}/>
-						<Input type="number" label="plus" min={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}/>
 					</div>
 					<CheckBox state={false}/>
 					<span style={{
@@ -158,8 +159,12 @@ export class EditGameSettings extends Component<editGameSettingsProps> {
 						marginLeft: 4
 					}}>Timer gebruiken voor bijde spelers</span>
 				</GameSettingsSection>
-				<GameSettingsSection title="Gerangschikt spel" state={true} noMarginBottom/>
+				<GameSettingsSection title="Gerangschikt spel" state={true} id="ranked" noMarginBottom/>
 			</div>
+			<Button style={{
+				textAlign: "center",
+				marginTop: 24
+			}}>Instellingen opslaan</Button>
 		</DialogBox>;
 	}
 }
diff --git a/components/ui.tsx b/components/ui.tsx
index 492bab7..a0c34a4 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -10,8 +10,9 @@ export function Vierkant(props: {
 	height?: string;
 	style?: CSSProperties;
 	children?: ReactNode;
-	className?: string; })
-{
+	className?: string;
+	id?: string;
+}) {
 	return <a style={{
 		padding: 24,
 		backgroundColor: "var(--background)",
@@ -24,7 +25,7 @@ export function Vierkant(props: {
 		width: props.width ? props.width : undefined,
 		height: props.height ? props.height : undefined,
 		...props.style
-	}} href={props.href} className={props.className}>{props.children}</a>
+	}} href={props.href} className={props.className} id={props.id}>{props.children}</a>
 }
 
 export function Button(props: {
@@ -32,9 +33,10 @@ export function Button(props: {
 	children?: ReactNode;
 	style?: CSSProperties;
 	href?: string;
-	onclick?: (() => void); })
-{
-	return <a onClick={props.onclick} href={props.href} style={{
+	onclick?: (() => void);
+	id?: string;
+}) {
+	return <a onClick={props.onclick} href={props.href} id={props.id} style={{
 		padding: props.text ? 8 : 16,
 		textAlign: props.text ? "center" : "left",
 		borderRadius: 8,
@@ -115,14 +117,15 @@ export function SearchBar(props: { label?: string }) {
 }
 
 export class CheckBox extends Component<{
-	state?: boolean,
-	style?: CSSProperties
+	state?: boolean;
+	style?: CSSProperties;
+	id?: string;
 }> {
 	state = { on: this.props.state || false }
 	public toggle = () => this.setState({ on: !this.state.on })
 
 	render() {
-		return <div onClick={this.toggle} style={{
+		return <div onClick={this.toggle} id={this.props.id} className={this.state.on ? "on" : "off"} style={{
 			...this.props.style,
 			display: "inline-block",
 			cursor: "pointer"