🚀 avoid drawing cell that are not in the original contribution grid
This commit is contained in:
@@ -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 };
|
||||||
|
|||||||
@@ -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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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 = (
|
||||||
|
|||||||
Reference in New Issue
Block a user