🚿 clean up

packages/demo/index.ts

@@ -1,81 +1,89 @@
-// import { generateGrid } from "@snk/compute/generateGrid";
-
-import { generateGrid } from "@snk/compute/generateGrid";
+import { generateRandomGrid } from "@snk/compute/generateGrid";
 import { Color, copyGrid } from "@snk/compute/grid";
 import { computeBestRun } from "@snk/compute";
 import { step } from "@snk/compute/step";
 import { drawWorld } from "@snk/draw/drawWorld";
-import { Point } from "@snk/compute/point";
+import { copySnake } from "@snk/compute/snake";
 
-const copySnake = (x: Point[]) => x.map((p) => ({ ...p }));
-
-export const run = async () => {
-  const drawOptions = {
-    sizeBorderRadius: 2,
-    sizeCell: 16,
-    sizeDot: 12,
-    colorBorder: "#1b1f230a",
-    colorDots: { 1: "#9be9a8", 2: "#40c463", 3: "#30a14e", 4: "#216e39" },
-    colorEmpty: "#ebedf0",
-    colorSnake: "purple",
-  };
-
-  const gameOptions = { maxSnakeLength: 5 };
-
-  const grid0 = generateGrid(42, 7, { colors: [1, 2, 3, 4], emptyP: 3 });
-
-  const snake0 = [
-    { x: 4, y: -1 },
-    { x: 3, y: -1 },
-    { x: 2, y: -1 },
-    { x: 1, y: -1 },
-    { x: 0, y: -1 },
-  ];
-  const stack0: Color[] = [];
-
-  const chain = computeBestRun(grid0, snake0, gameOptions);
-
-  const canvas = document.createElement("canvas");
-  canvas.width = drawOptions.sizeCell * (grid0.width + 4);
-  canvas.height = drawOptions.sizeCell * (grid0.height + 4) + 100;
-  document.body.appendChild(canvas);
-  const ctx = canvas.getContext("2d")!;
-
-  const update = (n: number) => {
-    const snake = copySnake(snake0);
-    const stack = stack0.slice();
-    const grid = copyGrid(grid0);
-
-    for (let i = 0; i < n; i++) step(grid, snake, stack, chain[i], gameOptions);
-
-    ctx.clearRect(0, 0, 9999, 9999);
-    drawWorld(ctx, grid, snake, stack, drawOptions);
-  };
-
-  const input: any = document.createElement("input");
-  input.type = "range";
-  input.style.width = "100%";
-  input.min = 0;
-  input.max = chain.length;
-  input.step = 1;
-  input.value = 0;
-  input.addEventListener("input", () => update(+input.value));
-  document.addEventListener("click", () => input.focus());
-
-  document.body.appendChild(input);
-
-  update(+input.value);
-
-  // while (chain.length) {
-  //   await wait(100);
-
-  //   step(grid, snake, stack, chain.shift()!, gameOptions);
-
-  //   ctx.clearRect(0, 0, 9999, 9999);
-  //   drawWorld(ctx, grid, snake, stack, options);
-  // }
-
-  // const wait = (delay = 0) => new Promise((r) => setTimeout(r, delay));
+const drawOptions = {
+  sizeBorderRadius: 2,
+  sizeCell: 16,
+  sizeDot: 12,
+  colorBorder: "#1b1f230a",
+  colorDots: { 1: "#9be9a8", 2: "#40c463", 3: "#30a14e", 4: "#216e39" },
+  colorEmpty: "#ebedf0",
+  colorSnake: "purple",
 };
 
-run();
+const gameOptions = { maxSnakeLength: 5 };
+
+const grid0 = generateRandomGrid(42, 7, { colors: [1, 2, 3, 4], emptyP: 3 });
+
+const snake0 = [
+  { x: 4, y: -1 },
+  { x: 3, y: -1 },
+  { x: 2, y: -1 },
+  { x: 1, y: -1 },
+  { x: 0, y: -1 },
+];
+const stack0: Color[] = [];
+
+const chain = computeBestRun(grid0, snake0, gameOptions);
+
+//
+// draw
+
+const canvas = document.createElement("canvas");
+canvas.width = drawOptions.sizeCell * (grid0.width + 4);
+canvas.height = drawOptions.sizeCell * (grid0.height + 4) + 100;
+document.body.appendChild(canvas);
+const ctx = canvas.getContext("2d")!;
+
+const update = (n: number) => {
+  const snake = copySnake(snake0);
+  const stack = stack0.slice();
+  const grid = copyGrid(grid0);
+
+  for (let i = 0; i < n; i++) step(grid, snake, stack, chain[i], gameOptions);
+
+  ctx.clearRect(0, 0, 9999, 9999);
+  drawWorld(ctx, grid, snake, stack, drawOptions);
+};
+
+//
+// controls
+
+const input: any = document.createElement("input");
+input.type = "range";
+input.style.width = "100%";
+input.min = 0;
+input.max = chain.length;
+input.step = 1;
+input.value = 0;
+input.addEventListener("input", () => {
+  setAutoPlay(false);
+  update(+input.value);
+});
+document.addEventListener("click", () => input.focus());
+
+document.body.appendChild(input);
+
+const autoplayButton = document.createElement("button");
+let cancel: any;
+const loop = () => {
+  input.value = (1 + input.value) % +input.max;
+  update(+input.value);
+  cancelAnimationFrame(cancel);
+  cancel = requestAnimationFrame(loop);
+};
+const setAutoPlay = (a: boolean) => {
+  autoplayButton.innerHTML = a ? "pause ⏸" : "play ▶";
+  if (a) loop();
+  else cancelAnimationFrame(cancel);
+};
+autoplayButton.addEventListener("click", () =>
+  setAutoPlay(autoplayButton.innerHTML === "pause ⏸")
+);
+
+setAutoPlay(true);
+update(+input.value);

packages/demo/package.json

@@ -2,7 +2,8 @@
   "name": "@snk/demo",
   "version": "1.0.0",
   "dependencies": {
-    "@snk/compute": "1.0.0"
+    "@snk/compute": "1.0.0",
+    "@snk/draw": "1.0.0"
   },
   "devDependencies": {
     "webpack": "4.43.0",

packages/demo/webpack.config.ts

@@ -27,7 +27,6 @@ const config: Configuration = {
     ],
   },
   plugins: [
-    // game
     new HtmlWebpackPlugin({
       title: "demo",
       filename: "index.html",
@@ -39,9 +38,6 @@ const config: Configuration = {
 
   devtool: false,
   stats: "errors-only",
-
-  // @ts-ignore
-  devServer: {},
 };
 
 export default config;