Add a "calorie remaining today" display

frontend/src/lib/utils.ts

@@ -1,106 +1,108 @@
-import { cubicOut } from 'svelte/easing'
-import type { TransitionConfig } from 'svelte/transition'
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
 
 type FlyAndScaleParams = {
-	y?: number
-	x?: number
-	start?: number
-	duration?: number
-}
+	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 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 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
+		const percentage = (valueA - minA) / (maxA - minA);
+		const valueB = percentage * (maxB - minB) + minB;
 
-		return valueB
-	}
+		return valueB;
+	};
 
-	const styleToString = (
-		style: Record<string, number | string | undefined>
-	): string => {
+	const styleToString = (style: Record<string, number | string | undefined>): string => {
 		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str
-			return str + `${key}:${style[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])
+		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
-			})
+				opacity: t,
+			});
 		},
-		easing: cubicOut
-	}
-}
+		easing: cubicOut,
+	};
+};
 
 type Color = {
-	h: number
-	s: number
-	l: number
-}
+	h: number;
+	s: number;
+	l: number;
+};
 
 function ColorDistance(color1: Color, color2: Color) {
-	return Math.abs(color1.h - color2.h)
+	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 hue = Math.floor(Math.random() * 360);
+	const saturation = 70;
+	const lightness = 60;
+	return { h: hue, s: saturation, l: lightness };
 }
 
-const existingColors: Color[] = []
+const existingColors: Color[] = [];
 
 function GenerateColor(): string {
-	const minDistance = 15
+	const minDistance = 15;
 
-	let newColor: Color
-	let isDistinct = false
-	let iterations = 0
+	let newColor: Color;
+	let isDistinct = false;
+	let iterations = 0;
 	while (!isDistinct) {
-		iterations++
-		if (iterations > 1000) {
-			console.error('Failed to generate a distinct color after 1000 iterations')
-			break
+		iterations++;
+		if (iterations > 100) {
+			console.error("Failed to generate a distinct color after 100 iterations");
+			break;
 		}
-		newColor = GenerateRandomHSL()
-		isDistinct = true
+		newColor = GenerateRandomHSL();
+		isDistinct = true;
 
 		for (const color of existingColors) {
 			if (ColorDistance(newColor, color) < minDistance) {
-				isDistinct = false
-				break
+				isDistinct = false;
+				break;
 			}
 		}
-		existingColors.push(newColor)
+		existingColors.push(newColor);
 	}
 
 	// We can not reach this point without having a color generated
 	// @ts-ignore
-	return `hsl(${newColor.h}, ${newColor.s}%, ${newColor.l}%)`
+	return `hsl(${newColor.h}, ${newColor.s}%, ${newColor.l}%)`;
 }
 
-export { GenerateColor }
+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 };