Refactored app to include all the ink.js typography.

public/js/animation-queue.js

@@ -0,0 +1,117 @@
+/**
+ * AnimationQueue Module
+ * Manages the timing and execution queue for all scheduled animations (primarily text reveal).
+ */
+export class AnimationQueue {
+    constructor() {
+        this.queue = [];
+        this.delay = 0;
+        this.speed = 0.05; // Default speed
+    }
+
+    /**
+     * Schedule a function to be executed after a delay
+     * @param {Function} func - The function to execute
+     * @param {number} delay - The delay in milliseconds
+     * @param {...any} args - Arguments to pass to the function
+     * @returns {number} The timeout ID
+     */
+    schedule(func, delay, ...args) {
+        const timeoutObject = {
+            execute: () => func(...args),
+            timeoutId: null
+        };
+
+        timeoutObject.timeoutId = setTimeout(() => {
+            timeoutObject.execute();
+            this.queue = this.queue.filter(t => t !== timeoutObject);
+            if (this.queue.length <= 0) {
+                let event = new CustomEvent("allWordsSetEvent", {
+                    detail: { messages: "All scheduled word fade in animations were played." },
+                    bubbles: true,
+                    cancelable: false
+                });
+                document.dispatchEvent(event);
+            }
+        }, delay);
+
+        this.queue.push(timeoutObject);
+        return timeoutObject.timeoutId;
+    }
+
+    /**
+     * Fast forward all scheduled animations
+     */
+    fastForward() {
+        this.delay = 0.0;
+        // Sort the queue based on timeoutId (assuming that smaller ids are scheduled earlier)
+        this.queue.sort((a, b) => a.timeoutId - b.timeoutId);
+        // Clear and execute all timeouts
+        this.queue.forEach(timeoutObject => {
+            clearTimeout(timeoutObject.timeoutId);
+            timeoutObject.execute();
+        });
+        this.queue = [];
+        let event = new CustomEvent("allWordsSetEvent", {
+            detail: { messages: "All scheduled word fade in animations were played." },
+            bubbles: true,
+            cancelable: false
+        });
+        document.dispatchEvent(event);
+        document.getElementById("page_right").scrollTo({
+            top: document.getElementById("page_right").scrollHeight,
+            behavior: 'smooth'
+        });
+    }
+
+    /**
+     * Stop all scheduled animations
+     */
+    stop() {
+        this.queue.forEach(timeoutObject => {
+            clearTimeout(timeoutObject.timeoutId);
+        });
+        this.queue = [];
+        this.delay = 0;
+    }
+
+    /**
+     * Set the animation speed
+     * @param {number} value - The speed value
+     */
+    setSpeed(value) {
+        this.speed = value;
+    }
+
+    /**
+     * Get the current animation speed
+     * @returns {number} The current speed
+     */
+    getSpeed() {
+        return this.speed;
+    }
+
+    /**
+     * Get the current accumulated delay
+     * @returns {number} The current delay
+     */
+    getDelay() {
+        return this.delay;
+    }
+
+    /**
+     * Set the accumulated delay
+     * @param {number} value - The delay value
+     */
+    setDelay(value) {
+        this.delay = value;
+    }
+
+    /**
+     * Increment the accumulated delay
+     * @param {number} value - The amount to increment
+     */
+    incrementDelay(value) {
+        this.delay += value;
+    }
+}