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

This commit is contained in:
platane
2020-10-19 23:06:55 +02:00
parent 89e2630eec
commit 2e818ce425
3 changed files with 28 additions and 20 deletions

View File

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

View File

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

View File

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