🚀 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,6 +20,7 @@ export const drawGrid = (
 ) => {
   for (let x = grid.width; x--; )
     for (let y = grid.height; y--; ) {
+      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];
@@ -39,4 +43,5 @@ export const drawGrid = (
 
         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 = (