♻️ refacto: rename options

packages/demo/canvas.ts

@@ -1,7 +1,7 @@
 import { Color, Grid } from "@snk/types/grid";
 import { drawLerpWorld, drawWorld } from "@snk/draw/drawWorld";
 import { Snake } from "@snk/types/snake";
-import type { Options as DrawOptions } from "@snk/svg-creator";
+import type { DrawOptions as DrawOptions } from "@snk/svg-creator";
 
 export const drawOptions: DrawOptions = {
   sizeDotBorderRadius: 2,
@@ -68,7 +68,7 @@ export const createCanvas = ({
 
   const draw = (grid: Grid, snake: Snake, stack: Color[]) => {
     ctx.clearRect(0, 0, 9999, 9999);
-    drawWorld(ctx, grid, snake, stack, drawOptions);
+    drawWorld(ctx, grid, null, snake, stack, drawOptions);
   };
 
   const drawLerp = (
@@ -79,7 +79,7 @@ export const createCanvas = ({
     k: number
   ) => {
     ctx.clearRect(0, 0, 9999, 9999);
-    drawLerpWorld(ctx, grid, snake0, snake1, stack, k, drawOptions);
+    drawLerpWorld(ctx, grid, null, snake0, snake1, stack, k, drawOptions);
   };
 
   const highlightCell = (x: number, y: number, color = "orange") => {

packages/demo/demo.interactive.ts

@@ -3,6 +3,7 @@ import { step } from "@snk/solver/step";
 import { isStableAndBound, stepSpring } from "./springUtils";
 import type { Res } from "@snk/github-user-contribution";
 import type { Snake } from "@snk/types/snake";
+import type { Point } from "@snk/types/point";
 import {
   drawLerpWorld,
   getCanvasWorldSize,
@@ -12,6 +13,7 @@ import { userContributionToGrid } from "@snk/action/userContributionToGrid";
 import { createSvg } from "@snk/svg-creator";
 import { createRpcClient } from "./worker-utils";
 import type { API as WorkerAPI } from "./demo.interactive.worker";
+import { AnimationOptions } from "@snk/gif-creator";
 
 const createForm = ({
   onSubmit,
@@ -116,10 +118,12 @@ const createGithubProfile = () => {
 const createViewer = ({
   grid0,
   chain,
+  cells,
   drawOptions,
 }: {
   grid0: Grid;
   chain: Snake[];
+  cells: Point[];
   drawOptions: DrawOptions;
 }) => {
   //
@@ -159,7 +163,7 @@ const createViewer = ({
     const k = spring.x % 1;
 
     ctx.clearRect(0, 0, 9999, 9999);
-    drawLerpWorld(ctx, grid, snake0, snake1, stack, k, drawOptions);
+    drawLerpWorld(ctx, grid, null, snake0, snake1, stack, k, drawOptions);
 
     if (!stable) animationFrame = requestAnimationFrame(loop);
   };
@@ -189,9 +193,9 @@ const createViewer = ({
   //
   // svg
   const svgLink = document.createElement("a");
-  const svgString = createSvg(grid0, chain, drawOptions, {
+  const svgString = createSvg(grid0, cells, chain, drawOptions, {
     frameDuration: 100,
-  });
+  } as AnimationOptions);
   const svgImageUri = `data:image/*;charset=utf-8;base64,${btoa(svgString)}`;
   svgLink.href = svgImageUri;
   svgLink.innerText = "github-user-contribution.svg";
@@ -237,7 +241,6 @@ const onSubmit = async (userName: string) => {
     colorDots: colorScheme as any,
     colorEmpty: colorScheme[0],
     colorSnake: "purple",
-    cells,
   };
 
   const grid = userContributionToGrid(cells, colorScheme);
@@ -246,7 +249,7 @@ const onSubmit = async (userName: string) => {
 
   dispose();
 
-  createViewer({ grid0: grid, chain, drawOptions });
+  createViewer({ grid0: grid, chain, cells, drawOptions });
 };
 
 const worker = new Worker(

packages/demo/demo.svg.ts

@@ -4,12 +4,15 @@ import { createSvg } from "@snk/svg-creator";
 import { grid, snake } from "./sample";
 import { drawOptions } from "./canvas";
 import { getPathToPose } from "@snk/solver/getPathToPose";
+import type { AnimationOptions } from "@snk/gif-creator";
 
 const chain = getBestRoute(grid, snake);
 chain.push(...getPathToPose(chain.slice(-1)[0], snake)!);
 
 (async () => {
-  const svg = await createSvg(grid, chain, drawOptions, { frameDuration: 200 });
+  const svg = await createSvg(grid, null, chain, drawOptions, {
+    frameDuration: 200,
+  } as AnimationOptions);
 
   const container = document.createElement("div");
   container.innerHTML = svg;