${event.description}
+ ${event.type} + `; + + document.body.appendChild(toast); + + setTimeout(() => { + toast.remove(); + }, 4000); +} + +const PHASE_TRANSLATIONS = { + 'POWER': 'PODER', + 'HERO': 'HÉROES', + 'EXPLORATION': 'EXPLORACIÓN', + 'MONSTER': 'MONSTRUOS', + 'END': 'FIN' +}; + +turnManager.addEventListener('phaseChange', (e) => { + const phaseName = PHASE_TRANSLATIONS[e.detail] || e.detail; + phaseDisplay.innerText = `FASE: ${phaseName}`; + + // Example: Update lighting or UI based on phase + if (e.detail === PHASES.EXPLORATION) { + console.log("Entering Exploration Mode - Waiting for door interaction..."); + } +}); + +turnManager.addEventListener('message', (e) => { + // Show smaller toast for messages + const msg = document.createElement('div'); + msg.style.position = 'absolute'; + msg.style.bottom = '100px'; + msg.style.left = '50%'; + msg.style.transform = 'translateX(-50%)'; + msg.style.color = '#fff'; + msg.style.textShadow = '0 0 2px #000'; + msg.innerText = e.detail; + document.body.appendChild(msg); + setTimeout(() => msg.remove(), 2000); +}); + +turnManager.addEventListener('eventTriggered', (e) => { + showUIEvent(e.detail.event); +}); + +// Start the game loop +turnManager.startTurn(); + const SESSION = { selectedUnitId: null, - path: [], // Array de {x, y} - pathMeshes: [], // Array de meshes visuales - roomMeshes: {}, // { roomId: { tile: mesh, walls: [], doors: [], entities: [] } } + selectedDoorId: null, // Nuevo: ID de la puerta seleccionada + path: [], + pathMeshes: [], + roomMeshes: {}, isAnimating: false, - textureCache: {}, // Cache de texturas cargadas - currentView: 'N' // Vista actual: N, S, E, W + textureCache: {}, + currentView: 'N' }; // --- CONFIGURACIÓN BÁSICA THREE.JS --- @@ -469,7 +601,9 @@ function isAdjacent(p1, p2) { // Verificar si una posición está dentro de una sala function isPositionInRoom(x, y, room) { const tile = room.tile; - const tileDef = ASSETS.tiles[tile.type]; + const tileDef = room.tileDef; + if (!tileDef) return false; + const minX = tile.x; const maxX = tile.x + tileDef.width - 1; const minY = tile.y; @@ -478,6 +612,36 @@ function isPositionInRoom(x, y, room) { return x >= minX && x <= maxX && y >= minY && y <= maxY; } +// Verificar colisión entre un rectángulo propuesto y las salas existentes +// x, y: Coordenadas Grid (Top-Left) +// width, height: Dimensiones Grid +function isAreaFree(x, y, width, height) { + const aMinX = x; + const aMaxX = x + width; + const aMinY = y; + const aMaxY = y + height; + + for (const room of ROOMS.rooms) { + const tileDef = room.tileDef; + if (!tileDef) continue; + + // Rectángulo B (Existente) + const bMinX = room.tile.x; + const bMaxX = room.tile.x + tileDef.width; + const bMinY = room.tile.y; + const bMaxY = room.tile.y + tileDef.height; + + // Check Overlap (Intersección de AABB) + const noOverlap = aMaxX <= bMinX || aMinX >= bMaxX || aMaxY <= bMinY || aMinY >= bMaxY; + + if (!noOverlap) { + console.log(`Collision detected with Room ${room.id} [${bMinX},${bMinY},${bMaxX},${bMaxY}] vs New [${aMinX},${aMinY},${aMaxX},${aMaxY}]`); + return false; + } + } + return true; +} + // Verificar si una posición es una puerta function isPositionDoor(x, y, room) { for (const door of room.doors) { @@ -489,25 +653,281 @@ function isPositionDoor(x, y, room) { return false; } -// Verificar si una celda es transitable + + +// Verificar si una celda es transitable usando la matriz de walkability function isWalkable(x, y) { - // Verificar en todas las salas visitadas for (const roomId of ROOMS.visitedRooms) { const room = ROOMS.rooms.find(r => r.id === roomId); - if (!room) continue; + if (!room || !room.tileDef) continue; - // Si está dentro de la sala, es transitable if (isPositionInRoom(x, y, room)) { - return true; + // Get local coordinates within the tile + const localX = x - room.tile.x; + const localY = y - room.tile.y; + + // Check walkability matrix + const walkValue = room.tileDef.walkability[localY][localX]; + return walkValue > 0; // 0 = not walkable, >0 = walkable } - // Si es una puerta de la sala, es transitable - if (isPositionDoor(x, y, room)) { - return true; + // Verificar puertas + for (const door of room.doors) { + const doorPos = getDoorGridPosition(room, door); + if (doorPos.x === x && doorPos.y === y) { + return door.isOpen; // Solo transitable si está abierta + } + } + } + return false; +} + +// Get the layer/height of a specific position +function getTileLayer(x, y) { + for (const roomId of ROOMS.visitedRooms) { + const room = ROOMS.rooms.find(r => r.id === roomId); + if (!room || !room.tileDef) continue; + + if (isPositionInRoom(x, y, room)) { + const localX = x - room.tile.x; + const localY = y - room.tile.y; + + return room.tileDef.walkability[localY][localX]; + } + } + return 0; // Not in any room +} + +// Check if movement between two positions with different layers is allowed +function canTransitionLayers(fromX, fromY, toX, toY) { + const fromLayer = getTileLayer(fromX, fromY); + const toLayer = getTileLayer(toX, toY); + + // Same layer or one is a stair + if (fromLayer === toLayer || fromLayer === 9 || toLayer === 9) { + return true; + } + + // Different layers - check if there's a stair adjacent + const layerDiff = Math.abs(fromLayer - toLayer); + if (layerDiff > 1) { + return false; // Can't jump more than 1 layer + } + + // Check if there's a stair (9) adjacent to either position + const adjacentPositions = [ + { x: fromX - 1, y: fromY }, + { x: fromX + 1, y: fromY }, + { x: fromX, y: fromY - 1 }, + { x: fromX, y: fromY + 1 }, + { x: toX - 1, y: toY }, + { x: toX + 1, y: toY }, + { x: toX, y: toY - 1 }, + { x: toX, y: toY + 1 } + ]; + + for (const pos of adjacentPositions) { + if (getTileLayer(pos.x, pos.y) === 9) { + return true; // Found a stair } } - return false; + return false; // No stair found +} + +// Determine if a door should be placed between two tile types +function shouldPlaceDoor(tileTypeA, tileTypeB) { + // Doors only between Room ↔ Corridor + return (tileTypeA === 'room' && tileTypeB === 'corridor') || + (tileTypeA === 'corridor' && tileTypeB === 'room'); +} + +// Validate walkability alignment between two tiles at their connection point +// Returns: { valid: boolean, offset: number } - offset is how much to shift tileB to align with tileA +function validateWalkabilityAlignment(tileDefA, posA, tileDefB, posB, exitSide) { + // Get the edge cells that will connect + const edgeA = getEdgeCells(tileDefA, exitSide); + const edgeB = getEdgeCells(tileDefB, getOppositeSide(exitSide)); + + console.log(`[ALIGN] Checking ${tileDefA.id} (${exitSide}) → ${tileDefB.id}`); + console.log(`[ALIGN] EdgeA (${tileDefA.id}):`, edgeA); + console.log(`[ALIGN] EdgeB (${tileDefB.id}):`, edgeB); + + // Special handling for corridor connections + // Corridors are 2 tiles wide, rooms/L/T are typically 4 tiles wide + // We need to find where the corridor's walkable area aligns with the room's walkable area + + if (edgeA.length !== edgeB.length) { + // Different edge lengths - need to find alignment + const smallerEdge = edgeA.length < edgeB.length ? edgeA : edgeB; + const largerEdge = edgeA.length < edgeB.length ? edgeB : edgeA; + const isASmaller = edgeA.length < edgeB.length; + + console.log(`[ALIGN] Different sizes: ${edgeA.length} vs ${edgeB.length}`); + console.log(`[ALIGN] isASmaller: ${isASmaller}`); + + // Find walkable cells in smaller edge + const smallerWalkable = smallerEdge.filter(cell => cell > 0); + if (smallerWalkable.length === 0) { + console.warn('[ALIGN] No walkable cells in smaller edge'); + return { valid: false, offset: 0 }; + } + + const smallerWidth = smallerEdge.length; + const largerWidth = largerEdge.length; + + // FIRST: Try offset 0 (no displacement needed) + let validAtZero = true; + for (let i = 0; i < smallerWidth; i++) { + const smallCell = smallerEdge[i]; + const largeCell = largerEdge[i]; + + const isSmallWalkable = smallCell > 0; + const isLargeWalkable = largeCell > 0; + + console.log(`[ALIGN] Offset 0, index ${i}: small=${smallCell}(${isSmallWalkable}) vs large=${largeCell}(${isLargeWalkable})`); + + if (isSmallWalkable !== isLargeWalkable) { + validAtZero = false; + console.log(`[ALIGN] ❌ Offset 0 FAILED at index ${i}: walkability mismatch`); + break; + } + } + + if (validAtZero) { + console.log(`✓ [ALIGN] Valid alignment at offset 0 (no displacement needed)`); + return { valid: true, offset: 0 }; + } + + // If offset 0 doesn't work, try offset of 2 (corridor width) + // This aligns the corridor with the other walkable section of the L/T + const offset = 2; + if (offset <= largerWidth - smallerWidth) { + let valid = true; + for (let i = 0; i < smallerWidth; i++) { + const smallCell = smallerEdge[i]; + const largeCell = largerEdge[offset + i]; + + const isSmallWalkable = smallCell > 0; + const isLargeWalkable = largeCell > 0; + + if (isSmallWalkable !== isLargeWalkable) { + valid = false; + console.log(`[ALIGN] Offset ${offset} failed at index ${i}: ${smallCell} vs ${largeCell}`); + break; + } + } + + if (valid) { + // Calculate final offset + // If A (corridor) is smaller than B (L/T), we need to shift B by +offset + // If B is smaller than A, we need to shift B by -offset + const finalOffset = isASmaller ? offset : -offset; + console.log(`✓ [ALIGN] Valid alignment at offset ${offset}, final offset: ${finalOffset} (isASmaller: ${isASmaller})`); + return { valid: true, offset: finalOffset }; + } + } + + console.warn('[ALIGN] Could not find valid alignment for edges of different sizes'); + return { valid: false, offset: 0 }; + } + + // Same length - check direct alignment + for (let i = 0; i < edgeA.length; i++) { + const cellA = edgeA[i]; + const cellB = edgeB[i]; + + // Rule: Cannot connect 0 (not walkable) with >0 (walkable) + const isAWalkable = cellA > 0; + const isBWalkable = cellB > 0; + + if (isAWalkable !== isBWalkable) { + console.warn(`[ALIGN] Walkability mismatch at index ${i}: ${cellA} vs ${cellB}`); + return { valid: false, offset: 0 }; + } + } + + return { valid: true, offset: 0 }; +} + +// Get edge cells from a tile definition for a given side +function getEdgeCells(tileDef, side) { + const { walkability, width, height } = tileDef; + const cells = []; + + switch (side) { + case 'N': + // Top row + for (let x = 0; x < width; x++) { + cells.push(walkability[0][x]); + } + break; + case 'S': + // Bottom row + for (let x = 0; x < width; x++) { + cells.push(walkability[height - 1][x]); + } + break; + case 'E': + // Right column + for (let y = 0; y < height; y++) { + cells.push(walkability[y][width - 1]); + } + break; + case 'W': + // Left column + for (let y = 0; y < height; y++) { + cells.push(walkability[y][0]); + } + break; + } + + return cells; +} + +// Get opposite side +function getOppositeSide(side) { + const opposites = { 'N': 'S', 'S': 'N', 'E': 'W', 'W': 'E' }; + return opposites[side]; +} + +// Check if two tiles can connect based on type rules and walkability alignment +// Returns: { valid: boolean, offset: number } - offset for positioning the new tile +function canConnectTiles(roomA, tileDefB, exitSide) { + const tileDefA = roomA.tileDef; + + // Check type compatibility + const typeA = tileDefA.tileType; + const typeB = tileDefB.tileType; + + const validConnections = { + 'room': ['room', 'corridor'], + 'corridor': ['room', 'corridor', 'L', 'T'], + 'L': ['corridor'], + 'T': ['corridor'] + }; + + if (!validConnections[typeA] || !validConnections[typeA].includes(typeB)) { + console.warn(`Invalid connection: ${typeA} cannot connect to ${typeB}`); + return { valid: false, offset: 0 }; + } + + // CRITICAL: Check that tileB has an exit in the opposite direction + // If we exit through N, the new tile must have S in its exits + const requiredExit = getOppositeSide(exitSide); + if (!tileDefB.exits.includes(requiredExit)) { + console.warn(`Exit direction mismatch: ${tileDefB.id} doesn't have required exit '${requiredExit}' (exiting via '${exitSide}')`); + return { valid: false, offset: 0 }; + } + + // Check walkability alignment and get offset + const alignmentResult = validateWalkabilityAlignment(tileDefA, roomA.tile, tileDefB, null, exitSide); + if (!alignmentResult.valid) { + console.warn('Walkability alignment failed'); + return { valid: false, offset: 0 }; + } + + return alignmentResult; } // --- CREACIÓN DE MARCADORES --- @@ -562,7 +982,7 @@ function updatePathVisuals() { // --- MANEJO VISUAL DE SELECCIÓN --- function updateSelectionVisuals() { - // Buscar en todas las salas visitadas + // Unidades ROOMS.visitedRooms.forEach(roomId => { const room = ROOMS.rooms.find(r => r.id === roomId); if (!room) return; @@ -580,6 +1000,178 @@ function updateSelectionVisuals() { } }); }); + + // Puertas + Object.keys(SESSION.roomMeshes).forEach(roomId => { + const roomData = SESSION.roomMeshes[roomId]; + if (roomData.doors) { + roomData.doors.forEach(doorMesh => { + // Asumimos que guardamos el ID de la puerta en userData al crear el mesh + if (doorMesh.userData.id === SESSION.selectedDoorId) { + doorMesh.material.color.setHex(0xffff00); + doorMesh.material.opacity = 0.5; + doorMesh.material.transparent = true; + } else { + doorMesh.material.color.setHex(0xffffff); + // Restaurar opacidad original (si era transparente) o 1.0 + // Por simplicidad, puertas cerradas opacas, abiertas transparentes? + // No, el modal decide. Dejamos como estaba por defecto. + doorMesh.material.opacity = 1.0; + } + }); + } + }); +} + +// --- LOGICA MODAL PUERTAS --- +const modal = document.getElementById('door-modal'); +const btnYes = document.getElementById('btn-open-yes'); +const btnNo = document.getElementById('btn-open-no'); + +btnYes.addEventListener('click', confirmOpenDoor); +btnNo.addEventListener('click', closeDoorModal); + +function openDoorModal() { + modal.classList.remove('hidden'); +} + +function closeDoorModal() { + modal.classList.add('hidden'); + // Deseleccionar si cancela + if (SESSION.selectedDoorId) { + SESSION.selectedDoorId = null; + updateSelectionVisuals(); + } +} + +function confirmOpenDoor() { + if (!SESSION.selectedDoorId) return; + + // Buscar la puerta + let targetDoor = null; + let originRoom = null; + + for (const room of ROOMS.rooms) { + const found = room.doors.find(d => d.id === SESSION.selectedDoorId); + if (found) { + targetDoor = found; + originRoom = room; + break; + } + } + + if (targetDoor && originRoom) { + console.log("Abriendo puerta:", targetDoor.id); + const originalDoorId = targetDoor.id; // Guardar ID original para buscar el mesh luego + targetDoor.isOpen = true; + + // Revelar sala destino (o generarla si no existe) + if (!targetDoor.leadsTo) { + // FASE DE EXPLORACIÓN: Generar nueva sala + console.log("Explorando nueva zona..."); + turnManager.setPhase(PHASES.EXPLORATION); + const newRoom = exploreRoom(originRoom, targetDoor); + if (newRoom) { + targetDoor.leadsTo = newRoom.id; + targetDoor.id = `door_${originRoom.id}_to_${newRoom.id}`; // Update ID + + // Actualizar también la puerta inversa en la nueva sala + const oppDoor = newRoom.doors.find(d => d.leadsTo === originRoom.id); + if (oppDoor) { + oppDoor.isOpen = true; + } + } else { + console.log("No se pudo generar sala (bloqueado)"); + // Feedback visual de bloqueo + const toast = document.createElement('div'); + toast.style.position = 'absolute'; + toast.style.top = '50%'; + toast.style.left = '50%'; + toast.style.transform = 'translate(-50%, -50%)'; + toast.style.background = 'rgba(100, 0, 0, 0.8)'; + toast.style.color = 'white'; + toast.style.padding = '20px'; + toast.style.border = '2px solid red'; + toast.style.fontSize = '20px'; + toast.innerText = "¡CAMINO BLOQUEADO!"; + document.body.appendChild(toast); + setTimeout(() => toast.remove(), 2000); + + targetDoor.isOpen = false; // Mantener cerrada + targetDoor.isBlocked = true; // Marcar como bloqueada permanentemente + + // Resetear estado + SESSION.selectedDoorId = null; + updateSelectionVisuals(); + closeDoorModal(); + return; // Cancelar apertura + } + } + + const targetRoom = ROOMS.rooms.find(r => r.id === targetDoor.leadsTo); + + // Revelar sala destino + if (targetRoom && !ROOMS.visitedRooms.has(targetRoom.id)) { + ROOMS.visitedRooms.add(targetRoom.id); + renderRoom(targetRoom); + } + + // Actualizar visual del mesh (hacerla invisible o rotarla) + // Buscamos el mesh en roomMeshes usando el ID ORIGINAL (porque el del objeto puede haber cambiado) + if (SESSION.roomMeshes[originRoom.id]) { + const doorMesh = SESSION.roomMeshes[originRoom.id].doors.find(m => m.userData.id === originalDoorId); + if (doorMesh) { + doorMesh.visible = false; // "Abrir" visualmente desapareciendo + doorMesh.userData.id = targetDoor.id; // Sincronizar ID del mesh con el nuevo ID + } + } + + // Limipiar selección y cerrar modal + SESSION.selectedDoorId = null; + updateSelectionVisuals(); + closeDoorModal(); + drawMinimap(); + } +} + +function checkDoorInteraction(unit) { + if (!SESSION.selectedDoorId) return; + + // Buscar puerta seleccionada + let targetDoor = null; + let room = null; + for (const r of ROOMS.rooms) { + targetDoor = r.doors.find(d => d.id === SESSION.selectedDoorId); + if (targetDoor) { + room = r; + break; + } + } + + if (targetDoor && !targetDoor.isOpen) { + const doorPos = getDoorGridPosition(room, targetDoor); + + // Verificar adyacencia + if (isAdjacent({ x: unit.x, y: unit.y }, doorPos)) { + if (targetDoor.isBlocked) { + // Mostrar aviso de bloqueo + const toast = document.createElement('div'); + toast.style.position = 'absolute'; + toast.style.top = '50%'; + toast.style.left = '50%'; + toast.style.transform = 'translate(-50%, -50%)'; + toast.style.background = 'rgba(100, 0, 0, 0.8)'; + toast.style.color = 'white'; + toast.style.padding = '10px'; + toast.style.border = '1px solid red'; + toast.innerText = "¡Puerta bloqueada!"; + document.body.appendChild(toast); + setTimeout(() => toast.remove(), 1000); + } else { + openDoorModal(); + } + } + } } // --- ANIMACIÓN DE MOVIMIENTO --- @@ -612,7 +1204,7 @@ async function animateMovement() { const targetWorldPos = gridToWorld(targetGridPos.x, targetGridPos.y); const endPos = { x: targetWorldPos.x, z: targetWorldPos.z }; - const duration = 300; + const duration = 200; const startTime = Date.now(); const standeeHeight = ASSETS.standees[unit.type].height; @@ -627,7 +1219,8 @@ async function animateMovement() { unit.mesh.position.x = startPos.x + (endPos.x - startPos.x) * eased; unit.mesh.position.z = startPos.z + (endPos.z - startPos.z) * eased; - const hopHeight = 0.8; + // Salto visual más sutil + const hopHeight = 0.5; const hopProgress = Math.sin(progress * Math.PI); unit.mesh.position.y = (standeeHeight / 2) + (hopProgress * hopHeight); @@ -653,10 +1246,10 @@ async function animateMovement() { unit.x = step.x; unit.y = step.y; - // 1. Verificar si hemos pisado una puerta (Para renderizar lo siguiente antes de entrar) - checkDoorTransition(unit, unitRoom); + // YA NO USAMOS checkDoorTransition automática para revelar/teletransportar + // en su lugar usamos la lógica de puertas interactivas - // 2. AUTO-CORRECCIÓN: Verificar en qué sala estamos FÍSICAMENTE + // 2. AUTO-CORRECCIÓN: Seguir usándola por seguridad si entramos const actualRoom = detectRoomChange(unit, unitRoom); if (actualRoom) { unitRoom = actualRoom; @@ -666,6 +1259,9 @@ async function animateMovement() { updatePathVisuals(); } + // Al terminar movimiento, verificar interacción con puerta + checkDoorInteraction(unit); + // Centrar cámara en el personaje manteniendo el offset de la vista actual const newTarget = unit.mesh.position.clone(); newTarget.y = 0; @@ -675,7 +1271,7 @@ async function animateMovement() { controls.target.copy(newTarget); camera.position.copy(newTarget).add(currentOffset); - SESSION.selectedUnitId = null; + SESSION.selectedUnitId = null; // Deseleccionar unidad al terminar de mover updateSelectionVisuals(); SESSION.isAnimating = false; drawMinimap(); // Actualizar posición final del jugador @@ -741,10 +1337,17 @@ function checkDoorTransition(unit, currentRoom) { } } + function getDoorGridPosition(room, door) { const tile = room.tile; - const tileWidth = ASSETS.tiles[tile.type].width; - const tileHeight = ASSETS.tiles[tile.type].height; + const tileDef = room.tileDef; + if (!tileDef) { + console.error("Room", room.id, "has no tileDef in getDoorGridPosition!"); + return { x: tile.x, y: tile.y }; + } + + const tileWidth = tileDef.width; + const tileHeight = tileDef.height; switch (door.side) { case 'N': @@ -758,6 +1361,63 @@ function getDoorGridPosition(room, door) { } } +// Calcula la posición completa de la puerta en el mundo 3D +// Devuelve: { worldPos: {x, z}, meshPos: {x, y, z}, rotation: number, wallOffset: number } +function getDoorWorldPosition(room, door, centerX, centerZ, halfSizeX, halfSizeZ) { + const doorGridPos = getDoorGridPosition(room, door); + const doorWorldPos = gridToWorld(doorGridPos.x, doorGridPos.y); + + const doorHeight = 2.0; + let meshPos = { x: 0, y: doorHeight / 2, z: 0 }; + let rotation = 0; + let wallOffset = 0; + + switch (door.side) { + case 'N': + // Pared Norte: puerta alineada en X, Z en el borde norte + meshPos.x = doorWorldPos.x; + meshPos.z = centerZ - halfSizeZ; + rotation = 0; + // Offset relativo al centro de la pared (para el hueco) + wallOffset = doorWorldPos.x - centerX; + break; + case 'S': + // Pared Sur: puerta alineada en X, Z en el borde sur + meshPos.x = doorWorldPos.x; + meshPos.z = centerZ + halfSizeZ; + rotation = 0; + // Para pared Sur, el offset es directo (sin inversión) + wallOffset = doorWorldPos.x - centerX; + break; + case 'E': + // Pared Este: puerta alineada en Z, X en el borde este + meshPos.x = centerX + halfSizeX; + meshPos.z = doorWorldPos.z; + rotation = Math.PI / 2; + // Offset relativo al centro de la pared + // Con rotation=π/2, el eje X local apunta hacia -Z, entonces: + // offset_local = -(doorZ - centerZ) + wallOffset = -(doorWorldPos.z - centerZ); + break; + case 'W': + // Pared Oeste: puerta alineada en Z, X en el borde oeste + meshPos.x = centerX - halfSizeX; + meshPos.z = doorWorldPos.z; + rotation = Math.PI / 2; + // Con rotation=π/2, el eje X local apunta hacia -Z (igual que pared E) + // Por tanto, también necesita offset invertido + wallOffset = -(doorWorldPos.z - centerZ); + break; + } + + return { + worldPos: doorWorldPos, + meshPos: meshPos, + rotation: rotation, + wallOffset: wallOffset + }; +} + // --- CARGA Y RENDERIZADO --- const textureLoader = new THREE.TextureLoader(); @@ -790,21 +1450,22 @@ async function renderRoom(room) { entities: [] }; - // Renderizar tile - // Renderizar tile - const tileDef = ASSETS.tiles[room.tile.type]; - const baseTex = await loadTexture(tileDef.src); + // Renderizar tile usando la nueva definición + const tileDef = room.tileDef; + if (!tileDef) { + console.error("Room", room.id, "has no tileDef!"); + return; + } + + const baseTex = await loadTexture(tileDef.image); const tileTex = baseTex.clone(); // CLONAR para no afectar a otras salas tileTex.needsUpdate = true; // Asegurar que Three.js sepa que es nueva tileTex.wrapS = THREE.RepeatWrapping; tileTex.wrapT = THREE.RepeatWrapping; - // Lógica de repetición: La textura base es de 4x4 celdas. - // Si la sala es 8x4, repetimos 2 en X, 1 en Y. - const repeatX = tileDef.width / 4; - const repeatY = tileDef.height / 4; - tileTex.repeat.set(repeatX, repeatY); + // No repetir la textura - cada tile tiene su propia imagen completa + tileTex.repeat.set(1, 1); const worldWidth = tileDef.width * CONFIG.CELL_SIZE; const worldHeight = tileDef.height * CONFIG.CELL_SIZE; @@ -821,10 +1482,14 @@ async function renderRoom(room) { tileMesh.receiveShadow = true; const originPos = gridToWorld(room.tile.x, room.tile.y); + console.log(`[DEBUG] renderRoom ${room.id} | Tile:`, room.tile, `| WorldOrigin:`, originPos); + tileMesh.position.x = originPos.x + (worldWidth / 2) - (CONFIG.CELL_SIZE / 2); tileMesh.position.z = originPos.z + (worldHeight / 2) - (CONFIG.CELL_SIZE / 2); tileMesh.position.y = 0; + console.log(`[DEBUG] renderRoom ${room.id} | MeshPos:`, tileMesh.position); + scene.add(tileMesh); roomMeshes.tile = tileMesh; @@ -848,37 +1513,105 @@ async function renderRoom(room) { { side: 'W', width: worldHeight, offset: { x: -halfSizeX, z: 0 }, rotation: Math.PI / 2 } ]; + // Calcular posiciones de puertas para procesar paredes + // Mapa: Side -> Door (solo soportamos 1 puerta por pared por ahora para simplificar) + const doorsOnSides = {}; + room.doors.forEach(d => { doorsOnSides[d.side] = d; }); + for (const config of wallConfigs) { - if (room.walls.includes(config.side)) { - const opacity = getWallOpacity(config.side, SESSION.currentView); + const wallSide = config.side; + const door = doorsOnSides[wallSide]; - // Textura adaptada al ancho específico de esta pared - const materialTex = wallTex.clone(); - // Ajustar repetición horizontal según longitud de la pared (aprox 1 repetición cada 2 celdas grandes) - materialTex.repeat.set(config.width / (CONFIG.CELL_SIZE * 2), 2); + // Función helper para crear un segmento de pared + const createWallSegment = (w, h, xOffset, yOffset, opacity, name) => { + if (w <= 0.01) return; // Evitar segmentos degenerados - const wallMaterial = new THREE.MeshStandardMaterial({ - map: materialTex, + const segmentGeometry = new THREE.PlaneGeometry(w, h); + + // Ajustar textura al tamaño del segmento + const segmentTex = wallTex.clone(); + segmentTex.wrapS = THREE.RepeatWrapping; + segmentTex.wrapT = THREE.RepeatWrapping; + segmentTex.repeat.set(w / 2, h / (wallHeight / 2)); // Mantener densidad aprox + + const segmentMaterial = new THREE.MeshStandardMaterial({ + map: segmentTex, transparent: opacity < 1.0, opacity: opacity, side: THREE.DoubleSide }); - // Geometría específica para el ancho de ESTA pared - const wallGeometry = new THREE.PlaneGeometry(config.width, wallHeight); + const wall = new THREE.Mesh(segmentGeometry, segmentMaterial); + + // Calculamos posición RELATIVA al centro de la pared "ideal" + // La pared ideal está en config.offset + // Rotamos el offset local del segmento según la rotación de la pared + + const localX = xOffset; + const localZ = 0; // En el plano de la pared + + // Rotar vector (localX, 0) por config.rotation + // Plane geometry is created at origin. We rotate it around Y. + // A segment meant to be at "xOffset" along the plane's width needs to be translated. + + // Posición de la pared "Base" + const baseX = centerX + config.offset.x; + const baseZ = centerZ + config.offset.z; + + // Vector dirección de la pared (Hacia la derecha de la pared) + // PlaneGeometry +X is "Right" + const dirX = Math.cos(config.rotation); + const dirZ = -Math.sin(config.rotation); + + wall.position.x = baseX + (dirX * xOffset); + wall.position.z = baseZ + (dirZ * xOffset); + wall.position.y = yOffset; // Altura absoluta - const wall = new THREE.Mesh(wallGeometry, wallMaterial); - wall.position.set( - centerX + config.offset.x, - wallHeight / 2, - centerZ + config.offset.z - ); wall.rotation.y = config.rotation; wall.castShadow = true; wall.receiveShadow = true; - wall.userData.wallSide = config.side; // Metadata para identificar el lado + wall.userData.wallSide = config.side; scene.add(wall); roomMeshes.walls.push(wall); + }; + + const opacity = getWallOpacity(config.side, SESSION.currentView); // Se actualiza dinámicamente + + if (!door) { + // PARED SOLIDA (Caso original simplificado) + createWallSegment(config.width, wallHeight, 0, wallHeight / 2, opacity, "FullWall"); + } else { + // PARED CON HUECO + const doorWidth = 1.5; + const doorHeight = 2.0; + + // Usar función unificada para obtener la posición de la puerta + const doorInfo = getDoorWorldPosition(room, door, centerX, centerZ, halfSizeX, halfSizeZ); + const doorOffset = doorInfo.wallOffset; + + const w = config.width; + + // Segmento Izquierdo: Desde -w/2 hasta (doorOffset - doorWidth/2) + const leftEnd = doorOffset - (doorWidth / 2); + const leftStart = -w / 2; + const leftWidth = leftEnd - leftStart; + const leftCenter = leftStart + (leftWidth / 2); + + createWallSegment(leftWidth, wallHeight, leftCenter, wallHeight / 2, opacity, "LeftSeg"); + + // Segmento Derecho: Desde (doorOffset + doorWidth/2) hasta w/2 + const rightStart = doorOffset + (doorWidth / 2); + const rightEnd = w / 2; + const rightWidth = rightEnd - rightStart; + const rightCenter = rightStart + (rightWidth / 2); + + createWallSegment(rightWidth, wallHeight, rightCenter, wallHeight / 2, opacity, "RightSeg"); + + // Dintel (Arriba de la puerta) + const lintelHeight = wallHeight - doorHeight; + if (lintelHeight > 0) { + createWallSegment(doorWidth, lintelHeight, doorOffset, doorHeight + (lintelHeight / 2), opacity, "Lintel"); + } } } @@ -888,12 +1621,8 @@ async function renderRoom(room) { const doorHeight = 2.0; for (const door of room.doors) { - // Verificar que la sala destino existe - const targetRoom = ROOMS.rooms.find(r => r.id === door.leadsTo); - if (!targetRoom) { - console.warn(`Puerta en sala ${room.id} apunta a sala inexistente ${door.leadsTo}`); - continue; // Saltar esta puerta - } + // Renderizar puerta independientemente de si tiene destino conocido o no + // (Las puertas leadsTo: null son zonas inexploradas) const doorGeometry = new THREE.PlaneGeometry(doorWidth, doorHeight); const doorMaterial = new THREE.MeshStandardMaterial({ @@ -904,27 +1633,13 @@ async function renderRoom(room) { }); const doorMesh = new THREE.Mesh(doorGeometry, doorMaterial); - const doorGridPos = getDoorGridPosition(room, door); - const doorWorldPos = gridToWorld(doorGridPos.x, doorGridPos.y); + doorMesh.userData.id = door.id; + doorMesh.visible = !door.isOpen; // Ocultar si ya está abierta - switch (door.side) { - case 'N': - doorMesh.position.set(doorWorldPos.x, doorHeight / 2, centerZ - halfSizeZ + 0.05); - doorMesh.rotation.y = 0; - break; - case 'S': - doorMesh.position.set(doorWorldPos.x, doorHeight / 2, centerZ + halfSizeZ - 0.05); - doorMesh.rotation.y = 0; - break; - case 'E': - doorMesh.position.set(centerX + halfSizeX - 0.05, doorHeight / 2, doorWorldPos.z); - doorMesh.rotation.y = Math.PI / 2; - break; - case 'W': - doorMesh.position.set(centerX - halfSizeX + 0.05, doorHeight / 2, doorWorldPos.z); - doorMesh.rotation.y = Math.PI / 2; - break; - } + // Usar función unificada para posicionar la puerta + const doorInfo = getDoorWorldPosition(room, door, centerX, centerZ, halfSizeX, halfSizeZ); + doorMesh.position.set(doorInfo.meshPos.x, doorInfo.meshPos.y, doorInfo.meshPos.z); + doorMesh.rotation.y = doorInfo.rotation; scene.add(doorMesh); roomMeshes.doors.push(doorMesh); @@ -984,7 +1699,7 @@ function updateCompassUI() { document.querySelectorAll('.compass-btn').forEach(btn => { btn.classList.remove('active'); }); - const activeBtn = document.querySelector(`[data-direction="${SESSION.currentView}"]`); + const activeBtn = document.querySelector(`[data-dir="${SESSION.currentView}"]`); if (activeBtn) { activeBtn.classList.add('active'); } @@ -1008,7 +1723,8 @@ function drawMinimap() { let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity; ROOMS.rooms.forEach(room => { - const tileDef = ASSETS.tiles[room.tile.type]; + const tileDef = room.tileDef; + if (!tileDef) return; minX = Math.min(minX, room.tile.x); maxX = Math.max(maxX, room.tile.x + tileDef.width); minY = Math.min(minY, room.tile.y); @@ -1040,7 +1756,8 @@ function drawMinimap() { // 2. Dibujar TODAS las Salas ROOMS.rooms.forEach(room => { - const tileDef = ASSETS.tiles[room.tile.type]; + const tileDef = room.tileDef; + if (!tileDef) return; const pos = toCanvas(room.tile.x, room.tile.y); const w = tileDef.width * scale; @@ -1090,12 +1807,14 @@ function drawMinimap() { } } - // Event listeners para los botones del compás document.querySelectorAll('.compass-btn').forEach(btn => { btn.addEventListener('click', () => { - const direction = btn.getAttribute('data-direction'); - setCameraView(direction); + const direction = btn.getAttribute('data-dir'); + if (direction) { + setCameraView(direction); + updateCompassUI(); + } }); }); @@ -1133,6 +1852,7 @@ window.addEventListener('pointerdown', (event) => { if (entity) { console.log("Seleccionado:", entity.type); SESSION.selectedUnitId = entity.id; + SESSION.selectedDoorId = null; // Deseleccionar puerta SESSION.path = []; updatePathVisuals(); updateSelectionVisuals(); @@ -1140,6 +1860,41 @@ window.addEventListener('pointerdown', (event) => { } } + // Detectar click en puertas + const allDoors = []; + Object.values(SESSION.roomMeshes).forEach(roomData => { + if (roomData.doors) { + // Solo incluir puertas visibles (cerradas) en el raycast + allDoors.push(...roomData.doors.filter(door => door.visible)); + } + }); + + const intersectsDoors = raycaster.intersectObjects(allDoors); + if (intersectsDoors.length > 0) { + const clickedDoor = intersectsDoors[0].object; + if (clickedDoor.userData.id) { + console.log("Puerta seleccionada:", clickedDoor.userData.id); + SESSION.selectedDoorId = clickedDoor.userData.id; + SESSION.selectedUnitId = null; + SESSION.path = []; + updatePathVisuals(); + updateSelectionVisuals(); + + // Verificar interacción inmediata (si ya estamos al lado) + // Buscamos al héroe principal (asumimos que es el que controlamos) + let hero = null; + for (const r of ROOMS.rooms) { + hero = r.entities.find(e => e.type === 'hero_1'); + if (hero) break; + } + + if (hero) { + checkDoorInteraction(hero); + } + return; + } + } + // Procesar click en suelo if (SESSION.selectedUnitId) { const intersectsGround = raycaster.intersectObject(raycastPlane); diff --git a/src/main_old.js b/src/main_old.js deleted file mode 100644 index 553be67..0000000 --- a/src/main_old.js +++ /dev/null @@ -1,596 +0,0 @@ -import './style.css'; -import * as THREE from 'three'; -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; - -// --- CONFIGURACIÓN DE LA ESCENA --- -const CONFIG = { - CELL_SIZE: 2, // Unidades de Three.js por celda lógica - TILE_DIMENSIONS: 4, // Una tile es de 4x4 celdas -}; - -// --- ESTADO DEL JUEGO (DATA MODEL) --- -const ASSETS = { - tiles: { - 'tile_base': { src: '/assets/images/tiles/tile4x4.png', width: 4, height: 4 }, - 'tile_cyan': { src: '/assets/images/tiles/tile4x4_blue.png', width: 4, height: 4 }, - 'tile_orange': { src: '/assets/images/tiles/tile4x4_orange.png', width: 4, height: 4 }, - 'tile_8x2': { src: '/assets/images/tiles/tile4x4.png', width: 8, height: 2 }, - 'wall_1': { src: '/assets/images/tiles/pared1.png' }, - 'door_1': { src: '/assets/images/tiles/puerta1.png' }, - }, - standees: { - 'hero_1': { src: '/assets/images/standees/barbaro.png', height: 3 }, - 'hero_2': { src: '/assets/images/standees/esqueleto.png', height: 3 }, - } -}; - -// Sistema de salas -const ROOMS = { - rooms: [ - { - id: 1, - tile: { type: 'tile_base', x: 0, y: 0 }, - walls: ['N', 'S', 'E', 'W'], - doors: [ - { side: 'N', gridPos: { x: 1, y: -1 }, leadsTo: 2 } - ], - entities: [{ id: 101, type: 'hero_1', x: 1, y: 1 }] - }, - { - id: 2, - tile: { type: 'tile_cyan', x: 0, y: -4 }, - walls: ['N', 'S', 'E', 'W'], - doors: [ - { side: 'S', gridPos: { x: 1, y: -1 }, leadsTo: 1 } - ], - entities: [{ id: 102, type: 'hero_2', x: 1, y: -5 }] - }, - { - id: 3, - tile: { type: 'tile_orange', x: -4, y: 0 }, - walls: ['N', 'S', 'E', 'W'], - doors: [ - { side: 'E', gridPos: { x: -1, y: 1 }, leadsTo: 1 } - ], - entities: [] - } - ], - visitedRooms: [1], // Empezamos en la sala 1 - currentRoom: 1 -}; - -const GAME_STATE = { - placedTiles: [], - entities: [] -}; - -// State de la sesión (UI) -const SESSION = { - selectedUnitId: null, - path: [], // Array de {x, y} - pathMeshes: [], // Array de meshes visuales - roomMeshes: {}, // { roomId: { tile: mesh, walls: [], doors: [], entities: [] } } - isAnimating: false // Flag para bloquear interacciones durante animación -}; - -// --- CONFIGURACIÓN BÁSICA THREE.JS --- -const scene = new THREE.Scene(); -scene.background = new THREE.Color(0x202020); - -// Renderer -const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); -renderer.setSize(window.innerWidth, window.innerHeight); -renderer.shadowMap.enabled = true; -document.querySelector('#app').appendChild(renderer.domElement); - -// Cámara -const aspect = window.innerWidth / window.innerHeight; -const d = 15; -const camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, 1, 1000); -camera.position.set(20, 20, 20); -camera.lookAt(scene.position); - -// --- CONTROLES MODIFICADOS --- -// Roto con el ratón derecho, zoom con la rueda del ratón y si hago presión en la rueda, hago el paneo. -const controls = new OrbitControls(camera, renderer.domElement); -controls.enableDamping = true; -controls.dampingFactor = 0.05; -controls.screenSpacePanning = true; -controls.maxPolarAngle = Math.PI / 2; - -// Reasignación de botones -controls.mouseButtons = { - LEFT: null, // Dejamos el click izquierdo libre para nuestra lógica - MIDDLE: THREE.MOUSE.PAN, // Paneo con botón central/rueda - RIGHT: THREE.MOUSE.ROTATE // Rotación con derecho -}; -controls.zoomToCursor = true; // Zoom a donde apunta el ratón - -// Luces -const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); -scene.add(ambientLight); - -const dirLight = new THREE.DirectionalLight(0xffffff, 0.8); -dirLight.position.set(10, 20, 5); -dirLight.castShadow = true; -scene.add(dirLight); - -const gridHelper = new THREE.GridHelper(40, 40, 0x444444, 0x111111); -scene.add(gridHelper); - -// Plano invisible para Raycasting en Y=0 -const planeGeometry = new THREE.PlaneGeometry(200, 200); -const planeMaterial = new THREE.MeshBasicMaterial({ visible: false }); -const raycastPlane = new THREE.Mesh(planeGeometry, planeMaterial); -raycastPlane.rotation.x = -Math.PI / 2; -scene.add(raycastPlane); - - -// --- HELPERS LÓGICOS --- -function worldToGrid(x, z) { - return { - x: Math.floor(x / CONFIG.CELL_SIZE), - y: Math.floor(z / CONFIG.CELL_SIZE) - }; -} - -function gridToWorld(gridX, gridY) { - return { - x: (gridX * CONFIG.CELL_SIZE) + (CONFIG.CELL_SIZE / 2), - z: (gridY * CONFIG.CELL_SIZE) + (CONFIG.CELL_SIZE / 2) - }; -} - -function isAdjacent(p1, p2) { - const dx = Math.abs(p1.x - p2.x); - const dy = Math.abs(p1.y - p2.y); - // Adyacencia ortogonal (cruz) - return (dx === 1 && dy === 0) || (dx === 0 && dy === 1); -} - -// --- CREACIÓN DE MARCADORES (CANVAS TEXTURE) --- -function createPathMarker(stepNumber) { - const canvas = document.createElement('canvas'); - canvas.width = 128; - canvas.height = 128; - const ctx = canvas.getContext('2d'); - - // Fondo Amarillo Semi-transparente - ctx.fillStyle = 'rgba(255, 255, 0, 0.5)'; - ctx.fillRect(0, 0, 128, 128); - - // Borde - ctx.strokeStyle = 'rgba(255, 200, 0, 0.8)'; - ctx.lineWidth = 10; - ctx.strokeRect(0, 0, 128, 128); - - // Número - ctx.fillStyle = '#000000'; - ctx.font = 'bold 60px Arial'; - ctx.textAlign = 'center'; - ctx.textBaseline = 'middle'; - ctx.fillText(stepNumber.toString(), 64, 64); - - const texture = new THREE.CanvasTexture(canvas); - // Importante para pixel art o gráficos nítidos, aunque aquí es texto - texture.minFilter = THREE.LinearFilter; - - // Crear el mesh - const geometry = new THREE.PlaneGeometry(CONFIG.CELL_SIZE * 0.9, CONFIG.CELL_SIZE * 0.9); - const material = new THREE.MeshBasicMaterial({ - map: texture, - transparent: true, - side: THREE.DoubleSide // Visible desde ambos lados - }); - - const mesh = new THREE.Mesh(geometry, material); - mesh.rotation.x = -Math.PI / 2; - mesh.position.y = 0.05; // Ligeramente elevado sobre el suelo - return mesh; -} - -function updatePathVisuals() { - // 1. Limpiar anteriores - SESSION.pathMeshes.forEach(mesh => scene.remove(mesh)); - SESSION.pathMeshes = []; - - // 2. Crear nuevos - SESSION.path.forEach((pos, index) => { - const marker = createPathMarker(index + 1); - const worldPos = gridToWorld(pos.x, pos.y); - marker.position.x = worldPos.x; - marker.position.z = worldPos.z; - scene.add(marker); - SESSION.pathMeshes.push(marker); - }); -} - -// --- MANEJO VISUAL DE SELECCIÓN --- -function updateSelectionVisuals() { - GAME_STATE.entities.forEach(entity => { - if (!entity.mesh) return; - - if (entity.id === SESSION.selectedUnitId) { - // SELECCIONADO: Amarillo + Opacidad 50% - entity.mesh.material.color.setHex(0xffff00); - entity.mesh.material.opacity = 0.5; - entity.mesh.material.transparent = true; - } else { - // NO SELECCIONADO: Blanco (color original) + Opacidad 100% - entity.mesh.material.color.setHex(0xffffff); - entity.mesh.material.opacity = 1.0; - } - }); -} - -// --- ANIMACIÓN DE MOVIMIENTO --- -async function animateMovement() { - if (SESSION.path.length === 0 || !SESSION.selectedUnitId) return; - - SESSION.isAnimating = true; - - const unit = GAME_STATE.entities.find(e => e.id === SESSION.selectedUnitId); - if (!unit || !unit.mesh) { - SESSION.isAnimating = false; - return; - } - - // Copiar el path para ir consumiéndolo - const pathCopy = [...SESSION.path]; - - // Función helper para animar un solo paso - const animateStep = (targetGridPos) => { - return new Promise((resolve) => { - const startPos = { x: unit.mesh.position.x, z: unit.mesh.position.z }; - const targetWorldPos = gridToWorld(targetGridPos.x, targetGridPos.y); - const endPos = { x: targetWorldPos.x, z: targetWorldPos.z }; - - const duration = 300; // ms por paso - const startTime = Date.now(); - const standeeHeight = ASSETS.standees[unit.type].height; - - const hop = () => { - const elapsed = Date.now() - startTime; - const progress = Math.min(elapsed / duration, 1); - - // Easing suave (ease-in-out) - const eased = progress < 0.5 - ? 2 * progress * progress - : 1 - Math.pow(-2 * progress + 2, 2) / 2; - - // Interpolación lineal en X y Z - unit.mesh.position.x = startPos.x + (endPos.x - startPos.x) * eased; - unit.mesh.position.z = startPos.z + (endPos.z - startPos.z) * eased; - - // Saltito parabólico en Y - const hopHeight = 0.8; // Altura del salto - const hopProgress = Math.sin(progress * Math.PI); // 0 -> 1 -> 0 - unit.mesh.position.y = (standeeHeight / 2) + (hopProgress * hopHeight); - - if (progress < 1) { - requestAnimationFrame(hop); - } else { - // Asegurar posición final exacta - unit.mesh.position.x = endPos.x; - unit.mesh.position.z = endPos.z; - unit.mesh.position.y = standeeHeight / 2; - resolve(); - } - }; - - hop(); - }); - }; - - // Mover paso a paso - for (let i = 0; i < pathCopy.length; i++) { - const step = pathCopy[i]; - - // Animar el movimiento - await animateStep(step); - - // Actualizar posición lógica de la unidad - unit.x = step.x; - unit.y = step.y; - - // Borrar el marcador de esta celda (el primero del array) - SESSION.path.shift(); - updatePathVisuals(); - } - - // Centrar la cámara en la posición final (manteniendo el ángulo/zoom) - const endTarget = unit.mesh.position.clone(); - endTarget.y = 0; // Target siempre a nivel de suelo - const currentCameraOffset = camera.position.clone().sub(controls.target); - - controls.target.copy(endTarget); - camera.position.copy(endTarget).add(currentCameraOffset); - - // Al terminar, deseleccionar - SESSION.selectedUnitId = null; - updateSelectionVisuals(); - SESSION.isAnimating = false; -} - -// --- INTERACCIÓN --- -const raycaster = new THREE.Raycaster(); -const pointer = new THREE.Vector2(); - -window.addEventListener('pointerdown', (event) => { - // Bloquear interacciones durante animación - if (SESSION.isAnimating) return; - - // CLICK IZQUIERDO: Selección y Pathfinding - if (event.button === 0) { - - // Calcular coordenadas normalizadas (-1 a +1) - pointer.x = (event.clientX / window.innerWidth) * 2 - 1; - pointer.y = -(event.clientY / window.innerHeight) * 2 + 1; - - raycaster.setFromCamera(pointer, camera); - - // 1. Detectar Click en Entidades (Selección) - // Buscamos intersecciones con los meshes de las entidades - const entityMeshes = GAME_STATE.entities.map(e => e.mesh).filter(m => m); - const intersectsEntities = raycaster.intersectObjects(entityMeshes); - - if (intersectsEntities.length > 0) { - // Hemos clickado una entidad - const clickedMesh = intersectsEntities[0].object; - const entity = GAME_STATE.entities.find(e => e.mesh === clickedMesh); - if (entity) { - console.log("Seleccionado:", entity.type); - SESSION.selectedUnitId = entity.id; - SESSION.path = []; // Resetear camino - updatePathVisuals(); - updateSelectionVisuals(); // Actualizar color del standee - return; // Cortamos aquí para no procesar click de suelo a la vez - } - } - - // 2. Si hay unidad seleccionada, procesar Click en Suelo (Move) - if (SESSION.selectedUnitId) { - const intersectsGround = raycaster.intersectObject(raycastPlane); - - if (intersectsGround.length > 0) { - const point = intersectsGround[0].point; - const gridPos = worldToGrid(point.x, point.z); - - // LOGICA DEL PATHFINDING MANUAL - - // Punto de Origen: La última casilla del path, O la casilla de la unidad si empieza - let prevNode; - if (SESSION.path.length > 0) { - prevNode = SESSION.path[SESSION.path.length - 1]; - } else { - const unit = GAME_STATE.entities.find(e => e.id === SESSION.selectedUnitId); - prevNode = { x: unit.x, y: unit.y }; - } - - // A. Caso Deshacer (Click en la última) - if (SESSION.path.length > 0) { - const lastNode = SESSION.path[SESSION.path.length - 1]; - if (lastNode.x === gridPos.x && lastNode.y === gridPos.y) { - SESSION.path.pop(); // Borrar último - updatePathVisuals(); - return; - } - } - - // B. Caso Añadir (Tiene que ser adyacente al anterior) - if (isAdjacent(prevNode, gridPos)) { - // Comprobación opcional: Evitar bucles (no clickar en uno que ya está en el path) - const alreadyInPath = SESSION.path.some(p => p.x === gridPos.x && p.y === gridPos.y); - const isUnitPos = (gridPos.x === prevNode.x && gridPos.y === prevNode.y && SESSION.path.length === 0); - - if (!alreadyInPath && !isUnitPos) { - SESSION.path.push(gridPos); - updatePathVisuals(); - } - } - } - } - } - - // CLICK DERECHO: Ejecutar movimiento - if (event.button === 2) { - event.preventDefault(); // Evitar menú contextual - - if (SESSION.selectedUnitId && SESSION.path.length > 0) { - animateMovement(); - } - } -}); - -// Prevenir menú contextual del navegador -window.addEventListener('contextmenu', (event) => { - event.preventDefault(); -}); - - -// --- CARGA Y RENDERIZADO --- -const textureLoader = new THREE.TextureLoader(); - -function loadTexture(path) { - return new Promise((resolve) => { - textureLoader.load(path, (tex) => { - tex.colorSpace = THREE.SRGBColorSpace; - tex.magFilter = THREE.NearestFilter; - tex.minFilter = THREE.NearestFilter; - resolve(tex); - }); - }); -} - -async function initWorld() { - const tileTextures = {}; - const standeeTextures = {}; - - // Cargar Tiles - for (const [key, def] of Object.entries(ASSETS.tiles)) { - const tex = await loadTexture(def.src); - tex.wrapS = THREE.RepeatWrapping; - tex.wrapT = THREE.RepeatWrapping; - // Repetición dinámica basada en tamaño (supone 2 unidades por repetición de textura base) - tex.repeat.set(def.width / 2, def.height / 2); - tileTextures[key] = tex; - } - // Cargar Standees - for (const [key, def] of Object.entries(ASSETS.standees)) { - standeeTextures[key] = await loadTexture(def.src); - } - - // Instanciar Tiles (Suelo) - GAME_STATE.placedTiles.forEach(tileData => { - const def = ASSETS.tiles[tileData.type]; - const tex = tileTextures[tileData.type]; - const worldWidth = def.width * CONFIG.CELL_SIZE; - const worldHeight = def.height * CONFIG.CELL_SIZE; - - const geometry = new THREE.PlaneGeometry(worldWidth, worldHeight); - const material = new THREE.MeshStandardMaterial({ - map: tex, - transparent: true, - side: THREE.DoubleSide - }); - const mesh = new THREE.Mesh(geometry, material); - - mesh.rotation.x = -Math.PI / 2; - mesh.receiveShadow = true; - - const originPos = gridToWorld(tileData.x, tileData.y); - - // Ajuste de centro - mesh.position.x = originPos.x + (worldWidth / 2) - (CONFIG.CELL_SIZE / 2); - mesh.position.z = originPos.z + (worldHeight / 2) - (CONFIG.CELL_SIZE / 2); - mesh.position.y = 0; - - if (tileData.rotation) { - mesh.rotation.z = tileData.rotation; - } - - scene.add(mesh); - }); - - // Instanciar Entidades - GAME_STATE.entities.forEach(entity => { - const def = ASSETS.standees[entity.type]; - const tex = standeeTextures[entity.type]; - - const imgAspect = tex.image.width / tex.image.height; - const height = def.height; - const width = height * imgAspect; - - const geometry = new THREE.PlaneGeometry(width, height); - const material = new THREE.MeshStandardMaterial({ - map: tex, - transparent: true, - alphaTest: 0.5, - side: THREE.DoubleSide - }); - - const mesh = new THREE.Mesh(geometry, material); - mesh.castShadow = true; - - const pos = gridToWorld(entity.x, entity.y); - mesh.position.set(pos.x, height / 2, pos.z); - - scene.add(mesh); - entity.mesh = mesh; - }); - - // --- PAREDES DE PRUEBA (ALREDEDOR DE TILE 1) --- - // Tile 1 es 'tile_base' en 0,0. Tamaño 4x4 celdas -> 8x8 unidades world - const tile1 = GAME_STATE.placedTiles.find(t => t.id === 1); - if (tile1) { - const wallTex = await loadTexture(ASSETS.tiles['wall_1'].src); - wallTex.wrapS = THREE.RepeatWrapping; - wallTex.wrapT = THREE.RepeatWrapping; - wallTex.repeat.set(2, 2); // 2x2 repeticiones como solicitado - - const baseTileWorldSize = 4 * CONFIG.CELL_SIZE; // 8 unidades - const wallHeight = 2.5; // Altura de la pared - const halfSize = baseTileWorldSize / 2; - - // Calcular el centro exacto de la tile 1 tal como se hace al renderizarla - // Copiamos la lógica de renderizado de tiles: - const def = ASSETS.tiles[tile1.type]; - const worldWidth = def.width * CONFIG.CELL_SIZE; - const worldHeight = def.height * CONFIG.CELL_SIZE; - const originPos = gridToWorld(tile1.x, tile1.y); - - const centerX = originPos.x + (worldWidth / 2) - (CONFIG.CELL_SIZE / 2); - const centerZ = originPos.z + (worldHeight / 2) - (CONFIG.CELL_SIZE / 2); - - const wallGeometry = new THREE.PlaneGeometry(baseTileWorldSize, wallHeight); - const wallMaterial = new THREE.MeshStandardMaterial({ - map: wallTex, - transparent: true, - opacity: 1.0, - side: THREE.DoubleSide - }); - - const createWall = (offsetX, offsetZ, rotationY, opacity) => { - const wall = new THREE.Mesh(wallGeometry, wallMaterial.clone()); - wall.material.opacity = opacity; - wall.material.transparent = opacity < 1.0; // Solo transparente si opacity < 1 - // Posicionamos relativo al CENTRO de la tile - wall.position.set(centerX + offsetX, wallHeight / 2, centerZ + offsetZ); - wall.rotation.y = rotationY; - wall.castShadow = true; - wall.receiveShadow = true; - scene.add(wall); - SESSION.walls.push(wall); - }; - - // Norte (Arriba en pantalla, Z menor) -> 100% - createWall(0, -halfSize, 0, 1.0); - // Sur (Abajo en pantalla, Z mayor) -> 50% - createWall(0, halfSize, 0, 0.5); - // Este (Derecha en pantalla, X mayor) -> 50% - createWall(halfSize, 0, Math.PI / 2, 0.5); - // Oeste (Izquierda en pantalla, X menor) -> 100% - createWall(-halfSize, 0, Math.PI / 2, 1.0); - - // --- PUERTA EN PARED NORTE --- - const doorTex = await loadTexture(ASSETS.tiles['door_1'].src); - const doorWidth = 1.5; // Ancho de la puerta - const doorHeight = 2.0; // Alto de la puerta - - const doorGeometry = new THREE.PlaneGeometry(doorWidth, doorHeight); - const doorMaterial = new THREE.MeshStandardMaterial({ - map: doorTex, - transparent: true, - alphaTest: 0.1, - side: THREE.DoubleSide - }); - - const door = new THREE.Mesh(doorGeometry, doorMaterial); - // Posicionar en la celda (1, -1) - segunda celda de la pared norte - const doorGridPos = gridToWorld(1, -1); - door.position.set(doorGridPos.x, doorHeight / 2, centerZ - halfSize + 0.05); - door.rotation.y = 0; // Misma rotación que pared norte - scene.add(door); - } -} - -initWorld(); - -function animate() { - requestAnimationFrame(animate); - controls.update(); - - - renderer.render(scene, camera); -} -animate(); - -window.addEventListener('resize', () => { - const aspect = window.innerWidth / window.innerHeight; - camera.left = -d * aspect; - camera.right = d * aspect; - camera.top = d; - camera.bottom = -d; - camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); -}); diff --git a/src/schemas/CampaignSchema.js b/src/schemas/CampaignSchema.js new file mode 100644 index 0000000..07c1226 --- /dev/null +++ b/src/schemas/CampaignSchema.js @@ -0,0 +1,51 @@ +/** + * @typedef {Object} LootTableEntry + * @property {string} itemId - ID of the item + * @property {number} weight - Probability weight + * @property {number} [minLevel] - Minimum level required + */ + +/** + * @typedef {Object} CampaignMissionNode + * @property {string} id - Unique ID of the mission reference + * @property {string} missionId - ID of the mission template to use + * @property {string} title - Display title for this step + * @property {string[]} [next] - IDs of potential next missions (for branching) + * @property {Object} [requirements] - Requirements to unlock + */ + +/** + * @typedef {Object} Campaign + * @property {string} id - Unique Campaign ID + * @property {string} title - Display Title + * @property {string} description - Brief description + * @property {string} author - Author name + * @property {string} version - Version string (e.g. "1.0.0") + * @property {CampaignMissionNode[]} missions - Graph of missions + * @property {Object.