import { cubicOut } from "svelte/easing"; import type { TransitionConfig } from "svelte/transition"; type FlyAndScaleParams = { y?: number; x?: number; start?: number; duration?: number; }; export const flyAndScale = ( node: Element, params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 } ): TransitionConfig => { const style = getComputedStyle(node); const transform = style.transform === "none" ? "" : style.transform; const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => { const [minA, maxA] = scaleA; const [minB, maxB] = scaleB; const percentage = (valueA - minA) / (maxA - minA); const valueB = percentage * (maxB - minB) + minB; return valueB; }; const styleToString = (style: Record): string => { return Object.keys(style).reduce((str, key) => { if (style[key] === undefined) return str; return str + `${key}:${style[key]};`; }, ""); }; return { duration: params.duration ?? 200, delay: 0, css: (t) => { const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]); const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]); const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]); return styleToString({ transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`, opacity: t, }); }, easing: cubicOut, }; }; type Color = { h: number; s: number; l: number; }; function ColorDistance(color1: Color, color2: Color) { return Math.abs(color1.h - color2.h); } function GenerateRandomHSL(): Color { const hue = Math.floor(Math.random() * 360); const saturation = 70; const lightness = 60; return { h: hue, s: saturation, l: lightness }; } const existingColors: Color[] = []; function GenerateColor(): string { const minDistance = 15; let newColor: Color; let isDistinct = false; let iterations = 0; while (!isDistinct) { iterations++; if (iterations > 100) { console.error("Failed to generate a distinct color after 100 iterations"); break; } newColor = GenerateRandomHSL(); isDistinct = true; for (const color of existingColors) { if (ColorDistance(newColor, color) < minDistance) { isDistinct = false; break; } } existingColors.push(newColor); } // We can not reach this point without having a color generated // @ts-ignore return `hsl(${newColor.h}, ${newColor.s}%, ${newColor.l}%)`; } function LerpColor(color1: Color, color2: Color, t: number): Color { const h = color1.h + (color2.h - color1.h) * t; const s = color1.s + (color2.s - color1.s) * t; const l = color1.l + (color2.l - color1.l) * t; return { h, s, l }; } export { GenerateColor, LerpColor }; export type { Color };