package.json

@@ -4,6 +4,7 @@
     "react-dom": "^18.0.0"
   },
   "main": "/index.js",
+  "homepage": ".",
   "devDependencies": {
     "react-scripts": "^5.0.1"
   },

src/InputForm.js

@@ -5,19 +5,17 @@ export default function InputForm({handleResult}) {
     const [width, setWidth] = useState(10);
     const [height, setHeight] = useState(10);
     const [id, setId] = useState(null);
-    const [status, setStatus] = useState("typing"); // "typing", "submitting"
+    const [status, setStatus] = useState("ready"); // "ready", "submitting"
 
     if (status === "submitted") {
         return <span/>;
     }
     const callAPI = () => {
-        let url = "https://manuel.friedli.info/labyrinth/create/json?w=" + width +
+        handleResult({});
-            "&h=" + height;
+        const url = `https://manuel.friedli.info/labyrinth/create/json?w=${width}&h=${height}&id=${id || ''}`;
-        if (!!id) {
-            url += "&id=" + id;
-        }
         fetch(url)
             .then(response => response.json())
+            // .then(result => new Promise(resolve => setTimeout(resolve, 600, result)))
             .then(result => {
                 handleResult(result);
                 setId(_ => result.id);
@@ -25,10 +23,10 @@ export default function InputForm({handleResult}) {
             .catch(reason => {
                 console.error("Failed to fetch maze data.", reason);
                 // FIXME alert is not user friendly
-                alert("Failed to fetch maze data: " + reason);
+                alert(`Failed to fetch maze data: ${reason}`);
             })
             .finally(() => {
-                setStatus("typing");
+                setStatus("ready");
             });
     };
     const handleSubmit = (e) => {
@@ -103,7 +101,7 @@ export default function InputForm({handleResult}) {
                     disabled={status === "submitting"
                         || isNaN(width)
                         || isNaN(height)
-                    }>GO!
+                    }>{status === "ready" ? "Create" : "Loading ..."}
             </button>
         </form>
     );

src/Maze.js

@@ -7,7 +7,8 @@ export default function Maze({labyrinth, showSolution = false}) {
         return <div>No valid maze.</div>
     }
 
-    const maze = labyrinth.grid.map((row, rowIdx) => <Row key={"r" + rowIdx} spec={row}
+    const maze = labyrinth.grid.map((row, rowIdx) => <Row key={rowIdx}
+                                                          spec={row}
                                                           index={rowIdx}
                                                           showSolution={showSolution}/>);
     return (

src/Row.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Cell from "./Cell";
 
 export default function Row({spec, index, showSolution}) {
-    const cells = spec.map((cell, cellIdx) => <Cell key={"c" + index + "-" + cellIdx}
+    const cells = spec.map((cell, cellIdx) => <Cell key={`${index}-${cellIdx}`}
                                                     spec={cell}
                                                     rowIndex={index}
                                                     cellIndex={cellIdx}