118 lines
4.9 KiB
TypeScript
118 lines
4.9 KiB
TypeScript
import {ActionDispatch, FormEvent, useState} from 'react';
|
|
import ValidatingInputNumberField, {ValidatorFunction} from "./validating-input-number-field.tsx";
|
|
import {Action, actionLoadedMaze, actionLoadingFailed, actionStartedLoading} from "./state/action.ts";
|
|
import styles from "./input-form.module.css";
|
|
import "./input-form.css";
|
|
import {State} from "@/app/state/state.ts";
|
|
|
|
export default function InputForm({state, dispatch}: {
|
|
state: State,
|
|
dispatch: ActionDispatch<[Action]>
|
|
}) {
|
|
const [width, setWidth] = useState(10);
|
|
const [height, setHeight] = useState(10);
|
|
const [id, setId] = useState<number>();
|
|
const [algorithm, setAlgorithm] = useState('wilson');
|
|
|
|
const handleSubmit = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
dispatch(actionStartedLoading());
|
|
const url = `https://manuel.friedli.info/labyrinth/create/json?w=${width}&h=${height}&id=${id || ''}&algorithm=${algorithm}`;
|
|
fetch(url)
|
|
.then(response => response.json())
|
|
// .then(result => new Promise(resolve => setTimeout(resolve, 600, result)))
|
|
.then(result => {
|
|
dispatch(actionLoadedMaze(result));
|
|
})
|
|
.catch(reason => {
|
|
console.error("Failed to fetch maze data.", reason);
|
|
dispatch(actionLoadingFailed(reason));
|
|
});
|
|
};
|
|
const validateWidthHeightInput: ValidatorFunction<string, number> = value => {
|
|
const numberValue = Number(value);
|
|
if (isNaN(numberValue) || "" === value || (Math.floor(numberValue) !== numberValue)) {
|
|
return {
|
|
valid: false,
|
|
message: "Must be an integer greater than 1."
|
|
};
|
|
}
|
|
if (numberValue < 1) {
|
|
return {
|
|
valid: false,
|
|
message: "Must be greater than 1."
|
|
};
|
|
}
|
|
return {
|
|
valid: true,
|
|
value: numberValue
|
|
};
|
|
};
|
|
const validateIdInput: ValidatorFunction<string, number> = value => {
|
|
if ("" === value) {
|
|
return {
|
|
valid: true
|
|
};
|
|
}
|
|
const numberValue = Number(value);
|
|
// FIXME doesn't handle strings with characters correctly (e.g. "asdf" yields an empty value, due to "type=number").
|
|
if (isNaN(numberValue) || Math.floor(numberValue) !== numberValue) {
|
|
return {
|
|
valid: false,
|
|
message: "Must be empty or an integer"
|
|
};
|
|
}
|
|
return {
|
|
valid: true,
|
|
value: numberValue
|
|
}
|
|
};
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<div className={styles.inputform}>
|
|
<ValidatingInputNumberField id={"width"}
|
|
label={"Width"}
|
|
value={width}
|
|
constraints={{
|
|
min: 2
|
|
}}
|
|
validatorFn={validateWidthHeightInput}
|
|
disabled={state.loading}
|
|
onChange={setWidth}
|
|
/>
|
|
<ValidatingInputNumberField id={"height"}
|
|
label={"Height"}
|
|
value={height}
|
|
constraints={{
|
|
min: 2
|
|
}}
|
|
validatorFn={validateWidthHeightInput}
|
|
disabled={state.loading}
|
|
onChange={setHeight}
|
|
/>
|
|
<ValidatingInputNumberField id={"id"}
|
|
label={"ID (optional)"}
|
|
value={id}
|
|
validatorFn={validateIdInput}
|
|
disabled={state.loading}
|
|
onChange={setId}
|
|
/>
|
|
<label htmlFor="algorithm">Algorithm:</label>
|
|
<select id={"algorithm"}
|
|
value={algorithm}
|
|
disabled={state.loading}
|
|
onChange={e => setAlgorithm(e.target.value)}>
|
|
<option value="wilson">Wilson</option>
|
|
<option value="random">Random Depth First</option>
|
|
</select>
|
|
</div>
|
|
<button type={"submit"}
|
|
disabled={state.loading
|
|
|| isNaN(width)
|
|
|| isNaN(height)
|
|
}
|
|
className={styles.submitbutton}>{state.loading ? "Loading ..." : "Create Maze!"}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|