[WIP] bare react.

src/App.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Maze from "./Maze";
+import {maze1, maze2, maze3} from "./testdata";
+
+export default function Square() {
+    const mazes = [{grid: [[]]}, maze1, maze2, maze3];
+    const renderedMazes = mazes.map(maze => (<div>
+        <h1>The Maze ({maze.width}x{maze.height}).</h1>
+        <Maze labyrinth={maze}/>
+    </div>))
+    return (
+        <div>
+            {renderedMazes}
+        </div>
+    );
+}

src/Cell.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function Cell({spec, rowIndex, cellIndex}) {
+    let classes = "cell r" + rowIndex + " c" + cellIndex;
+    if (spec.top) classes += " top";
+    if (spec.right) classes += " right";
+    if (spec.bottom) classes += " bottom";
+    if (spec.left) classes += " left";
+    if (spec.solution) classes += " solution";
+    if (spec.user) classes += " user";
+    return (
+        <div className={classes}>
+        </div>
+    );
+}

src/Maze.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Row from "./Row";
+
+
+export default function Maze({labyrinth}) {
+    const maze = labyrinth.grid.map((row, rowIdx) => <Row key={"r" + rowIdx} spec={row}
+                                                          index={rowIdx}/>);
+    return (
+        <div className={"maze"}>
+            {maze}
+        </div>
+    );
+}

src/Row.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Cell from "./Cell";
+
+export default function Row({spec, index}) {
+    const cells = spec.map((cell, cellIdx) => <Cell key={"c" + index + "-" + cellIdx}
+                                                    spec={cell}
+                                                    rowIndex={index}
+                                                    cellIndex={cellIdx}/>)
+    return (
+        <div className={"row"}>
+            {cells}
+        </div>
+    );
+}

src/createServiceWorker.js

@@ -0,0 +1,52 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+export default function register() {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      navigator.serviceWorker
+        .register(swUrl)
+        .then(registration => {
+          // eslint-disable-next-line no-param-reassign
+          registration.onupdatefound = () => {
+            const installingWorker = registration.installing;
+            installingWorker.onstatechange = () => {
+              if (installingWorker.state === 'installed') {
+                if (navigator.serviceWorker.controller) {
+                  // At this point, the old content will have been purged and
+                  // the fresh content will have been added to the cache.
+                  // It's the perfect time to display a "New content is
+                  // available; please refresh." message in your web app.
+                  console.log('New content is available; please refresh.'); // eslint-disable-line no-console
+                } else {
+                  // At this point, everything has been precached.
+                  // It's the perfect time to display a
+                  // "Content is cached for offline use." message.
+                  console.log('Content is cached for offline use.'); // eslint-disable-line no-console
+                }
+              }
+            };
+          };
+        })
+        .catch(error => {
+          console.error('Error during service worker registration:', error);
+        });
+    });
+  }
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

src/index.js

@@ -0,0 +1,12 @@
+import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles.css";
+
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

src/package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js",
+  "devDependencies": {}
+}

src/public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>A-Maze-R</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

src/styles.css

@@ -0,0 +1,131 @@
+* {
+    box-sizing: border-box;
+}
+
+div.maze {
+    display: table;
+    border-collapse: collapse;
+}
+
+div.row {
+    display: table-row;
+    margin: 0;
+    padding: 0;
+}
+
+div.cell {
+    display: table-cell;
+    border: 1px solid transparent;
+    height: 2em;
+    width: 2em;
+    margin: 0;
+    padding: 0;
+}
+
+div.cell.solution {
+    background-color: lightgray;
+}
+
+div.cell.top {
+    border-top-color: #000;
+}
+
+div.cell.right {
+    border-right-color: #000;
+}
+
+div.cell.bottom {
+    border-bottom-color: #000;
+}
+
+div.cell.left {
+    border-left-color: #000;
+}
+
+body {
+    font-family: sans-serif;
+    margin: 20px;
+    padding: 0;
+}
+
+h1 {
+    margin-top: 0;
+    font-size: 22px;
+}
+
+h2 {
+    margin-top: 0;
+    font-size: 20px;
+}
+
+h3 {
+    margin-top: 0;
+    font-size: 18px;
+}
+
+h4 {
+    margin-top: 0;
+    font-size: 16px;
+}
+
+h5 {
+    margin-top: 0;
+    font-size: 14px;
+}
+
+h6 {
+    margin-top: 0;
+    font-size: 12px;
+}
+
+code {
+    font-size: 1.2em;
+}
+
+ul {
+    padding-left: 20px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: sans-serif;
+    margin: 20px;
+    padding: 0;
+}
+
+.square {
+    background: #fff;
+    border: 1px solid #999;
+    float: left;
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 34px;
+    height: 34px;
+    margin-right: -1px;
+    margin-top: -1px;
+    padding: 0;
+    text-align: center;
+    width: 34px;
+}
+
+.board-row:after {
+    clear: both;
+    content: '';
+    display: table;
+}
+
+.status {
+    margin-bottom: 10px;
+}
+
+.game {
+    display: flex;
+    flex-direction: row;
+}
+
+.game-info {
+    margin-left: 20px;
+}