Checkpoint current interactive fiction state

public/js/loader.js

@@ -24,6 +24,8 @@ const ModuleState = {
     ERROR: 'ERROR'
 };
 
+const MODULE_CACHE_BUSTER = '20260514-new-game-click';
+
 /**
  * Module Loader - Manages the loading of all modules
  */
@@ -61,7 +63,10 @@ const ModuleLoader = (function() {
         // Load available module scripts
         loadModuleScripts().then(() => {
             // Once scripts are loaded, initialize modules
-            initializeModules();
+            initializeModules().catch(error => {
+                console.error('Module Loader: Initialization failed:', error);
+                finalizeLoading();
+            });
         });
     }
 
@@ -98,17 +103,19 @@ const ModuleLoader = (function() {
             { id: 'persistence-manager', script: '/js/persistence-manager-module.js', weight: 12 },
             { id: 'localization', script: '/js/localization-module.js', weight: 12 },
             { id: 'text-processor', script: '/js/text-processor-module.js', weight: 15 },
+            { id: 'markup-parser', script: '/js/markup-parser-module.js', weight: 5 },
             { id: 'paragraph-layout', script: '/js/paragraph-layout-module.js', weight: 17 },
             { id: 'sentence-queue', script: '/js/sentence-queue-module.js', weight: 12 },
             { id: 'layout-renderer', script: '/js/layout-renderer-module.js', weight: 13 }, // Add Layout Renderer module
             { id: 'animation-queue', script: '/js/animation-queue-module.js', weight: 12 },
-            
+            { id: 'playback-coordinator', script: '/js/playback-coordinator-module.js', weight: 8 }, // Synchronizes animation + TTS
+
             // Audio and TTS modules
             { id: 'audio-manager', script: '/js/audio-manager-module.js', weight: 12 },
-            { id: 'kokoro', script: '/js/kokoro-tts-module.js', weight: 50 },
-            { id: 'browser', script: '/js/browser-tts-module.js', weight: 12 },
-            { id: 'elevenlabs', script: '/js/elevenlabs-tts-module.js', weight: 12 },
-            { id: 'openai', script: '/js/openai-tts-module.js', weight: 12 },
+            { id: 'kokoro-tts', script: '/js/kokoro-tts-module.js', weight: 50 },
+            { id: 'browser-tts', script: '/js/browser-tts-module.js', weight: 12 },
+            { id: 'elevenlabs-tts', script: '/js/elevenlabs-tts-module.js', weight: 12 },
+            { id: 'openai-tts', script: '/js/openai-tts-module.js', weight: 12 },
             { id: 'tts-factory', script: '/js/tts-factory-module.js', weight: 13 }, // TTSFactory must be loaded before TTSPlayer
             
             // UI and interaction modules
@@ -310,7 +317,7 @@ const ModuleLoader = (function() {
                 }
             });
             
-            return result.reverse(); // Reverse to get correct order
+            return result; // Dependencies are pushed before dependents.
         };
         
         const optimalOrder = calculateOptimalLoadOrder();
@@ -404,7 +411,7 @@ const ModuleLoader = (function() {
             }
         });
         
-        return result.reverse(); // Reverse for correct dependency order
+        return result; // Dependencies are pushed before dependents.
     }
     
     /**
@@ -442,7 +449,8 @@ const ModuleLoader = (function() {
         return new Promise((resolve, reject) => {
             const script = document.createElement('script');
             script.type = 'module';
-            script.src = src;
+            const separator = src.includes('?') ? '&' : '?';
+            script.src = `${src}${separator}v=${MODULE_CACHE_BUSTER}`;
             
             // Monitor loading progress using a fake progress indicator (0-10%)
             if (moduleId && moduleWeights[moduleId]) {
@@ -492,7 +500,7 @@ const ModuleLoader = (function() {
     /**
      * Initialize all registered modules
      */
-    function initializeModules() {
+    async function initializeModules() {
         const modules = moduleRegistry.getAllModules();
 
         // Find the game loop module instance
@@ -505,8 +513,19 @@ const ModuleLoader = (function() {
             console.log(`${moduleId} depends on: ${dependencies.length ? dependencies.join(', ') : 'none'}`); 
         });
 
-        // For each registered module, start initialization
-        Object.values(modules).forEach(async (module) => {
+        const moduleList = Object.values(modules);
+        const initializationOrder = sortModulesByDependencies(moduleList);
+
+        console.group('%cActual Module Initialization Order', 'color: green; font-weight: bold');
+        initializationOrder.forEach((module, index) => {
+            console.log(`${index + 1}. ${module.id} (${module.name})`);
+        });
+        console.groupEnd();
+
+        // Initialize in dependency order. This makes the loader guarantee that
+        // by the time the overlay disappears, every module has run its own
+        // initialize() after its declared dependencies are available.
+        for (const module of initializationOrder) {
             try {
                 // Create a progress callback for this module
                 const progressCallback = (percent, message) => {
@@ -539,7 +558,13 @@ const ModuleLoader = (function() {
             } catch (error) {
                 console.error(`Error initializing module ${module.id}:`, error);
             }
-        });
+
+            if (module.id === 'game-loop') {
+                gameLoopModule = module;
+            }
+        }
+
+        checkAllFinished();
     }
     
     /**