update react

src/app/cell.tsx

@@ -0,0 +1,34 @@
+import {MazeCell} from "./model/maze.ts";
+import Coordinates from "./model/coordinates.ts";
+import {actionClickedCell} from "./state/action.ts";
+import styles from "./cell.module.css";
+import "./cell.css";
+
+function isMarked(x: number, y: number, marked: Coordinates[]): boolean {
+    return !!marked.find(e => e.x === x && e.y === y);
+}
+
+export default function Cell({x, y, state, dispatch}) {
+    const cell: MazeCell = state.maze.grid[y][x];
+    let classes = " r" + y + " c" + x;
+    if (cell.top) classes += " top";
+    if (cell.right) classes += " right";
+    if (cell.bottom) classes += " bottom";
+    if (cell.left) classes += " left";
+    if (cell.solution && state.showSolution) classes += " solution";
+    const marked = isMarked(x, y, state.userPath);
+    if (marked) classes += " user";
+    return (
+        <div className={styles.cell + classes}
+             onMouseEnter={(e) => {
+                 const leftPressed = e.buttons & 0x1;
+                 if (leftPressed) {
+                     dispatch(actionClickedCell(x, y));
+                 }
+             }}
+             onClick={(e) => {
+                 dispatch(actionClickedCell(x, y));
+             }}>
+        </div>
+    );
+}