Enable use of <>-fragment (update dependencies).

Update style of solution-AND-usermarked fields.

package.json

@@ -6,7 +6,7 @@
   },
   "main": "/index.js",
   "devDependencies": {
-    "react-scripts": "1.0.0"
+    "react-scripts": "^5.0.0"
   },
   "name": "a-maze-r",
   "description": "The A-Maze-Ing Generator!",
@@ -16,5 +16,17 @@
     "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}, ID: {maze.id})</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}
-            <Maze labyrinth={maze}
-                  showSolution={true}/>
-        </div>
+            {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={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"
 

src/ValidatingInputNumberField.js

@@ -24,14 +24,8 @@ export default function ValidatingInputNumberField({
         }
         onChange(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"}
@@ -41,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;
 }