rename animation options + add backgroundColor option for gif

Author: Platane

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "snk",
@@ -51,7 +52,7 @@
       "name": "@snk/draw",
       "version": "1.0.0",
       "dependencies": {
-        "@snk/solver": "1.0.0",
+        "@snk/types": "1.0.0",
       },
     },
     "packages/gif-creator": {
@@ -60,10 +61,10 @@
       "dependencies": {
         "@snk/draw": "1.0.0",
         "@snk/solver": "1.0.0",
+        "@snk/types": "1.0.0",
         "canvas": "3.1.0",
         "gif-encoder-2": "1.0.5",
         "gifsicle": "5.3.0",
-        "tmp": "0.2.3",
       },
       "devDependencies": {
         "@types/gifsicle": "5.2.2",
@@ -97,6 +98,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@snk/solver": "1.0.0",
+        "@snk/types": "1.0.0",
       },
     },
     "packages/types": {
@@ -1156,8 +1158,6 @@
 
     "timed-out": ["[email protected]", "", {}, "sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA=="],
 
-    "tmp": ["[email protected]", "", {}, "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w=="],
-
     "to-buffer": ["[email protected]", "", {}, "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg=="],
 
     "to-regex-range": ["[email protected]", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],

package.json

@@ -13,7 +13,7 @@
     "packages/*"
   ],
   "scripts": {
-    "type": "tsc --noEmit",
+    "type": "tsc",
     "lint": "prettier -c '**/*.{ts,js,json,md,yml,yaml}' '!packages/*/dist/**' '!svg-only/dist/**'",
     "dev:demo": "( cd packages/demo ; npm run dev )",
     "build:demo": "( cd packages/demo ; npm run build )",

packages/action/__tests__/__snapshots__/outputsOptions.spec.ts.snap

@@ -1,39 +1,13 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should parse /out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]} 1`] = `
-{
-  "animationOptions": {
-    "frameDuration": 100,
-    "step": 1,
-  },
-  "drawOptions": {
-    "colorDotBorder": "#1b1f230a",
-    "colorDots": [
-      "#000",
-      "#111",
-      "#222",
-      "#333",
-      "#444",
-    ],
-    "colorEmpty": "#000",
-    "colorSnake": "yellow",
-    "dark": undefined,
-    "sizeCell": 16,
-    "sizeDot": 12,
-    "sizeDotBorderRadius": 2,
-  },
-  "filename": "/out.svg",
-  "format": "svg",
-}
-`;
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
 
 exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444 1`] = `
 {
   "animationOptions": {
-    "frameDuration": 100,
-    "step": 1,
+    "frameByStep": 1,
+    "stepDurationMs": 100,
   },
   "drawOptions": {
+    "colorBackground": "#ffffff",
     "colorDotBorder": "#1b1f230a",
     "colorDots": [
       "#000",
@@ -54,13 +28,14 @@ exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333
 }
 `;
 
-exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444&dark_color_dots=#a00,#a11,#a22,#a33,#a44 1`] = `
+exports[`should parse /out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]} 1`] = `
 {
   "animationOptions": {
-    "frameDuration": 100,
-    "step": 1,
+    "frameByStep": 1,
+    "stepDurationMs": 100,
   },
   "drawOptions": {
+    "colorBackground": "#ffffff",
     "colorDotBorder": "#1b1f230a",
     "colorDots": [
       "#000",
@@ -70,19 +45,8 @@ exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333
       "#444",
     ],
     "colorEmpty": "#000",
-    "colorSnake": "orange",
-    "dark": {
-      "colorDotBorder": "#1b1f230a",
-      "colorDots": [
-        "#a00",
-        "#a11",
-        "#a22",
-        "#a33",
-        "#a44",
-      ],
-      "colorEmpty": "#a00",
-      "colorSnake": "orange",
-    },
+    "colorSnake": "yellow",
+    "dark": undefined,
     "sizeCell": 16,
     "sizeDot": 12,
     "sizeDotBorderRadius": 2,
@@ -95,10 +59,11 @@ exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333
 exports[`should parse path/to/out.gif 1`] = `
 {
   "animationOptions": {
-    "frameDuration": 100,
-    "step": 1,
+    "frameByStep": 1,
+    "stepDurationMs": 100,
   },
   "drawOptions": {
+    "colorBackground": "#ffffff",
     "colorDotBorder": "#1b1f230a",
     "colorDots": [
       "#ebedf0",
@@ -109,7 +74,6 @@ exports[`should parse path/to/out.gif 1`] = `
     ],
     "colorEmpty": "#ebedf0",
     "colorSnake": "purple",
-    "dark": undefined,
     "sizeCell": 16,
     "sizeDot": 12,
     "sizeDotBorderRadius": 2,

packages/action/__tests__/outputsOptions.spec.ts

@@ -51,9 +51,6 @@ it("should parse filename", () => {
 
   // overwrite colors (json)
   `/out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]}`,
-
-  // overwrite dark colors
-  "/out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444&dark_color_dots=#a00,#a11,#a22,#a33,#a44",
 ].forEach((entry) =>
   it(`should parse ${entry}`, () => {
     expect(parseEntry(entry)).toMatchSnapshot();

packages/action/outputsOptions.ts

@@ -1,7 +1,10 @@
 import type { AnimationOptions } from "@snk/gif-creator";
-import type { DrawOptions as DrawOptions } from "@snk/svg-creator";
+import type { DrawOptions as DrawOptionsSvg } from "@snk/svg-creator";
+import type { DrawOptions as DrawOptionsGif } from "@snk/gif-creator";
 import { palettes } from "./palettes";
 
+type DrawOptions = DrawOptionsSvg & DrawOptionsGif;
+
 export const parseOutputsOption = (lines: string[]) => lines.map(parseEntry);
 
 export const parseEntry = (entry: string) => {
@@ -32,51 +35,31 @@ export const parseEntry = (entry: string) => {
     sizeCell: 16,
     sizeDot: 12,
     ...palettes["default"],
-    dark: palettes["default"].dark && { ...palettes["default"].dark },
   };
-  const animationOptions: AnimationOptions = { step: 1, frameDuration: 100 };
+  const animationOptions: AnimationOptions = {
+    frameByStep: 1,
+    stepDurationMs: 100,
+  };
 
   {
-    const palette = palettes[sp.get("palette")!];
+    const palette = palettes[sp.get("palette") as keyof typeof palettes];
     if (palette) {
       Object.assign(drawOptions, palette);
-      drawOptions.dark = palette.dark && { ...palette.dark };
-    }
-  }
-
-  {
-    const dark_palette = palettes[sp.get("dark_palette")!];
-    if (dark_palette) {
-      const clone = { ...dark_palette, dark: undefined };
-      drawOptions.dark = clone;
     }
   }
 
-  if (sp.has("color_snake")) drawOptions.colorSnake = sp.get("color_snake")!;
   if (sp.has("color_dots")) {
     const colors = sp.get("color_dots")!.split(/[,;]/);
     drawOptions.colorDots = colors;
     drawOptions.colorEmpty = colors[0];
     drawOptions.dark = undefined;
   }
+  if (sp.has("color_snake")) drawOptions.colorSnake = sp.get("color_snake")!;
+  if (sp.has("color_background"))
+    drawOptions.colorBackground = sp.get("color_background")!;
   if (sp.has("color_dot_border"))
     drawOptions.colorDotBorder = sp.get("color_dot_border")!;
 
-  if (sp.has("dark_color_dots")) {
-    const colors = sp.get("dark_color_dots")!.split(/[,;]/);
-    drawOptions.dark = {
-      colorDotBorder: drawOptions.colorDotBorder,
-      colorSnake: drawOptions.colorSnake,
-      ...drawOptions.dark,
-      colorDots: colors,
-      colorEmpty: colors[0],
-    };
-  }
-  if (sp.has("dark_color_dot_border") && drawOptions.dark)
-    drawOptions.dark.colorDotBorder = sp.get("color_dot_border")!;
-  if (sp.has("dark_color_snake") && drawOptions.dark)
-    drawOptions.dark.colorSnake = sp.get("color_snake")!;
-
   return {
     filename,
     format: format as "svg" | "gif",

packages/action/palettes.ts

@@ -1,19 +1,13 @@
-import { DrawOptions as DrawOptions } from "@snk/svg-creator";
-
-export const basePalettes: Record<
-  string,
-  Pick<
-    DrawOptions,
-    "colorDotBorder" | "colorEmpty" | "colorSnake" | "colorDots" | "dark"
-  >
-> = {
+export const basePalettes = {
   "github-light": {
+    colorBackground: "#ffffff",
     colorDotBorder: "#1b1f230a",
     colorDots: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"],
     colorEmpty: "#ebedf0",
     colorSnake: "purple",
   },
   "github-dark": {
+    colorBackground: "#0c1116",
     colorDotBorder: "#1b1f230a",
     colorEmpty: "#161b22",
     colorDots: ["#161b22", "#01311f", "#034525", "#0f6d31", "#00c647"],
@@ -22,6 +16,10 @@ export const basePalettes: Record<
 };
 
 // aliases
-export const palettes = { ...basePalettes };
-palettes["github"] = palettes["github-light"];
-palettes["default"] = palettes["github"];
+export const palettes = {
+  ...basePalettes,
+
+  // aliases
+  github: basePalettes["github-light"],
+  default: basePalettes["github-light"],
+};

packages/demo/demo.interactive.ts

@@ -202,10 +202,13 @@ const createViewer = ({
   schemaSelect.style.alignSelf = "flex-start";
   schemaSelect.value = "github-light";
   schemaSelect.addEventListener("change", () => {
-    Object.assign(drawOptions, basePalettes[schemaSelect.value]);
+    Object.assign(
+      drawOptions,
+      basePalettes[schemaSelect.value as keyof typeof basePalettes],
+    );
 
     svgString = createSvg(grid0, cells, chain, drawOptions, {
-      frameDuration: 100,
+      stepDurationMs: 100,
     } as AnimationOptions);
     const svgImageUri = `data:image/*;charset=utf-8;base64,${btoa(svgString)}`;
     svgLink.href = svgImageUri;
@@ -239,7 +242,7 @@ const createViewer = ({
   // svg
   const svgLink = document.createElement("a");
   let svgString = createSvg(grid0, cells, chain, drawOptions, {
-    frameDuration: 100,
+    stepDurationMs: 100,
   } as AnimationOptions);
   const svgImageUri = `data:image/*;charset=utf-8;base64,${btoa(svgString)}`;
   svgLink.href = svgImageUri;

packages/demo/demo.svg.ts

@@ -11,7 +11,7 @@ chain.push(...getPathToPose(chain.slice(-1)[0], snake)!);
 
 (async () => {
   const svg = await createSvg(grid, null, chain, drawOptions, {
-    frameDuration: 200,
+    stepDurationMs: 200,
   } as AnimationOptions);
 
   const container = document.createElement("div");

packages/draw/drawWorld.ts

@@ -9,6 +9,7 @@ export type Options = {
   colorEmpty: string;
   colorDotBorder: string;
   colorSnake: string;
+  colorBackground?: string;
   sizeCell: number;
   sizeDot: number;
   sizeDotBorderRadius: number;
@@ -43,6 +44,11 @@ export const drawWorld = (
 ) => {
   ctx.save();
 
+  if (o.colorBackground) {
+    ctx.fillStyle = o.colorBackground;
+    ctx.fillRect(0, 0, 99999, 99999);
+  }
+
   ctx.translate(1 * o.sizeCell, 2 * o.sizeCell);
   drawGrid(ctx, grid, cells, o);
   drawSnake(ctx, snake, o);
@@ -77,6 +83,11 @@ export const drawLerpWorld = (
 ) => {
   ctx.save();
 
+  if (o.colorBackground) {
+    ctx.fillStyle = o.colorBackground;
+    ctx.fillRect(0, 0, 99999, 99999);
+  }
+
   ctx.translate(1 * o.sizeCell, 2 * o.sizeCell);
   drawGrid(ctx, grid, cells, o);
   drawSnakeLerp(ctx, snake0, snake1, k, o);

packages/draw/package.json

@@ -2,6 +2,6 @@
   "name": "@snk/draw",
   "version": "1.0.0",
   "dependencies": {
-    "@snk/solver": "1.0.0"
+    "@snk/types": "1.0.0"
   }
 }