Fix TTS module initialization and dependency issues. Update module IDs for consistency, improve circular dependency detection, and fix UI Controller event handling.

public/js/loader.js

@@ -7,6 +7,10 @@
 import { moduleRegistry } from './module-registry.js';
 import { ModuleEvent } from './base-module.js';
 
+// Ensure moduleRegistry is available globally before anything else runs
+window.moduleRegistry = moduleRegistry;
+console.log('Module registry initialized and assigned to window.moduleRegistry');
+
 /**
  * Module States
  */
@@ -45,6 +49,20 @@ const ModuleLoader = (function() {
         }
         
         console.log('Module Loader: Initialization started');
+        
+        // Check for circular dependencies before proceeding
+        const circularDependencies = moduleRegistry.checkForCircularDependencies();
+        if (circularDependencies) {
+            const errorMsg = `Circular dependency detected: ${circularDependencies.join(' -> ')} -> ${circularDependencies[0]}`;
+            console.error(errorMsg);
+            document.body.innerHTML = `<div style="padding: 20px; color: white; background-color: #ff3333;">
+                <h2>Fatal Error: Circular Module Dependency</h2>
+                <p>${errorMsg}</p>
+                <p>Please check the browser console for more details.</p>
+            </div>`;
+            return;
+        }
+        
         // Create the loading overlay
         createLoadingOverlay();
         
@@ -77,6 +95,7 @@ const ModuleLoader = (function() {
      * @returns {Promise} - Resolves when all module scripts are loaded
      */
     async function loadModuleScripts() {
+        
         // Define modules with their weights
         const modulesToLoad = [
             // Core functionality modules
@@ -84,10 +103,12 @@ const ModuleLoader = (function() {
             { id: 'localization', script: '/js/localization.js', weight: 40 },
             { id: 'text-processor', script: '/js/text-processor.js', weight: 40 },
             { id: 'paragraph-layout', script: '/js/paragraph-layout.js', weight: 40 },
+            { id: 'layout-renderer', script: '/js/layout-renderer.js', weight: 45 }, // Add Layout Renderer module
             { id: 'animation-queue', script: '/js/animation-queue.js', weight: 50 },
             
             // Audio and TTS modules
             { id: 'audio-manager', script: '/js/audio-manager.js', weight: 60 },
+            { id: 'tts-factory', script: '/js/tts-factory.js', weight: 70 }, // TTSFactory must be loaded before TTSPlayer
             { id: 'tts', script: '/js/tts-player.js', weight: 75 },
             
             // UI and interaction modules
@@ -143,6 +164,13 @@ const ModuleLoader = (function() {
         // Find the game loop module instance
         gameLoopModule = moduleRegistry.getModule('game-loop');
 
+        // Log dependency information for debugging
+        console.log('Module dependencies:');
+        Object.keys(modules).forEach(moduleId => {
+            const dependencies = moduleRegistry.getDependencies(moduleId);
+            console.log(`${moduleId} depends on: ${dependencies.length ? dependencies.join(', ') : 'none'}`); 
+        });
+
         // For each registered module, start initialization
         Object.values(modules).forEach(async (module) => {
             try {
@@ -165,9 +193,15 @@ const ModuleLoader = (function() {
                     }
                 };
                 
+                // Log start of initialization
+                console.log(`Starting initialization of module: ${module.id}`);
+                
                 // Initialize the module with progress callback
                 await module.initializeInterface(progressCallback);
                 
+                // Log completion of initialization
+                console.log(`Completed initialization of module: ${module.id}`);
+                
             } catch (error) {
                 console.error(`Error initializing module ${module.id}:`, error);
             }
@@ -307,7 +341,18 @@ const ModuleLoader = (function() {
         });
         
         if (allFinished && !isLoadingComplete) {
+            console.log('All modules finished loading. Proceeding to finalization...');
             finalizeLoading();
+        } else if (!allFinished) {
+            // Log which modules are not finished yet
+            const pendingModules = Object.values(modules).filter(module => {
+                const state = module.getState();
+                return state !== ModuleState.FINISHED && state !== ModuleState.ERROR;
+            });
+            
+            if (pendingModules.length > 0) {
+                console.log('Modules still pending:', pendingModules.map(m => `${m.id} (${m.getState()})`))
+            }
         }
     }
 
@@ -316,7 +361,13 @@ const ModuleLoader = (function() {
      */
     function finalizeLoading() {
         console.log('Loading completed. Finalizing...');
-        completeFinalization();
+        try {
+            completeFinalization();
+        } catch (error) {
+            console.error('Error during finalization:', error);
+            // Force hide the overlay even if there was an error
+            hideOverlay();
+        }
     }
 
     /**
@@ -331,7 +382,11 @@ const ModuleLoader = (function() {
              // Hide the overlay first, then start the game loop
              hideOverlay(() => {
                  console.log("Loader: Overlay hidden, starting Game Loop.");
-                 gameLoopModule.start();
+                 try {
+                     gameLoopModule.start();
+                 } catch (error) {
+                     console.error("Error starting Game Loop:", error);
+                 }
              });
         } else {
             console.error("Loader: Game Loop module not found or start method missing.");