diff --git a/src/app/cell.css b/src/app/cell.css index ac67810..7a6838f 100644 --- a/src/app/cell.css +++ b/src/app/cell.css @@ -22,88 +22,14 @@ border-left-color: var(--color-maze-border); } -.userSELF { - background: radial-gradient( - ellipse 16% 16% at center, - var(--color-maze-cell-user) 0, - var(--color-maze-cell-user) 100%, - #0000 100% - ); +.user{ + background-color: var(--color-maze-cell-user); } -.userSELF:hover { - background: radial-gradient( - ellipse 33% 33% at center, - var(--color-maze-cell-user) 0, - var(--color-maze-cell-user) 80%, - #0000 100% - ); +.user:hover { + background-color: var(--color-maze-cell-user-highlight); } -.marker { - display: inline-block; - 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% - ); +.solution.user { + background-color: #c8ff00; } diff --git a/src/app/cell.module.css b/src/app/cell.module.css index 2c3dc49..af84a42 100644 --- a/src/app/cell.module.css +++ b/src/app/cell.module.css @@ -4,7 +4,6 @@ height: 2em; width: 2em; padding: 0; - position: relative; } .cell:hover { diff --git a/src/app/cell.tsx b/src/app/cell.tsx index e2f736d..22294a9 100644 --- a/src/app/cell.tsx +++ b/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[] { - 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; - } +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}: @@ -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); - for (let i = 0; i < markedDirections.length; i++) { - classes += ` user${Direction[markedDirections[i]]}`; - } + const marked = isMarked(x, y, state.userPath); + if (marked) classes += " user"; return (
{ @@ -72,14 +37,6 @@ export default function Cell({x, y, state, dispatch}: onClick={() => { dispatch(actionClickedCell(x, y)); }}> -
-
-
-
); } - -enum Direction { - UP, RIGHT, DOWN, LEFT, SELF -} diff --git a/src/app/input-form.tsx b/src/app/input-form.tsx index bed9b76..af11612 100644 --- a/src/app/input-form.tsx +++ b/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 { - Action, - actionLoadedMaze, - actionLoadingFailed, - actionStartedLoading, - actionToggledShowSolution -} from "./state/action.ts"; +import {Action, actionLoadedMaze, actionLoadingFailed, actionStartedLoading} 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)); }) diff --git a/src/app/page.tsx b/src/app/page.tsx index f689eae..a03b3a8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -25,7 +25,6 @@ export default function Home() {

The Maze ({state.maze!.width}x{state.maze!.height}, Algorithm: {state.maze!.algorithm}, ID: {state.maze!.id})

{ dispatch(actionToggledShowSolution(e.target.checked)); }}