Merge pull request 'feature/polish' (#2) from feature/polish into main
Reviewed-on: #2
This commit is contained in:
commit
de6b2e8946
6 changed files with 13903 additions and 9768 deletions
23470
package-lock.json
generated
23470
package-lock.json
generated
File diff suppressed because it is too large
Load diff
21
package.json
21
package.json
|
|
@ -1,20 +1,31 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-scripts": "^5.0.0"
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"main": "/index.js",
|
||||
"devDependencies": {
|
||||
"react-scripts": "1.0.0"
|
||||
"react-scripts": "^5.0.1"
|
||||
},
|
||||
"name": "ljg0t8",
|
||||
"description": null,
|
||||
"name": "a-maze-r",
|
||||
"description": "The A-Maze-Ing Generator!",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
28
src/App.js
28
src/App.js
|
|
@ -4,18 +4,26 @@ import InputForm from "./InputForm";
|
|||
|
||||
export default function App() {
|
||||
const [maze, setMaze] = useState({});
|
||||
let title;
|
||||
if (!!maze.grid) {
|
||||
title = <h1>The Maze ({maze.width}x{maze.height})</h1>;
|
||||
} else {
|
||||
title = <span/>;
|
||||
}
|
||||
const [showSolution, setShowSolution] = useState(false);
|
||||
const hasValidMaze = !!maze.width &&
|
||||
!!maze.height &&
|
||||
!!maze.id &&
|
||||
!!maze.grid;
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<InputForm handleResult={setMaze}/>
|
||||
{title}
|
||||
{hasValidMaze &&
|
||||
<>
|
||||
<h1>The Maze ({maze.width}x{maze.height}, ID: {maze.id})</h1>
|
||||
<input type={"checkbox"}
|
||||
onChange={(e) => {
|
||||
setShowSolution(e.target.checked);
|
||||
}}
|
||||
id={"showSolution"}/><label htmlFor="showSolution">Show Solution</label>
|
||||
<Maze labyrinth={maze}
|
||||
showSolution={true}/>
|
||||
</div>
|
||||
showSolution={showSolution}/>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import React, {useState} from 'react';
|
|||
import ValidatingInputNumberField from "./ValidatingInputNumberField";
|
||||
|
||||
export default function InputForm({handleResult}) {
|
||||
const [width, setWidth] = useState(2);
|
||||
const [height, setHeight] = useState(2);
|
||||
const [width, setWidth] = useState(10);
|
||||
const [height, setHeight] = useState(10);
|
||||
const [id, setId] = useState(null);
|
||||
const [status, setStatus] = useState("typing"); // "typing", "submitting"
|
||||
|
||||
|
|
@ -20,7 +20,6 @@ export default function InputForm({handleResult}) {
|
|||
.then(response => response.json())
|
||||
.then(result => {
|
||||
handleResult(result);
|
||||
// FIXME doesn't update the contents of the text input field.
|
||||
setId(_ => result.id);
|
||||
})
|
||||
.catch(reason => {
|
||||
|
|
@ -75,7 +74,7 @@ export default function InputForm({handleResult}) {
|
|||
<form onSubmit={handleSubmit}>
|
||||
<ValidatingInputNumberField id={"width"}
|
||||
label={"Width"}
|
||||
defaultValue={width}
|
||||
value={width}
|
||||
constraints={{
|
||||
min: 2
|
||||
}}
|
||||
|
|
@ -85,7 +84,7 @@ export default function InputForm({handleResult}) {
|
|||
/><br/>
|
||||
<ValidatingInputNumberField id={"height"}
|
||||
label={"Height"}
|
||||
defaultValue={height}
|
||||
value={height}
|
||||
constraints={{
|
||||
min: 2
|
||||
}}
|
||||
|
|
@ -95,7 +94,7 @@ export default function InputForm({handleResult}) {
|
|||
/><br/>
|
||||
<ValidatingInputNumberField id={"id"}
|
||||
label={"ID (optional)"}
|
||||
defaultValue={id}
|
||||
value={id}
|
||||
validatorFn={validateIdInput}
|
||||
disabled={status === "submitting"}
|
||||
onChange={setId}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React, {useState} from 'react';
|
|||
export default function ValidatingInputNumberField({
|
||||
id,
|
||||
label,
|
||||
defaultValue = 0,
|
||||
value = 0,
|
||||
constraints = {},
|
||||
validatorFn = (value) => {
|
||||
return {valid: true, value};
|
||||
|
|
@ -13,7 +13,6 @@ export default function ValidatingInputNumberField({
|
|||
}
|
||||
}) {
|
||||
const [error, setError] = useState(null);
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
|
||||
const handleValueChange = (e) => {
|
||||
const value = e.target.value;
|
||||
|
|
@ -22,18 +21,11 @@ export default function ValidatingInputNumberField({
|
|||
setError(validation.message);
|
||||
} else {
|
||||
setError(null);
|
||||
}
|
||||
onChange(validation.value);
|
||||
}
|
||||
setValue(validation.value);
|
||||
};
|
||||
let errorComponent;
|
||||
if (!!error) {
|
||||
errorComponent = <span>{error}</span>;
|
||||
} else {
|
||||
errorComponent = <span/>;
|
||||
}
|
||||
return (
|
||||
<span>
|
||||
<>
|
||||
<label htmlFor={id}>{label}: </label>
|
||||
<input id={id}
|
||||
type={"number"}
|
||||
|
|
@ -43,7 +35,7 @@ export default function ValidatingInputNumberField({
|
|||
max={constraints.max || null}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{errorComponent}
|
||||
</span>
|
||||
{!!error && <span>{error}</span>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,12 @@ div.cell.bottom {
|
|||
div.cell.left {
|
||||
border-left-color: #000;
|
||||
}
|
||||
|
||||
div.cell.user {
|
||||
background-color: hotpink;
|
||||
}
|
||||
div.cell.solution.user {
|
||||
background-color: darkred;
|
||||
}
|
||||
input:invalid {
|
||||
border-color: #f00;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue