🚿 split svg creator file

packages/svg-creator/stack.ts

@@ -0,0 +1,49 @@
+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 };
+};