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"
+    ]
   }
 }

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}/>
+                </>
+            }
+        </>
     );
 }

src/InputForm.js

@@ -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}

src/ValidatingInputNumberField.js

@@ -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>}
+        </>
     );
 }

src/styles.css

@@ -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;
 }