v0.1.0-pre.045

kb-app-demo-desktop/frontend/ts/splash.ts

@@ -1,40 +1,112 @@
 // file: kb-app-demo-desktop/frontend/ts/splash.ts
-// version: 1
+// version: 2
 
 import { listen } from "@tauri-apps/api/event";
+import type { SplashOrder } from "./bindings/kb_app_demo_desktop/splash/SplashOrder.ts";
 
-type SplashOrder = {
-    order: string;
-    msg: string | null;
-    status: string | null;
-    duration_ms: number | null;
-};
+const defaultFadeDurationMs = 500;
+let activeOpacityFrame: number | null = null;
 
-const container = document.querySelector<HTMLElement>("#splash-container");
-const messages = document.querySelector<HTMLElement>("#messages-container");
-
-function duration(order: SplashOrder): number {
-    if (typeof order.duration_ms !== "number" || !Number.isFinite(order.duration_ms) || order.duration_ms <= 0) {
-        return 500;
+function normalizeDurationMs(value: number | null | undefined): number {
+    if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
+        return defaultFadeDurationMs;
     }
-    return order.duration_ms;
+    return value;
 }
 
-async function applyOrder(order: SplashOrder): Promise<void> {
-    if (!container) {
+function easeInOut(progress: number): number {
+    if (progress < 0.5) {
+        return 2 * progress * progress;
+    }
+    return 1 - Math.pow(-2 * progress + 2, 2) / 2;
+}
+
+async function animateOpacity(element: HTMLElement, fromOpacity: number, toOpacity: number, durationMs: number): Promise<void> {
+    if (activeOpacityFrame !== null) {
+        cancelAnimationFrame(activeOpacityFrame);
+        activeOpacityFrame = null;
+    }
+    element.style.opacity = fromOpacity.toString();
+    element.style.willChange = "opacity";
+    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+    await new Promise<void>(resolve => {
+        const startedAt = performance.now();
+        const opacityDelta = toOpacity - fromOpacity;
+        const updateOpacity = (currentTime: number): void => {
+            const elapsedMs = currentTime - startedAt;
+            const rawProgress = Math.min(elapsedMs / durationMs, 1);
+            const nextOpacity = fromOpacity + opacityDelta * easeInOut(rawProgress);
+            element.style.opacity = nextOpacity.toString();
+            if (rawProgress >= 1) {
+                element.style.opacity = toOpacity.toString();
+                element.style.willChange = "auto";
+                activeOpacityFrame = null;
+                resolve();
+                return;
+            }
+            activeOpacityFrame = requestAnimationFrame(updateOpacity);
+        };
+        activeOpacityFrame = requestAnimationFrame(updateOpacity);
+    });
+}
+
+function scrollToLatest(element: HTMLElement): void {
+    element.scrollTop = element.scrollHeight;
+}
+
+function addLogMessage(message: string): void {
+    const debugInfo = document.getElementById("debug-info");
+    if (!debugInfo) {
         return;
     }
-    if (order.order === "add_msg" && messages && order.msg) {
-        messages.textContent = order.msg;
-        messages.dataset.status = order.status ?? "info";
+    const line = document.createElement("div");
+    line.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
+    debugInfo.appendChild(line);
+    scrollToLatest(debugInfo);
+}
+
+function addMessage(message: string, status: string): void {
+    const messagesContainer = document.getElementById("messages-container");
+    if (!messagesContainer) {
         return;
     }
-    if (order.order === "fadein" || order.order === "fadeout") {
-        container.style.transition = `opacity ${duration(order)}ms ease-in-out`;
-        container.style.opacity = order.order === "fadein" ? "1" : "0";
+    const messageElement = document.createElement("div");
+    messageElement.className = `splash-message ${status}`;
+    messageElement.textContent = message;
+    messagesContainer.appendChild(messageElement);
+    scrollToLatest(messagesContainer);
+}
+
+async function handleSplashOrder(order: SplashOrder): Promise<void> {
+    const container = document.getElementById("splash-container");
+    if (order.order === "fadein" && container) {
+        await animateOpacity(container, 0, 1, normalizeDurationMs(order.duration_ms));
+        return;
+    }
+    if (order.order === "fadeout" && container) {
+        await animateOpacity(container, 1, 0, normalizeDurationMs(order.duration_ms));
+        return;
+    }
+    if (order.order === "add_msg" && order.msg && order.status) {
+        addMessage(order.msg, order.status);
+        return;
+    }
+    if (order.order === "add_log" && order.msg) {
+        addLogMessage(order.msg);
     }
 }
 
-void listen<SplashOrder>("splash", event => {
-    void applyOrder(event.payload);
+async function initializeSplash(): Promise<void> {
+    const container = document.getElementById("splash-container");
+    if (container) {
+        container.style.opacity = "0";
+        container.style.willChange = "opacity";
+    }
+    await listen<SplashOrder>("splash", event => {
+        void handleSplashOrder(event.payload);
+    });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    void initializeSplash();
 });