Feat: Hybrid Architecture Phase 1
- Implemented Game Server (game-server.js) with Socket.io - Added JSON Schemas for Campaigns and Missions - Updated Docker configurations for multi-service setup - Refactored main.js to allow local network connections - Removed legacy code (main_old.js) - Updated dependencies
This commit is contained in:
41
DEVLOG.md
41
DEVLOG.md
@@ -2,6 +2,47 @@
|
||||
|
||||
Este documento sirve para llevar un control diario del desarrollo, decisiones técnicas y nuevas funcionalidades implementadas en el proyecto.
|
||||
|
||||
## [2025-12-28] - Fase 1: Arquitectura Híbrida y Servidor
|
||||
|
||||
### Infraestructura
|
||||
- **Game Server (`game-server.js`):** Implementado servidor WebSocket (Socket.io) en puerto 3001 para gestionar la comunicación PC-Móvil.
|
||||
- **Docker:** Actualizado `docker-compose.yml` para ejecutar el servidor juego como servicio independiente.
|
||||
- **Networking:** Configuración dinámica de IP en el cliente para permitir conexión desde dispositivos en la red local.
|
||||
|
||||
### Datos
|
||||
- **Esquemas JSON:** Definidos contratos de datos iniciales en `src/schemas/`:
|
||||
- `CampaignSchema.js`: Estructura para campañas multijugador.
|
||||
- `MissionSchema.js`: Configuración para generación procedural y scripting.
|
||||
|
||||
## [2025-12-28] - Corrección Completa del Sistema de Puertas
|
||||
|
||||
### Funcionalidades Implementadas
|
||||
- **Refactorización de Posicionamiento de Puertas:**
|
||||
- Creada función unificada `getDoorWorldPosition()` que centraliza el cálculo de posiciones.
|
||||
- Eliminada duplicación de lógica entre generación de huecos en paredes y posicionamiento de meshes de puertas.
|
||||
- Reducción de ~45 líneas de código duplicado.
|
||||
|
||||
- **Corrección de Alineamiento E/W:**
|
||||
- Identificado problema: Las paredes Este y Oeste tienen `rotation = π/2`, lo que hace que su eje X local apunte hacia -Z.
|
||||
- Solución: Invertir el `wallOffset` para ambas paredes E/W: `wallOffset = -(doorWorldPos.z - centerZ)`.
|
||||
- **Resultado:** Puertas y huecos perfectamente alineados en todas las direcciones (N, S, E, W).
|
||||
|
||||
- **Corrección de Interacción con Puertas Abiertas:**
|
||||
- Problema detectado: Las puertas abiertas (invisibles) seguían bloqueando clics del ratón.
|
||||
- Solución: Filtrar puertas invisibles del raycast: `allDoors.push(...roomData.doors.filter(door => door.visible))`.
|
||||
- **Resultado:** Los jugadores ahora pueden hacer clic "a través" de puertas abiertas para seleccionar baldosas.
|
||||
|
||||
### Cambios Técnicos
|
||||
- Nueva función `getDoorWorldPosition(room, door, centerX, centerZ, halfSizeX, halfSizeZ)`:
|
||||
- Devuelve: `{ worldPos, meshPos, rotation, wallOffset }`
|
||||
- Garantiza coherencia entre geometría de huecos y meshes visuales.
|
||||
- Modificado raycast de puertas para excluir meshes invisibles (línea 1388).
|
||||
- Commits: `8025d66`, `5852a97`, `57f6312`.
|
||||
|
||||
### Lecciones Aprendidas
|
||||
- **Geometría Rotada:** Cuando un `PlaneGeometry` se rota (e.g., π/2), su sistema de coordenadas local cambia. Es crucial calcular offsets considerando la dirección del eje X local tras la rotación.
|
||||
- **Raycast e Invisibilidad:** `mesh.visible = false` solo oculta visualmente un objeto, pero Three.js sigue detectándolo en raycasts. Siempre filtrar objetos invisibles antes de `intersectObjects()`.
|
||||
|
||||
## [2025-12-23] - Interacción con Puertas y Navegación
|
||||
|
||||
### Funcionalidades Implementadas
|
||||
|
||||
@@ -8,3 +8,13 @@ services:
|
||||
- /app/node_modules
|
||||
environment:
|
||||
- CHOKIDAR_USEPOLLING=true
|
||||
command: npm run dev
|
||||
|
||||
server:
|
||||
build: .
|
||||
ports:
|
||||
- "3001:3001"
|
||||
volumes:
|
||||
- .:/app
|
||||
- /app/node_modules
|
||||
command: node game-server.js
|
||||
|
||||
81
game-server.js
Normal file
81
game-server.js
Normal file
@@ -0,0 +1,81 @@
|
||||
import express from 'express';
|
||||
import { createServer } from 'http';
|
||||
import { Server } from 'socket.io';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { dirname, join } from 'path';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
const app = express();
|
||||
const httpServer = createServer(app);
|
||||
const io = new Server(httpServer, {
|
||||
cors: {
|
||||
origin: "*", // Allow connections from any mobile device on local network
|
||||
methods: ["GET", "POST"]
|
||||
}
|
||||
});
|
||||
|
||||
// Serve static files from 'dist' (production) or 'public' (dev partial)
|
||||
// In a real setup, Vite handles dev serving, but this server handles the sockets.
|
||||
app.use(express.static(join(__dirname, 'dist')));
|
||||
|
||||
// Game State Storage (In-Memory for now)
|
||||
const LOBBIES = {
|
||||
// "lobbyCode": { hostSocket: id, players: [{id, name, charId}] }
|
||||
};
|
||||
|
||||
io.on('connection', (socket) => {
|
||||
console.log('Client connected:', socket.id);
|
||||
|
||||
// --- HOST EVENTS (PC) ---
|
||||
socket.on('HOST_GAME', () => {
|
||||
const lobbyCode = generateLobbyCode();
|
||||
LOBBIES[lobbyCode] = {
|
||||
hostSocket: socket.id,
|
||||
players: []
|
||||
};
|
||||
socket.join(lobbyCode);
|
||||
socket.emit('LOBBY_CREATED', { code: lobbyCode });
|
||||
console.log(`Lobby ${lobbyCode} created by ${socket.id}`);
|
||||
});
|
||||
|
||||
// --- PLAYER EVENTS (MOBILE) ---
|
||||
socket.on('JOIN_GAME', ({ code, name }) => {
|
||||
const lobby = LOBBIES[code.toUpperCase()];
|
||||
if (lobby) {
|
||||
lobby.players.push({ id: socket.id, name, charId: null });
|
||||
socket.join(code.toUpperCase());
|
||||
|
||||
// Notify Host
|
||||
io.to(lobby.hostSocket).emit('PLAYER_JOINED', { id: socket.id, name });
|
||||
// Confirm to Player
|
||||
socket.emit('JOIN_SUCCESS', { code: code.toUpperCase() });
|
||||
console.log(`Player ${name} joined lobby ${code}`);
|
||||
} else {
|
||||
socket.emit('ERROR', { message: "Lobby not found" });
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('PLAYER_ACTION', ({ code, action, data }) => {
|
||||
const lobby = LOBBIES[code];
|
||||
if (lobby) {
|
||||
// Forward directly to Host
|
||||
io.to(lobby.hostSocket).emit('PLAYER_ACTION', { playerId: socket.id, action, data });
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
console.log('Client disconnected:', socket.id);
|
||||
// Handle cleanup (remove player from lobby, notify host)
|
||||
});
|
||||
});
|
||||
|
||||
function generateLobbyCode() {
|
||||
return Math.random().toString(36).substring(2, 6).toUpperCase();
|
||||
}
|
||||
|
||||
const PORT = 3001;
|
||||
httpServer.listen(PORT, () => {
|
||||
console.log(`Game Server running on http://localhost:${PORT}`);
|
||||
});
|
||||
2039
package-lock.json
generated
Normal file
2039
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -12,6 +12,9 @@
|
||||
"vite": "^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^5.2.1",
|
||||
"socket.io": "^4.8.3",
|
||||
"socket.io-client": "^4.8.3",
|
||||
"three": "^0.160.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
44
src/main.js
44
src/main.js
@@ -1,6 +1,50 @@
|
||||
import './style.css';
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
||||
import { io } from "socket.io-client";
|
||||
|
||||
// --- NETWORK SETUP ---
|
||||
// Dynamic connection to support playing from mobile on the same network
|
||||
const socketUrl = `http://${window.location.hostname}:3001`;
|
||||
const socket = io(socketUrl);
|
||||
let lobbyCode = null;
|
||||
|
||||
socket.on("connect", () => {
|
||||
console.log("Connected to Game Server!", socket.id);
|
||||
socket.emit("HOST_GAME");
|
||||
});
|
||||
|
||||
socket.on("LOBBY_CREATED", ({ code }) => {
|
||||
console.log("GAME HOSTED. LOBBY CODE:", code);
|
||||
lobbyCode = code;
|
||||
// Temporary UI for Lobby Code
|
||||
const codeDisplay = document.createElement('div');
|
||||
codeDisplay.style.position = 'absolute';
|
||||
codeDisplay.style.top = '10px';
|
||||
codeDisplay.style.right = '10px';
|
||||
codeDisplay.style.color = 'gold';
|
||||
codeDisplay.style.fontFamily = 'monospace';
|
||||
codeDisplay.style.fontSize = '24px';
|
||||
codeDisplay.style.fontWeight = 'bold';
|
||||
codeDisplay.style.background = 'rgba(0,0,0,0.5)';
|
||||
codeDisplay.style.padding = '10px';
|
||||
codeDisplay.innerText = `LOBBY: ${code}`;
|
||||
document.body.appendChild(codeDisplay);
|
||||
});
|
||||
|
||||
socket.on("PLAYER_JOINED", ({ name }) => {
|
||||
console.log(`Player ${name} has joined!`);
|
||||
// TODO: Show notification
|
||||
});
|
||||
|
||||
socket.on("PLAYER_ACTION", ({ playerId, action, data }) => {
|
||||
console.log(`Action received from ${playerId}: ${action}`, data);
|
||||
// Placeholder interaction
|
||||
if (action === 'MOVE') {
|
||||
// Example: data = { x: 1, y: 0 }
|
||||
// Implement logic here
|
||||
}
|
||||
});
|
||||
|
||||
// --- CONFIGURACIÓN DE LA ESCENA ---
|
||||
const CONFIG = {
|
||||
|
||||
596
src/main_old.js
596
src/main_old.js
@@ -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);
|
||||
});
|
||||
51
src/schemas/CampaignSchema.js
Normal file
51
src/schemas/CampaignSchema.js
Normal file
@@ -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.<string, LootTableEntry[]>} lootTables - Global loot tables
|
||||
*/
|
||||
|
||||
export const CampaignSchema = {
|
||||
type: "object",
|
||||
required: ["id", "title", "missions"],
|
||||
properties: {
|
||||
id: { type: "string" },
|
||||
title: { type: "string" },
|
||||
description: { type: "string" },
|
||||
author: { type: "string" },
|
||||
version: { type: "string" },
|
||||
missions: {
|
||||
type: "array",
|
||||
items: {
|
||||
type: "object",
|
||||
required: ["id", "missionId"],
|
||||
properties: {
|
||||
id: { type: "string" },
|
||||
missionId: { type: "string" },
|
||||
title: { type: "string" },
|
||||
next: { type: "array", items: { type: "string" } }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
39
src/schemas/MissionSchema.js
Normal file
39
src/schemas/MissionSchema.js
Normal file
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* @typedef {Object} Mission
|
||||
* @property {string} id - Unique Mission ID
|
||||
* @property {string} type - "scripted" | "procedural"
|
||||
* @property {string} biome - Tile set to use (e.g., "dungeon", "crypt")
|
||||
* @property {Object} [genParams] - Parameters for procedural generation
|
||||
* @property {number} [genParams.size] - Approximate number of rooms
|
||||
* @property {number} [genParams.difficulty] - 1-10 scale
|
||||
* @property {string[]} [genParams.forcedTiles] - Specific tiles that must appear
|
||||
* @property {Object[]} [scriptedEvents] - Narrative triggers
|
||||
*/
|
||||
|
||||
export const MissionSchema = {
|
||||
type: "object",
|
||||
required: ["id", "type", "biome"],
|
||||
properties: {
|
||||
id: { type: "string" },
|
||||
type: { type: "string", enum: ["scripted", "procedural"] },
|
||||
biome: { type: "string" },
|
||||
genParams: {
|
||||
type: "object",
|
||||
properties: {
|
||||
size: { type: "number", minimum: 5 },
|
||||
difficulty: { type: "number", minimum: 1, maximum: 10 }
|
||||
}
|
||||
},
|
||||
scriptedEvents: {
|
||||
type: "array",
|
||||
items: {
|
||||
type: "object",
|
||||
properties: {
|
||||
trigger: { type: "string" },
|
||||
action: { type: "string" },
|
||||
data: { type: "object" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,124 +0,0 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
color-scheme: light dark;
|
||||
background-color: #242424;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
/* Evitar scrollbars por el canvas */
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* HUD Wrapper */
|
||||
#hud {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
/* Dejar pasar clics al juego 3D */
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* UI Elements inside HUD (reactivate pointer events) */
|
||||
#hud>* {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Minimap */
|
||||
#minimap-container {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 2px solid #444;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#minimap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Compass UI */
|
||||
#compass {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.compass-btn {
|
||||
background: rgba(50, 50, 50, 0.8);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.compass-btn:hover {
|
||||
background: rgba(70, 70, 70, 0.9);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.compass-btn.active {
|
||||
background: rgba(255, 200, 0, 0.9);
|
||||
border-color: rgba(255, 220, 0, 1);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
box-shadow: 0 0 15px rgba(255, 200, 0, 0.6);
|
||||
}
|
||||
|
||||
#compass-n {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#compass-s {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
#compass-e {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#compass-w {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
Reference in New Issue
Block a user