Promote version e676143 to main

Promoted commit e676143bd4b8302eb130f3aef07fddd1104d1b17 to main branch

index.html

@@ -4,9 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>3D Character World</title>
+    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js"></script>
 <style>
         body {
             margin: 0;
@@ -187,20 +188,9 @@
             </div>
         </div>
     </div>
-    <!-- Modal for alerts -->
-    <div id="modal-overlay" class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 opacity-0 pointer-events-none transition-all">
-        <div class="bg-gray-900/90 border border-white/10 rounded-xl p-6 max-w-md mx-4 shadow-2xl">
-            <h3 id="modal-title" class="text-xl font-bold text-white mb-2"></h3>
-            <p id="modal-message" class="text-gray-300 mb-4"></p>
-            <button id="modal-close" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white py-2 rounded-lg font-semibold hover:from-purple-700 hover:to-blue-700 transition-all">
-                OK
-            </button>
-        </div>
-    </div>
-
     <!-- Game UI -->
     <div id="game-ui" class="fixed inset-0 pointer-events-none z-20 opacity-0 transition-all">
-<div class="absolute bottom-4 left-4 bg-gray-800 bg-opacity-70 p-4 rounded-lg">
+        <div class="absolute bottom-4 left-4 bg-gray-800 bg-opacity-70 p-4 rounded-lg">
             <div class="flex items-center space-x-2">
                 <div class="w-3 h-3 rounded-full bg-green-500"></div>
                 <span>WASD: Move</span>
@@ -379,45 +369,25 @@
 
             // Initialize audio context on user interaction
             document.addEventListener('click', initializeAudio, { once: true });
-        // Check if Three.js is loaded
-        if (typeof THREE === 'undefined') {
-            console.error('Three.js not loaded');
-            // Fallback to loading from CDN
-            const script = document.createElement('script');
-            script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js';
-            script.onload = () => {
-                console.log('Three.js loaded via fallback');
-                // Now load the modules
+
+            // Check if Three.js modules are available
+            if (typeof THREE === 'undefined') {
+                console.error('Three.js not loaded');
+                // Try to load modules dynamically if needed
                 loadThreeJSModules();
-            };
-            document.head.appendChild(script);
-        } else {
-            // Three.js is loaded, check if modules are available
-            loadThreeJSModules();
-        }
-});
+            }
+        });
+
         // Function to dynamically load Three.js modules if needed
         function loadThreeJSModules() {
             // Check if OrbitControls is available
             if (typeof THREE.OrbitControls === 'undefined') {
-                console.log('Loading OrbitControls...');
-                const orbitScript = document.createElement('script');
-                orbitScript.src = 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.min.js';
-                orbitScript.onload = () => {
-                    console.log('OrbitControls loaded');
-                };
-                document.head.appendChild(orbitScript);
+                console.warn('OrbitControls not available, using fallback controls');
             }
             
             // Check if GLTFLoader is available
             if (typeof THREE.GLTFLoader === 'undefined') {
-                console.log('Loading GLTFLoader...');
-                const gltfScript = document.createElement('script');
-                gltfScript.src = 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.min.js';
-                gltfScript.onload = () => {
-                    console.log('GLTFLoader loaded');
-                };
-                document.head.appendChild(gltfScript);
+                console.warn('GLTFLoader not available, using fallback geometry');
             }
         }
 function initializeAudio() {
@@ -511,11 +481,11 @@ function showCharacterSelection() {
         }
         function startGame() {
             if (gameState.selectedWorldCharacters.length < 2) {
-                // Use a custom modal instead of alert for better UX
-                showModal('Selection Required', 'Please select 2 characters for your world!');
+                alert('Please select 2 characters for your world!');
                 return;
             }
-// Ensure audio is initialized when game starts
+            
+            // Ensure audio is initialized when game starts
             if (!audioContext) {
                 initializeAudio();
             }
@@ -612,26 +582,18 @@ card.addEventListener('click', () => {
         function initThreeJS() {
             if (typeof THREE === 'undefined') {
                 console.error('Three.js is not loaded properly');
-                // Try to load Three.js dynamically
-                const script = document.createElement('script');
-                script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js';
-                script.onload = () => {
-                    console.log('Three.js loaded, retrying initialization...');
-                    initThreeJS(); // Retry initialization
-                };
-                document.head.appendChild(script);
+                // Try to reload or show error
+                setTimeout(() => {
+                    if (typeof THREE === 'undefined') {
+                        alert('Three.js failed to load. Please refresh the page.');
+                    } else {
+                        initThreeJS(); // Retry initialization
+                    }
+                }, 100);
                 return;
             }
             
-            // Check if required modules are available
-            if (typeof THREE.OrbitControls === 'undefined') {
-                console.warn('OrbitControls not available, using fallback camera controls');
-            }
-            
-            if (typeof THREE.GLTFLoader === 'undefined') {
-                console.warn('GLTFLoader not available, using fallback geometry');
-            }
-try {
+            try {
                 // Set up Three.js scene
                 scene = new THREE.Scene();
                 scene.background = new THREE.Color(0x87CEEB); // Sky blue
@@ -714,23 +676,23 @@ try {
                 
                 // Add some environment objects
                 addEnvironmentObjects();
+                
                 // Initialize OrbitControls with fallback
-                let controls;
                 if (typeof THREE.OrbitControls !== 'undefined') {
                     controls = new THREE.OrbitControls(camera, renderer.domElement);
                     controls.enableDamping = true;
                     controls.dampingFactor = 0.05;
                     controls.enabled = false; // Start with controls disabled for follow camera
                 } else {
-                    console.warn('OrbitControls not available, using fallback camera controls');
+                    console.warn('OrbitControls not available, using fallback');
                     controls = { 
                         enabled: false, 
                         update: () => {},
                         target: new THREE.Vector3()
                     };
                 }
-                window.controls = controls; // Make globally available
-// Load player character
+
+                // Load player character
                 loadPlayerCharacter();
                 
                 // Load NPC characters
@@ -748,8 +710,8 @@ try {
             } catch (error) {
                 console.error('Error initializing Three.js:', error);
                 // Show user-friendly error message
-                showModal('3D Graphics Error', 'Error initializing 3D graphics. Please check your browser supports WebGL and try refreshing the page.');
-}
+                alert('Error initializing 3D graphics. Please check your browser supports WebGL.');
+            }
         }
 function addEnvironmentObjects() {
             // Add some trees
@@ -786,9 +748,8 @@ function addEnvironmentObjects() {
             }
         }
         function loadPlayerCharacter() {
-            if (typeof THREE.GLTFLoader !== 'undefined') {
-                const loader = new THREE.GLTFLoader();
-loader.load(gameState.selectedCharacter.modelUrl, (gltf) => {
+            if (loader && typeof THREE.GLTFLoader !== 'undefined') {
+                loader.load(gameState.selectedCharacter.modelUrl, (gltf) => {
                     const model = gltf.scene;
                     // Scale and position the RPM avatar model - adjusted for human proportions
                     model.scale.set(0.8, 0.8, 0.8);
@@ -842,10 +803,9 @@ loader.load(gameState.selectedCharacter.modelUrl, (gltf) => {
                 });
             } else {
                 // GLTFLoader not available, use fallback
-                console.warn('GLTFLoader not available, using fallback character');
                 loadPlayerCharacterFallback();
             }
-}
+        }
 function loadPlayerCharacterFallback() {
             const group = new THREE.Group();
             
@@ -1054,7 +1014,7 @@ scene.add(group);
             // Update camera based on mode
             updateCamera(delta);
             // Update OrbitControls if enabled
-            if (controls && controls.enabled && typeof controls.update === 'function') {
+            if (controls && controls.enabled) {
                 controls.update();
             }
 renderer.render(scene, camera);
@@ -1207,11 +1167,13 @@ function handlePlayerMovement(delta) {
             // Update UI display
             document.getElementById('camera-mode-display').textContent = 
                 gameState.cameraMode.charAt(0).toUpperCase() + gameState.cameraMode.slice(1);
+            
             // Enable/disable OrbitControls based on mode
             if (controls && typeof controls.enabled !== 'undefined') {
                 controls.enabled = (gameState.cameraMode === 'orbit');
             }
-// Reset camera position for first-person mode
+            
+            // Reset camera position for first-person mode
             if (gameState.cameraMode === 'first-person') {
                 camera.rotation.set(0, 0, 0);
             }