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 (