import type { Color , Empty } from "@snk/types/grid" ; import type { Point } from "@snk/types/point" ; import { h } from "./utils" ; export type Options = { colorDots : Record < Color , string > ; colorEmpty : string ; colorBorder : string ; sizeCell : number ; sizeDot : number ; sizeBorderRadius : number ; } ; const percent = ( x ) => ( x * 100 ) . toFixed ( 2 ) ; export const createGrid = ( cells , { sizeBorderRadius , sizeDot , sizeCell } , duration ) => { const svgElements = [ ] ; const styles = [ `.c{
      shape-rendering: geometricPrecision;
      rx: ${ sizeBorderRadius };
      ry: ${ sizeBorderRadius };
      fill: var(--ce);
      stroke-width: 1px;
      stroke: var(--cb);
      animation: none ${ duration }ms linear infinite;
    }` , ] ; let i = 0 ; for ( const { x , y , color , t } of cells ) { const id = t && "c" + ( i ++ ) . toString ( 36 ) ; const s = sizeCell ; const d = sizeDot ; const m = ( s - d ) / 2 ; if ( t !== null ) { const animationName = id ; styles . push ( `@keyframes ${ animationName } {` + `${ percent ( t - 0.0001 ) }%{fill:var(--c${ color })}` + `${ percent ( t + 0.0001 ) }%,100%{fill:var(--ce)}` + "}" , `.c.${ id }{fill: var(--c${ color }); animation-name: ${ animationName }}` ) ; } svgElements . push ( h ( "rect" , { class : [ "c" , id ] . filter ( Boolean ) . join ( " " ) , x : x * s + m , y : y * s + m , width : d , height : d } ) ) ; } return { svgElements , styles } ; } ;