🚀 use ts node

packages/action/Dockerfile

@@ -6,8 +6,8 @@ RUN    apt-get update \
 
 WORKDIR /github/snk
 
-RUN     npm install canvas@2.6.1
+RUN    npm install canvas@2.6.1 --no-save --no-package-lock
 
-COPY    dist /github/snk/
+COPY   dist /github/snk/
 
 CMD    ["node", "/github/snk/index.js"]

packages/action/__tests__/dev.ts

@@ -3,7 +3,7 @@ import * as path from "path";
 import { generateContributionSnake } from "../generateContributionSnake";
 
 (async () => {
-  const output = path.join(process.cwd(), "/__tests__/__snapshots__/out.gif");
+  const output = path.join(__dirname, "__snapshots__/out.gif");
 
   const buffer = await generateContributionSnake("platane");
 

packages/action/generateContributionSnake.ts

@@ -18,7 +18,8 @@ export const generateContributionSnake = async (userName: string) => {
     { x: 0, y: -1 },
   ]);
 
-  const upscale = 1.6;
+  // const upscale = 815 / (grid0.width + 2) / 16;
+  const upscale = 2;
   const drawOptions = {
     sizeBorderRadius: 2 * upscale,
     sizeCell: 16 * upscale,

packages/action/package.json

@@ -7,10 +7,11 @@
     "@snk/github-user-contribution": "1.0.0"
   },
   "devDependencies": {
+    "ts-node": "9.0.0",
     "@zeit/ncc": "0.22.3"
   },
   "scripts": {
     "build": "ncc build --external canvas --out dist ./index.ts ",
-    "dev": "rm -f __tests__/__snapshots__/out.gif ; ncc run __tests__/dev.ts --quiet"
+    "dev": "ts-node __tests__/dev.ts"
   }
 }

packages/draw/drawSnake.ts

@@ -44,7 +44,7 @@ export const drawSnakeLerp = (
   const m = 0.8;
   const n = snake0.length / 2;
   for (let i = 0; i < n; i++) {
-    const u = (i + 1) * 0.6;
+    const u = (i + 1) * 0.6 * (o.sizeCell / 16);
 
     const a = (1 - m) * (i / Math.max(n - 1, 1));
     const ki = clamp((k - a) / m, 0, 1);

packages/draw/drawWorld.ts

@@ -85,3 +85,10 @@ export const drawLerpWorld = (
 
   ctx.restore();
 };
+
+export const getCanvasWorldSize = (grid: Grid, o: { sizeCell: number }) => {
+  const width = o.sizeCell * (grid.width + 2);
+  const height = o.sizeCell * (grid.height + 4) + 30;
+
+  return { width, height };
+};

packages/gif-creator/__tests__/createGif.spec.ts

@@ -8,10 +8,11 @@ import { getBestRoute } from "@snk/compute/getBestRoute";
 
 jest.setTimeout(20 * 1000);
 
+const upscale = 1;
 const drawOptions = {
-  sizeBorderRadius: 2,
+  sizeBorderRadius: 2 * upscale,
-  sizeCell: 16,
+  sizeCell: 16 * upscale,
-  sizeDot: 12,
+  sizeDot: 12 * upscale,
   colorBorder: "#1b1f230a",
   colorDots: { 1: "#9be9a8", 2: "#40c463", 3: "#30a14e", 4: "#216e39" },
   colorEmpty: "#ebedf0",

packages/gif-creator/index.ts

@@ -3,7 +3,11 @@ import * as path from "path";
 import { createCanvas } from "canvas";
 import { Grid, copyGrid, Color } from "@snk/compute/grid";
 import { Snake } from "@snk/compute/snake";
-import { Options, drawLerpWorld } from "@snk/draw/drawWorld";
+import {
+  Options,
+  drawLerpWorld,
+  getCanvasWorldSize,
+} from "@snk/draw/drawWorld";
 import { step } from "@snk/compute/step";
 import * as tmp from "tmp";
 import * as execa from "execa";
@@ -29,8 +33,7 @@ export const createGif = async (
   gifOptions: { frameDuration: number; step: number }
 ) =>
   withTmpDir(async (dir) => {
-    const width = drawOptions.sizeCell * (grid0.width + 2);
+    const { width, height } = getCanvasWorldSize(grid0, drawOptions);
-    const height = drawOptions.sizeCell * (grid0.height + 4) + 30;
 
     const canvas = createCanvas(width, height);
     const ctx = canvas.getContext("2d")!;
@@ -44,9 +47,9 @@ export const createGif = async (
       step(grid, stack, snake0);
 
       for (let k = 0; k < gifOptions.step; k++) {
-        ctx.clearRect(0, 0, 99999, 99999);
+        ctx.clearRect(0, 0, width, height);
         ctx.fillStyle = "#fff";
-        ctx.fillRect(0, 0, 99999, 99999);
+        ctx.fillRect(0, 0, width, height);
         drawLerpWorld(
           ctx,
           grid,
@@ -80,10 +83,10 @@ export const createGif = async (
         "convert",
         ["-loop", "0"],
         ["-delay", (gifOptions.frameDuration / 10).toString()],
-        ["-dispose", "2"],
+        // ["-dispose", "2"], // for transparent gif
         // ["-layers", "OptimizeFrame"],
-        ["-compress", "LZW"],
+        // ["-compress", "LZW"],
-        ["-strip"],
+        // ["-strip"],
 
         path.join(dir, "*.png"),
         outFileName,
@@ -95,6 +98,8 @@ export const createGif = async (
       [
         //
         "--optimize=3",
+        "--color-method=diversity",
+        "--colors=18",
         outFileName,
         ["--output", optimizedFileName],
       ].flat()