input min/max

2 files changed, 23 insertions, 10 deletions

diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index c037fe3..15e3591 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -120,10 +120,15 @@ function GameSettingsSection(props: {
 </GameSettingsSection>
 */
 
-export class EditGameSettings extends Component<{
+type editGameSettingsProps = {
 	parentState: { editGameRulesDialogVisible: boolean; };
 	hideEditGameRules: () => void;
-}> {
+};
+
+export class EditGameSettings extends Component<editGameSettingsProps> {
+	constructor(props: editGameSettingsProps) {
+		super(props);
+	}
 
 	render () {
 		return <DialogBox title="Spelregels aanpassen" style={{
@@ -143,9 +148,9 @@ export class EditGameSettings extends Component<{
 						gridGap: 16,
 						margin: "16px 0"
 					}}>
-						<Input type="number" label="min"/>
-						<Input type="number" label="sec"/>
-						<Input type="number" label="plus"/>
+						<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}/>
 					</div>
 					<CheckBox state={false}/>
 					<span style={{
diff --git a/components/ui.tsx b/components/ui.tsx
index 3afd97a..492bab7 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -58,12 +58,20 @@ export function Button(props: {
 }
 
 export function Input(props: {
-	label?: string,
-	style?: CSSProperties,
-	type?: string,
-	id?: string
+	label?: string;
+	style?: CSSProperties;
+	type?: string;
+	id?: string;
+	min?: number;
+	max?: number;
 }) {
-	return <input id={props.id} type={props.type || "text"} placeholder={props.label} spellCheck={false} style={{
+	return <input
+	id={props.id}
+	type={props.type || "text"}
+	min={props.min} max={props.max}
+	placeholder={props.label}
+	spellCheck={false}
+	style={{
 		padding: 12,
 		border: 0,
 		width: "calc(100% - 24px)",