🚀 avoid drawing cell that are not in the original contribution grid

packages/action/generateContributionSnake.ts

@@ -28,6 +28,7 @@ export const generateContributionSnake = async (userName: string) => {
     colorDots: colorScheme,
     colorEmpty: colorScheme[0],
     colorSnake: "purple",
+    cells,
   };
 
   const gifOptions = { frameDuration: 100, step: 1 };

packages/draw/drawGrid.ts

@@ -1,5 +1,7 @@
-import { Grid, getColor, Color } from "@snk/compute/grid";
+import { getColor } from "@snk/compute/grid";
 import { pathRoundedRect } from "./pathRoundedRect";
+import type { Grid, Color } from "@snk/compute/grid";
+import type { Point } from "@snk/compute/point";
 
 type Options = {
   colorDots: Record<Color, string>;
@@ -8,6 +10,7 @@ type Options = {
   sizeCell: number;
   sizeDot: number;
   sizeBorderRadius: number;
+  cells?: Point[];
 };
 
 export const drawGrid = (
@@ -17,26 +20,28 @@ export const drawGrid = (
 ) => {
   for (let x = grid.width; x--; )
     for (let y = grid.height; y--; ) {
-      const c = getColor(grid, x, y);
-      // @ts-ignore
-      const color = !c ? o.colorEmpty : o.colorDots[c];
-      ctx.save();
-      ctx.translate(
-        x * o.sizeCell + (o.sizeCell - o.sizeDot) / 2,
-        y * o.sizeCell + (o.sizeCell - o.sizeDot) / 2
-      );
+      if (!o.cells || o.cells.some((c) => c.x === x && c.y === y)) {
+        const c = getColor(grid, x, y);
+        // @ts-ignore
+        const color = !c ? o.colorEmpty : o.colorDots[c];
+        ctx.save();
+        ctx.translate(
+          x * o.sizeCell + (o.sizeCell - o.sizeDot) / 2,
+          y * o.sizeCell + (o.sizeCell - o.sizeDot) / 2
+        );
 
-      ctx.fillStyle = color;
-      ctx.strokeStyle = o.colorBorder;
-      ctx.lineWidth = 1;
-      ctx.beginPath();
+        ctx.fillStyle = color;
+        ctx.strokeStyle = o.colorBorder;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
 
-      pathRoundedRect(ctx, o.sizeDot, o.sizeDot, o.sizeBorderRadius);
+        pathRoundedRect(ctx, o.sizeDot, o.sizeDot, o.sizeBorderRadius);
 
-      ctx.fill();
-      ctx.stroke();
-      ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
 
-      ctx.restore();
+        ctx.restore();
+      }
     }
 };

packages/draw/drawWorld.ts

@@ -1,7 +1,8 @@
-import { Grid, Color } from "@snk/compute/grid";
 import { drawGrid } from "./drawGrid";
-import { Snake } from "@snk/compute/snake";
 import { drawSnake, drawSnakeLerp } from "./drawSnake";
+import type { Grid, Color } from "@snk/compute/grid";
+import type { Point } from "@snk/compute/point";
+import type { Snake } from "@snk/compute/snake";
 
 export type Options = {
   colorDots: Record<Color, string>;
@@ -11,6 +12,7 @@ export type Options = {
   sizeCell: number;
   sizeDot: number;
   sizeBorderRadius: number;
+  cells?: Point[];
 };
 
 export const drawStack = (