Checkpoint current UI and ink integration state

public/js/loader.js

@@ -39,9 +39,11 @@ const ModuleLoader = (function() {
     let statusText = null;
     let isLoadingComplete = false;
     let moduleWeights = {};
+    let moduleProgress = {};
     let createdModules = new Set(); // Track which modules we've created UI elements for
     let gameLoopModule = null; // Add variable to hold game loop instance
     let moduleTimings = {}; // Track timing data for modules
+    let finalizationTimer = null;
 
     /**
      * Initialize the loader
@@ -138,6 +140,7 @@ const ModuleLoader = (function() {
         // Store module weights for progress calculation
         modulesToLoad.forEach(module => {
             moduleWeights[module.id] = module.weight;
+            moduleProgress[module.id] = 0;
         });
         
         // Create a module list entry for each module
@@ -692,15 +695,19 @@ const ModuleLoader = (function() {
      */
     function handleModuleProgress(event) {
         const { moduleId, progress } = event.detail;
+        const numericProgress = Math.min(100, Math.max(0, Number(progress) || 0));
+        const previousProgress = Number(moduleProgress[moduleId] || 0);
+        const nextProgress = Math.max(previousProgress, numericProgress);
+        moduleProgress[moduleId] = nextProgress;
         
         // Get the module element
         const moduleItem = document.querySelector(`#module-${moduleId}`);
         if (moduleItem) {
             // Update module item's before pseudo-element width using CSS variable
-            moduleItem.style.setProperty('--progress-width', `${progress}%`);
+            moduleItem.style.setProperty('--progress-width', `${nextProgress}%`);
             
             // Also set a data attribute for browsers that don't support CSS variables
-            moduleItem.setAttribute('data-progress', progress);
+            moduleItem.setAttribute('data-progress', nextProgress);
         }
         
         updateOverallProgress();
@@ -716,6 +723,7 @@ const ModuleLoader = (function() {
         
         // If module is finished, update overall completion
         if (state === ModuleState.FINISHED) {
+            moduleProgress[moduleId] = 100;
             // This triggers only when ALL modules are complete, so modules would be removed too quickly
             // if (areAllModulesComplete()) {
             //    hideLoadingOverlay();
@@ -725,8 +733,13 @@ const ModuleLoader = (function() {
                 // Ensure module-finished class is added with a small delay to avoid race conditions
                 setTimeout(() => {
                     moduleItem.classList.add('module-finished');
-                }, 100);
+                    moduleItem.addEventListener('animationend', () => {
+                        moduleItem.remove();
+                    }, { once: true });
+                }, 120);
             }
+        } else if (state === ModuleState.ERROR) {
+            moduleProgress[moduleId] = 100;
         }
         
         updateOverallProgress();
@@ -783,7 +796,12 @@ const ModuleLoader = (function() {
         
         if (allFinished && !isLoadingComplete) {
             console.log('All modules finished loading. Proceeding to finalization...');
-            finalizeLoading();
+            if (!finalizationTimer) {
+                finalizationTimer = setTimeout(() => {
+                    finalizationTimer = null;
+                    finalizeLoading();
+                }, 900);
+            }
         } else if (allFinished && isLoadingComplete) {
             console.log('All modules are finished but isLoadingComplete is already true');
         }
@@ -982,19 +1000,18 @@ const ModuleLoader = (function() {
      * Update overall progress based on module weights and progress
      */
     function updateOverallProgress() {
-        const modules = moduleRegistry.getAllModules();
-        const moduleIds = Object.keys(modules);
+        const moduleIds = Object.keys(moduleWeights);
         
         // Calculate total weight
         const totalWeight = moduleIds.reduce((sum, id) => {
             return sum + (moduleWeights[id] || 1);
         }, 0);
+        if (totalWeight <= 0) return;
         
         // Calculate weighted progress
         let overallProgress = moduleIds.reduce((sum, id) => {
-            const module = modules[id];
             const weight = moduleWeights[id] || 1;
-            return sum + (module.progress * weight / totalWeight);
+            return sum + ((moduleProgress[id] || 0) * weight / totalWeight);
         }, 0);
         
         overallProgress = Math.min(Math.round(overallProgress), 100);