♻️ refacto: rename options

packages/svg-creator/__tests__/createSvg.spec.ts

@@ -1,11 +1,12 @@
 import * as fs from "fs";
 import * as path from "path";
-import { createSvg, Options } from "..";
+import { createSvg, DrawOptions as DrawOptions } from "..";
 import * as grids from "@snk/types/__fixtures__/grid";
 import { snake3 as snake } from "@snk/types/__fixtures__/snake";
 import { getBestRoute } from "@snk/solver/getBestRoute";
+import { AnimationOptions } from "@snk/gif-creator";
 
-const drawOptions: Options = {
+const drawOptions: DrawOptions = {
   sizeDotBorderRadius: 2,
   sizeCell: 16,
   sizeDot: 12,
@@ -19,7 +20,7 @@ const drawOptions: Options = {
   },
 };
 
-const gifOptions = { frameDuration: 100, step: 1 };
+const animationOptions: AnimationOptions = { frameDuration: 100, step: 1 };
 
 const dir = path.resolve(__dirname, "__snapshots__");
 
@@ -31,7 +32,13 @@ for (const [key, grid] of Object.entries(grids))
   it(`should generate ${key} svg`, async () => {
     const chain = [snake, ...getBestRoute(grid, snake)!];
 
-    const svg = await createSvg(grid, chain, drawOptions, gifOptions);
+    const svg = await createSvg(
+      grid,
+      null,
+      chain,
+      drawOptions,
+      animationOptions
+    );
 
     expect(svg).toBeDefined();
 

packages/svg-creator/index.ts

@@ -14,8 +14,9 @@ import { createGrid } from "./grid";
 import { createStack } from "./stack";
 import { h } from "./utils";
 import * as csso from "csso";
+import { AnimationOptions } from "@snk/gif-creator";
 
-export type Options = {
+export type DrawOptions = {
   colorDots: Record<Color, string>;
   colorEmpty: string;
   colorDotBorder: string;
@@ -23,7 +24,6 @@ export type Options = {
   sizeCell: number;
   sizeDot: number;
   sizeDotBorderRadius: number;
-  cells?: Point[];
   dark?: {
     colorDots: Record<Color, string>;
     colorEmpty: string;
@@ -40,12 +40,12 @@ const getCellsFromGrid = ({ width, height }: Grid) =>
 const createLivingCells = (
   grid0: Grid,
   chain: Snake[],
-  drawOptions: Options
+  cells: Point[] | null
 ) => {
-  const cells: (Point & {
+  const livingCells: (Point & {
     t: number | null;
     color: Color | Empty;
-  })[] = (drawOptions.cells ?? getCellsFromGrid(grid0)).map(({ x, y }) => ({
+  })[] = (cells ?? getCellsFromGrid(grid0)).map(({ x, y }) => ({
     x,
     y,
     t: null,
@@ -60,31 +60,32 @@ const createLivingCells = (
 
     if (isInside(grid, x, y) && !isEmpty(getColor(grid, x, y))) {
       setColorEmpty(grid, x, y);
-      const cell = cells.find((c) => c.x === x && c.y === y)!;
+      const cell = livingCells.find((c) => c.x === x && c.y === y)!;
       cell.t = i / chain.length;
     }
   }
 
-  return cells;
+  return livingCells;
 };
 
 export const createSvg = (
   grid: Grid,
+  cells: Point[] | null,
   chain: Snake[],
-  drawOptions: Options,
-  gifOptions: { frameDuration: number }
+  drawOptions: DrawOptions,
+  animationOptions: Pick<AnimationOptions, "frameDuration">
 ) => {
   const width = (grid.width + 2) * drawOptions.sizeCell;
   const height = (grid.height + 5) * drawOptions.sizeCell;
 
-  const duration = gifOptions.frameDuration * chain.length;
+  const duration = animationOptions.frameDuration * chain.length;
 
-  const cells = createLivingCells(grid, chain, drawOptions);
+  const livingCells = createLivingCells(grid, chain, cells);
 
   const elements = [
-    createGrid(cells, drawOptions, duration),
+    createGrid(livingCells, drawOptions, duration),
     createStack(
-      cells,
+      livingCells,
       drawOptions,
       grid.width * drawOptions.sizeCell,
       (grid.height + 2) * drawOptions.sizeCell,
@@ -134,7 +135,7 @@ export const createSvg = (
 const optimizeCss = (css: string) => csso.minify(css).css;
 const optimizeSvg = (svg: string) => svg;
 
-const generateColorVar = (drawOptions: Options) =>
+const generateColorVar = (drawOptions: DrawOptions) =>
   `
     :root {
     --cb: ${drawOptions.colorDotBorder};