🚀 generate frames

Author: Platane

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   preset: "ts-jest",
   testEnvironment: "node",
+  testMatch: ["**/__tests__/**/?(*.)+(spec|test).ts"],
 };

package.json

@@ -16,7 +16,7 @@
   "scripts": {
     "type": "tsc --noEmit",
     "lint": "yarn prettier -c '**/*.{ts,js,json,md,yml,yaml}' '!dist/**'",
-    "test": "jest --verbose --passWithNoTests",
+    "test": "jest --verbose --passWithNoTests --no-cache",
     "build": "( cd packages/demo ; yarn build )",
     "dev": "( cd packages/demo ; yarn dev )"
   }

packages/demo/index.ts

@@ -10,7 +10,7 @@ import { Point } from "@snk/compute/point";
 const copySnake = (x: Point[]) => x.map((p) => ({ ...p }));
 
 export const run = async () => {
-  const options = {
+  const drawOptions = {
     sizeBorderRadius: 2,
     sizeCell: 16,
     sizeDot: 12,
@@ -22,35 +22,34 @@ export const run = async () => {
 
   const gameOptions = { maxSnakeLength: 5 };
 
-  const grid = generateGrid(14, 7, { colors: [1, 2, 3, 4], emptyP: 3 });
+  const grid0 = generateGrid(14, 7, { colors: [1, 2, 3, 4], emptyP: 3 });
 
-  const canvas = document.createElement("canvas");
-  canvas.width = options.sizeCell * (grid.width + 4);
-  canvas.height = options.sizeCell * (grid.height + 4) + 100;
-  const ctx = canvas.getContext("2d")!;
-
-  document.body.appendChild(canvas);
-
-  const snake = [
+  const snake0 = [
     { x: 4, y: -1 },
     { x: 3, y: -1 },
     { x: 2, y: -1 },
     { x: 1, y: -1 },
     { x: 0, y: -1 },
   ];
-  const stack: Color[] = [];
+  const stack0: Color[] = [];
 
-  const chain = computeBestRun(grid, snake, gameOptions);
+  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 = (x: number) => {
-    const s = copySnake(snake);
-    const q = stack.slice();
-    const g = copyGrid(grid);
+  const update = (n: number) => {
+    const snake = copySnake(snake0);
+    const stack = stack0.slice();
+    const grid = copyGrid(grid0);
 
-    for (let i = 0; i < x; i++) step(g, s, q, chain[i], gameOptions);
+    for (let i = 0; i < n; i++) step(grid, snake, stack, chain[i], gameOptions);
 
     ctx.clearRect(0, 0, 9999, 9999);
-    drawWorld(ctx, g, s, q, options);
+    drawWorld(ctx, grid, snake, stack, drawOptions);
   };
 
   const input: any = document.createElement("input");

packages/git-creator/__tests__/dev.ts

@@ -0,0 +1,29 @@
+import { createGif } from "..";
+import { generateGrid } from "@snk/compute/generateGrid";
+import { computeBestRun } from "@snk/compute";
+
+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 grid = generateGrid(14, 7, { colors: [1, 2, 3, 4], emptyP: 3 });
+
+const snake = [
+  { x: 4, y: -1 },
+  { x: 3, y: -1 },
+  { x: 2, y: -1 },
+  { x: 1, y: -1 },
+  { x: 0, y: -1 },
+];
+
+const commands = computeBestRun(grid, snake, gameOptions);
+
+createGif(grid, snake, commands, drawOptions, gameOptions);

packages/git-creator/index.ts

@@ -0,0 +1,55 @@
+import * as fs from "fs";
+import * as path from "path";
+import { createCanvas } from "canvas";
+import { Grid, copyGrid, Color } from "@snk/compute/grid";
+import { Point } from "@snk/compute/point";
+import { copySnake } from "@snk/compute/snake";
+import { drawWorld } from "@snk/draw/drawWorld";
+import { step } from "@snk/compute/step";
+
+// @ts-ignore
+import * as mkdirp from "mkdirp";
+
+export const createGif = (
+  grid0: Grid,
+  snake0: Point[],
+  commands: Point[],
+  drawOptions: Parameters<typeof drawWorld>[4],
+  gameOptions: Parameters<typeof step>[4]
+) => {
+  const grid = copyGrid(grid0);
+  const snake = copySnake(snake0);
+  const stack: Color[] = [];
+
+  const width = drawOptions.sizeCell * (grid.width + 4);
+  const height = drawOptions.sizeCell * (grid.height + 4) + 100;
+
+  const dir = path.join(__dirname, "tmp", Math.random().toString(36).slice(2));
+  mkdirp.sync(dir);
+
+  const canvas = createCanvas(width, height);
+  const ctx = canvas.getContext("2d")!;
+
+  const writeImage = (i: number) => {
+    ctx.clearRect(0, 0, 99999, 99999);
+    drawWorld(ctx, grid, snake, stack, drawOptions);
+
+    const buffer = canvas.toBuffer("image/png", {
+      compressionLevel: 0,
+      filters: canvas.PNG_FILTER_NONE,
+    });
+
+    const filename = path.join(dir, `${i.toString().padStart(4, "0")}.png`);
+
+    console.log(filename);
+
+    fs.writeFileSync(filename, buffer);
+  };
+
+  writeImage(0);
+
+  for (let i = 0; i < commands.length; i++) {
+    step(grid, snake, stack, commands[i], gameOptions);
+    writeImage(i + 1);
+  }
+};

packages/git-creator/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@snk/gif-creator",
+  "version": "1.0.0",
+  "dependencies": {
+    "@snk/compute": "1.0.0",
+    "@snk/draw": "1.0.0",
+    "canvas": "2.6.1",
+    "mkdirp": "1.0.4"
+  },
+  "devDependencies": {
+    "@types/mkdirp": "1.0.1",
+    "@zeit/ncc": "0.22.3"
+  },
+  "scripts": {
+    "dev": "ncc run __tests__/dev.ts"
+  }
+}