50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import type { Color, Empty } from "@snk/types/grid";
|
|
import { h } from "./utils";
|
|
|
|
export type Options = {
|
|
colorDots: Record<Color, string>;
|
|
sizeDot: number;
|
|
};
|
|
|
|
const percent = (x: number) => (x * 100).toFixed(2);
|
|
|
|
export const createStack = (
|
|
cells: { t: number | null; color: Color | Empty }[],
|
|
{ colorDots, sizeDot }: Options,
|
|
width: number,
|
|
y: number,
|
|
duration: number
|
|
) => {
|
|
const svgElements: string[] = [];
|
|
const styles = [];
|
|
|
|
const stack = cells
|
|
.slice()
|
|
.filter((a) => a.t !== null)
|
|
.sort((a, b) => a.t! - b.t!) as any[];
|
|
|
|
const m = width / stack.length;
|
|
let i = 0;
|
|
for (const { color, t } of stack) {
|
|
const x = ((i * width) / stack.length).toFixed(2);
|
|
const id = "t" + (i++).toString(36);
|
|
const animationName = "a" + id;
|
|
// @ts-ignore
|
|
const fill = colorDots[color];
|
|
|
|
svgElements.push(
|
|
h("rect", { id, height: sizeDot, width: (m + 0.6).toFixed(2), x, y })
|
|
);
|
|
styles.push(
|
|
`@keyframes ${animationName} {` +
|
|
`${percent(t - 0.0001)}%{fill:transparent}` +
|
|
`${percent(t + 0.0001)}%,100%{fill:${fill}}` +
|
|
"}",
|
|
|
|
`#${id}{fill:transparent;animation: ${animationName} linear ${duration}ms infinite}`
|
|
);
|
|
}
|
|
|
|
return { svgElements, styles };
|
|
};
|