labyrinth-frontend/src/app/cell.tsx
2024-12-26 17:38:31 +01:00

34 lines
1.2 KiB
TypeScript

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>
);
}