#9: make the user-chosen path more clear to see.

src/app/cell.tsx

@@ -6,8 +6,41 @@ import "./cell.css";
 import {State} from "./state/state.ts";
 import {ActionDispatch} from "react";
 
-function isMarked(x: number, y: number, marked: Coordinates[]): boolean {
-    return !!marked.find(e => e.x === x && e.y === y);
+function getMarkedDirections(coords: Coordinates, marked: Coordinates[]): Direction[] {
+    const cellIndex: number = marked.findIndex(e => e.x === coords.x && e.y === coords.y);
+    if (cellIndex === -1) {
+        return [];
+    }
+    if (marked.length === 1) {
+        return [Direction.SELF];
+    }
+    if (cellIndex === 0) {
+        const next: Coordinates = marked[1];
+        return [Direction.SELF, getDirectionTo(coords, next)];
+    } else {
+        const previous = marked[cellIndex - 1];
+        if (cellIndex === marked.length - 1) {
+            return [Direction.SELF, getDirectionTo(coords, previous)];
+        }
+        const next: Coordinates = marked[cellIndex + 1];
+        return [Direction.SELF, getDirectionTo(coords, previous), getDirectionTo(coords, next)];
+    }
+}
+
+function getDirectionTo(me: Coordinates, other: Coordinates): Direction {
+    const xDiff = me.x - other.x;
+    switch (xDiff) {
+        case -1:
+            return Direction.RIGHT;
+        case 1:
+            return Direction.LEFT;
+        default:
+            const yDiff = me.y - other.y;
+            if (yDiff === -1) {
+                return Direction.DOWN;
+            }
+            return Direction.UP;
+    }
 }
 
 export default function Cell({x, y, state, dispatch}:
@@ -24,8 +57,10 @@ export default function Cell({x, y, state, dispatch}:
     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";
+    const markedDirections = getMarkedDirections({x, y}, state.userPath);
+    for (let i = 0; i < markedDirections.length; i++) {
+        classes += ` user${Direction[markedDirections[i]]}`;
+    }
     return (
         <div className={styles.cell + classes}
              onMouseEnter={(e) => {
@@ -37,6 +72,14 @@ export default function Cell({x, y, state, dispatch}:
              onClick={() => {
                  dispatch(actionClickedCell(x, y));
              }}>
+            <div className={"marker UP"}></div>
+            <div className={"marker RIGHT"}></div>
+            <div className={"marker DOWN"}></div>
+            <div className={"marker LEFT"}></div>
         </div>
     );
 }
+
+enum Direction {
+    UP, RIGHT, DOWN, LEFT, SELF
+}