src/app/cell.css

@@ -22,88 +22,14 @@
     border-left-color: var(--color-maze-border);
 }
 
-.userSELF {
+.user{
-    background: radial-gradient(
+    background-color: var(--color-maze-cell-user);
-            ellipse 16% 16% at center,
-            var(--color-maze-cell-user) 0,
-            var(--color-maze-cell-user) 100%,
-            #0000 100%
-    );
 }
 
-.userSELF:hover {
+.user:hover {
-    background: radial-gradient(
+    background-color: var(--color-maze-cell-user-highlight);
-            ellipse 33% 33% at center,
-            var(--color-maze-cell-user) 0,
-            var(--color-maze-cell-user) 80%,
-            #0000 100%
-    );
 }
 
-.marker {
+.solution.user {
-    display: inline-block;
+    background-color: #c8ff00;
-    position: absolute;
-}
-
-.marker:hover {
-    background: #fc08;
-}
-
-.userUP .marker.UP {
-    height: 50%;
-    width: 100%;
-    background: linear-gradient(
-            90deg,
-            #0000 0,
-            #0000 33%,
-            var(--color-maze-cell-user) 33%,
-            var(--color-maze-cell-user) 66%,
-            #0000 66%,
-            #0000 100%
-    );
-}
-
-.userRIGHT .marker.RIGHT {
-    height: 100%;
-    width: 50%;
-    left: 50%;
-    background: linear-gradient(
-            0deg,
-            #0000 0,
-            #0000 33%,
-            var(--color-maze-cell-user) 33%,
-            var(--color-maze-cell-user) 66%,
-            #0000 66%,
-            #0000 100%
-    );
-}
-
-.userDOWN .marker.DOWN {
-    height: 50%;
-    width: 100%;
-    top: 50%;
-    background: linear-gradient(
-            90deg,
-            #0000 0,
-            #0000 33%,
-            var(--color-maze-cell-user) 33%,
-            var(--color-maze-cell-user) 66%,
-            #0000 66%,
-            #0000 100%
-    );
-
-}
-
-.userLEFT .marker.LEFT {
-    height: 100%;
-    width: 50%;
-    background: linear-gradient(
-            0deg,
-            #0000 0,
-            #0000 33%,
-            var(--color-maze-cell-user) 33%,
-            var(--color-maze-cell-user) 66%,
-            #0000 66%,
-            #0000 100%
-    );
 }

src/app/cell.module.css

@@ -4,7 +4,6 @@
     height: 2em;
     width: 2em;
     padding: 0;
-    position: relative;
 }
 
 .cell:hover {

src/app/cell.tsx

@@ -6,41 +6,8 @@ import "./cell.css";
 import {State} from "./state/state.ts";
 import {ActionDispatch} from "react";
 
-function getMarkedDirections(coords: Coordinates, marked: Coordinates[]): Direction[] {
+function isMarked(x: number, y: number, marked: Coordinates[]): boolean {
-    const cellIndex: number = marked.findIndex(e => e.x === coords.x && e.y === coords.y);
+    return !!marked.find(e => e.x === x && e.y === 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}:
@@ -57,10 +24,8 @@ 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 markedDirections = getMarkedDirections({x, y}, state.userPath);
+    const marked = isMarked(x, y, state.userPath);
-    for (let i = 0; i < markedDirections.length; i++) {
+    if (marked) classes += " user";
-        classes += ` user${Direction[markedDirections[i]]}`;
-    }
     return (
         <div className={styles.cell + classes}
              onMouseEnter={(e) => {
@@ -72,14 +37,6 @@ 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
-}

src/app/input-form.tsx

@@ -1,12 +1,6 @@
 import {ActionDispatch, FormEvent, useState} from 'react';
 import ValidatingInputNumberField, {ValidatorFunction} from "./validating-input-number-field.tsx";
-import {
+import {Action, actionLoadedMaze, actionLoadingFailed, actionStartedLoading} from "./state/action.ts";
-    Action,
-    actionLoadedMaze,
-    actionLoadingFailed,
-    actionStartedLoading,
-    actionToggledShowSolution
-} from "./state/action.ts";
 import styles from "./input-form.module.css";
 import "./input-form.css";
 import {State} from "@/app/state/state.ts";
@@ -23,10 +17,10 @@ export default function InputForm({state, dispatch}: {
     const handleSubmit = (e: FormEvent) => {
         e.preventDefault();
         dispatch(actionStartedLoading());
-        dispatch(actionToggledShowSolution(false));
         const url = `https://manuel.friedli.info/labyrinth/create/json?w=${width}&h=${height}&id=${id || ''}&algorithm=${algorithm}`;
         fetch(url)
             .then(response => response.json())
+            // .then(result => new Promise(resolve => setTimeout(resolve, 600, result)))
             .then(result => {
                 dispatch(actionLoadedMaze(result));
             })

src/app/page.tsx

@@ -25,7 +25,6 @@ export default function Home() {
                     <h1>The Maze ({state.maze!.width}x{state.maze!.height}, Algorithm: {state.maze!.algorithm},
                         ID: {state.maze!.id})</h1>
                     <input type={"checkbox"}
-                           checked={state.showSolution}
                            onChange={(e) => {
                                dispatch(actionToggledShowSolution(e.target.checked));
                            }}