86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
import { createCanvas } from "./canvas";
|
|
import { getHeadX, getHeadY, snakeToCells } from "@snk/types/snake";
|
|
import { grid, snake } from "./sample";
|
|
import { getColor } from "@snk/types/grid";
|
|
import { getAvailableRoutes } from "@snk/compute/getAvailableRoutes";
|
|
import type { Snake } from "@snk/types/snake";
|
|
import type { Color, Empty } from "@snk/types/grid";
|
|
|
|
//
|
|
// compute
|
|
|
|
const solutions: {
|
|
x: number;
|
|
y: number;
|
|
chain: Snake[];
|
|
color: Color | Empty;
|
|
}[] = [];
|
|
getAvailableRoutes(grid, snake, (chain) => {
|
|
const x = getHeadX(chain[0]);
|
|
const y = getHeadY(chain[0]);
|
|
|
|
if (!solutions.some((s) => x === s.x && y === s.y))
|
|
solutions.push({
|
|
x,
|
|
y,
|
|
chain: [snake, ...chain.slice().reverse()],
|
|
color: getColor(grid, x, y),
|
|
});
|
|
|
|
return false;
|
|
});
|
|
solutions.sort((a, b) => a.color - b.color);
|
|
|
|
const { canvas, ctx, draw } = createCanvas(grid);
|
|
document.body.appendChild(canvas);
|
|
|
|
let k = 0;
|
|
let i = solutions[k].chain.length - 1;
|
|
|
|
const onChange = () => {
|
|
const { chain } = solutions[k];
|
|
|
|
ctx.clearRect(0, 0, 9999, 9999);
|
|
|
|
draw(grid, chain[i], []);
|
|
|
|
ctx.fillStyle = "orange";
|
|
chain
|
|
.map(snakeToCells)
|
|
.flat()
|
|
.forEach(({ x, y }) => {
|
|
ctx.beginPath();
|
|
ctx.fillRect((1 + x + 0.5) * 16 - 2, (2 + y + 0.5) * 16 - 2, 4, 4);
|
|
});
|
|
};
|
|
|
|
onChange();
|
|
|
|
const inputK = document.createElement("input") as any;
|
|
inputK.type = "range";
|
|
inputK.value = 0;
|
|
inputK.step = 1;
|
|
inputK.min = 0;
|
|
inputK.max = solutions.length - 1;
|
|
inputK.style.width = "90%";
|
|
inputK.style.padding = "20px 0";
|
|
inputK.addEventListener("input", () => {
|
|
k = +inputK.value;
|
|
i = inputI.value = inputI.max = solutions[k].chain.length - 1;
|
|
onChange();
|
|
});
|
|
document.body.append(inputK);
|
|
|
|
const inputI = document.createElement("input") as any;
|
|
inputI.type = "range";
|
|
inputI.value = inputI.max = solutions[k].chain.length - 1;
|
|
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);
|