Update lobby.js

davespser · Dec 5, 2024 · 769f163 · 769f163
1 parent a5799b9
commit 769f163
Showing 1 changed file with 71 additions and 58 deletions.
diff --git a/js/lobby.js b/js/lobby.js
@@ -1,67 +1,80 @@
-import * as THREE from 'three';
-import { initCuestionario } from './cuestionario.js';
-import { initEscenario1 } from './escenario1.js';
+// Crear escena del Lobby
+const sceneLobby = new THREE.Scene();
+const cameraLobby = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
 
-export function initLobby(renderer, camera, switchScene) {
-    const sceneLobby = new THREE.Scene();
+// Cargar fondo de la escena
+const loader = new THREE.TextureLoader();
+loader.load('./assets/images/roman.jpg', function (texture) {
+    sceneLobby.background = texture;
+});
 
-    // Fondo de la escena
-    const loader = new THREE.TextureLoader();
-    loader.load('./assets/images/roman.jpg', texture => {
-        sceneLobby.background = texture;
-    });
+// Configurar renderizador
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
 
-    // Cubo animado
-    const geometry = new THREE.BoxGeometry();
-    const material = new THREE.MeshBasicMaterial({ color: 0x007BFF });
-    const cube = new THREE.Mesh(geometry, material);
-    cube.position.z = -10;
-    sceneLobby.add(cube);
+// Crear cubo animado
+const geometry = new THREE.BoxGeometry();
+const material = new THREE.MeshBasicMaterial({ color: 0x007BFF });
+const cube = new THREE.Mesh(geometry, material);
+cube.position.z = -10;
+sceneLobby.add(cube);
 
-    // Crear botones del lobby
-    const lobbyContainer = document.createElement('div');
-    lobbyContainer.style = `
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        color: white;
-        font-family: Arial, sans-serif;
-        z-index: 10;
-    `;
-    lobbyContainer.innerHTML = `
-        <h1>Bienvenido al RPG de Colores</h1>
-        <div>
-            <button id="start-game-button">Empezar Juego</button>
-            <button id="options-button">Opciones</button>
-        </div>
-    `;
-    document.body.appendChild(lobbyContainer);
+// Animar el Lobby
+function animateLobby() {
+    requestAnimationFrame(animateLobby);
+    cube.rotation.x += 0.01;
+    cube.rotation.y += 0.01;
+    renderer.render(sceneLobby, cameraLobby);
+}
+animateLobby();
+
+// Manejar botones
+const lobbyContainer = document.createElement('div');
+lobbyContainer.style = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+    color: white;
+    font-family: Arial, sans-serif;
+`;
+lobbyContainer.innerHTML = `
+    <h1>Bienvenido al RPG de Colores</h1>
+    <div>
+        <button id="start-game-button">Empezar Juego</button>
+        <button id="options-button">Opciones</button>
+    </div>
+`;
+document.body.appendChild(lobbyContainer);
 
-    // Manejar eventos de los botones
-    document.getElementById('start-game-button').addEventListener('click', () => {
-        lobbyContainer.style.display = 'none'; // Ocultar el Lobby
-        initCuestionario(renderer, camera, switchScene); // Cargar Cuestionario
-    });
+// Eventos de los botones
+document.getElementById('start-game-button').addEventListener('click', () => {
+    lobbyContainer.style.display = 'none'; // Ocultar Lobby
+    loadCuestionario(); // Cargar Cuestionario
+});
 
-    document.getElementById('options-button').addEventListener('click', () => {
-        lobbyContainer.style.display = 'none'; // Ocultar el Lobby
-        initEscenario1(renderer, camera, switchScene); // Cargar Escenario 1
-    });
+document.getElementById('options-button').addEventListener('click', () => {
+    lobbyContainer.style.display = 'none'; // Ocultar Lobby
+    loadEscenario1(); // Cargar Escenario 1
+});
 
-    // Animar el lobby
-    function animateLobby() {
-        currentAnimationLoop = requestAnimationFrame(animateLobby);
-        cube.rotation.x += 0.01;
-        cube.rotation.y += 0.01;
-        renderer.render(sceneLobby, camera);
-    }
+// Cargar Cuestionario
+function loadCuestionario() {
+    const script = document.createElement('script');
+    script.src = './js/cuestionario.js';
+    document.body.appendChild(script);
+}
 
-    // Establecer la escena inicial
-    switchScene(sceneLobby, animateLobby);
+// Cargar Escenario 1
+function loadEscenario1() {
+    const script = document.createElement('script');
+    script.src = './js/escenario1.js';
+    document.body.appendChild(script);
 }