33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import {MazeCell} from "./model/Maze";
|
|
import Coordinates from "./model/Coordinates";
|
|
import {actionClickedCell} from "./state/action.ts";
|
|
|
|
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 = "cell 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={classes}
|
|
onMouseEnter={(e) => {
|
|
const leftPressed = e.buttons & 0x1;
|
|
if (leftPressed) {
|
|
dispatch(actionClickedCell(x, y));
|
|
}
|
|
}}
|
|
onClick={(e) => {
|
|
dispatch(actionClickedCell(x, y));
|
|
}}>
|
|
</div>
|
|
);
|
|
}
|