60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import "./menu";
|
|
import { createCanvas } from "./canvas";
|
|
import { copySnake, snakeToCells } from "@snk/types/snake";
|
|
import { grid, snake as snake0 } from "./sample";
|
|
import { getPathTo } from "@snk/solver/getPathTo";
|
|
|
|
const { canvas, ctx, draw, getPointedCell, highlightCell } = createCanvas(grid);
|
|
canvas.style.pointerEvents = "auto";
|
|
|
|
let snake = copySnake(snake0);
|
|
let chain = [snake];
|
|
|
|
canvas.addEventListener("mousemove", (e) => {
|
|
const { x, y } = getPointedCell(e);
|
|
|
|
chain = [...(getPathTo(grid, snake, x, y) || []), snake].reverse();
|
|
|
|
inputI.max = chain.length - 1;
|
|
i = inputI.value = chain.length - 1;
|
|
|
|
onChange();
|
|
});
|
|
|
|
canvas.addEventListener("click", () => {
|
|
snake = chain.slice(-1)[0];
|
|
|
|
chain = [snake];
|
|
inputI.max = chain.length - 1;
|
|
i = inputI.value = chain.length - 1;
|
|
|
|
onChange();
|
|
});
|
|
|
|
let i = 0;
|
|
const onChange = () => {
|
|
ctx.clearRect(0, 0, 9999, 9999);
|
|
|
|
draw(grid, chain[i], []);
|
|
chain
|
|
.map(snakeToCells)
|
|
.flat()
|
|
.forEach(({ x, y }) => highlightCell(x, y));
|
|
};
|
|
|
|
onChange();
|
|
|
|
const inputI = document.createElement("input") as any;
|
|
inputI.type = "range";
|
|
inputI.value = 0;
|
|
inputI.max = chain ? chain.length - 1 : 0;
|
|
inputI.step = 1;
|
|
inputI.min = 0;
|
|
inputI.style.width = "90%";
|
|
inputI.style.padding = "20px 0";
|
|
inputI.addEventListener("input", () => {
|
|
i = +inputI.value;
|
|
onChange();
|
|
});
|
|
document.body.append(inputI);
|