Guardando estado actual

2025-12-20 22:57:59 +01:00
commit 8da82f4150
30 changed files with 576 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,4 @@
 node_modules/
 dist/
 .DS_Store
 .env
--- a/18
+++ b/18
@@ -0,0 +1,18 @@
 FROM node:20-alpine
 WORKDIR /app
 # Copiamos primero los ficheros de dependencias para aprovechar la caché de Docker
 COPY package.json ./
 # Instalamos dependencias
 RUN npm install
 # Copiamos el resto del código
 COPY . .
 # Exponemos el puerto de Vite
 EXPOSE 5173
 # Arrancamos en modo desarrollo
 CMD ["npm", "run", "dev"]
--- a/assets/images/inspiracio/Gemini_Generated_Image_90xtc790xtc790xt.png
+++ b/assets/images/inspiracio/Gemini_Generated_Image_90xtc790xtc790xt.png
--- a/assets/images/inspiracio/Gemini_Generated_Image_9do1f79do1f79do1.png
+++ b/assets/images/inspiracio/Gemini_Generated_Image_9do1f79do1f79do1.png
--- a/assets/images/inspiracio/Gemini_Generated_Image_d6xjgxd6xjgxd6xj.png
+++ b/assets/images/inspiracio/Gemini_Generated_Image_d6xjgxd6xjgxd6xj.png
--- a/assets/images/inspiracio/Gemini_Generated_Image_euqduceuqduceuqd.png
+++ b/assets/images/inspiracio/Gemini_Generated_Image_euqduceuqduceuqd.png
--- a/assets/images/inspiracio/Gemini_Generated_Image_htupqthtupqthtup.png
+++ b/assets/images/inspiracio/Gemini_Generated_Image_htupqthtupqthtup.png
--- a/assets/images/inspiracio/Gemini_Generated_Image_l01f3bl01f3bl01f.png
+++ b/assets/images/inspiracio/Gemini_Generated_Image_l01f3bl01f3bl01f.png
--- a/assets/images/inspiracio/Gemini_Generated_Image_nug34unug34unug3.png
+++ b/assets/images/inspiracio/Gemini_Generated_Image_nug34unug34unug3.png
--- a/assets/images/inspiracio/Gemini_Generated_Image_pfryrvpfryrvpfry.png
+++ b/assets/images/inspiracio/Gemini_Generated_Image_pfryrvpfryrvpfry.png
--- a/assets/images/inspiracio/Gemini_Generated_Image_pghwj0pghwj0pghw.png
+++ b/assets/images/inspiracio/Gemini_Generated_Image_pghwj0pghwj0pghw.png
--- a/assets/images/inspiracio/Gemini_Generated_Image_tsvxsxtsvxsxtsvx.png
+++ b/assets/images/inspiracio/Gemini_Generated_Image_tsvxsxtsvxsxtsvx.png
--- a/assets/images/inspiracio/Gemini_Generated_Image_uyw83buyw83buyw8.png
+++ b/assets/images/inspiracio/Gemini_Generated_Image_uyw83buyw83buyw8.png
--- a/assets/images/inspiracio/entrada.jpg
+++ b/assets/images/inspiracio/entrada.jpg
--- a/assets/images/inspiracio/esquelet.jpg
+++ b/assets/images/inspiracio/esquelet.jpg
--- a/assets/images/inspiracio/monstre1.jpg
+++ b/assets/images/inspiracio/monstre1.jpg
--- a/assets/images/standees/barbaro.png
+++ b/assets/images/standees/barbaro.png
--- a/assets/images/standees/esqueleto.png
+++ b/assets/images/standees/esqueleto.png
--- a/assets/images/standees/standee1.png
+++ b/assets/images/standees/standee1.png
--- a/assets/images/standees/standee2.png
+++ b/assets/images/standees/standee2.png
--- a/assets/images/tiles/tile4x4.png
+++ b/assets/images/tiles/tile4x4.png
--- a/assets/images/tiles/tile4x4_blue.png
+++ b/assets/images/tiles/tile4x4_blue.png
--- a/assets/images/tiles/tile4x4_orange.png
+++ b/assets/images/tiles/tile4x4_orange.png
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,10 @@
 services:
  app:
    build: .
    ports:
      - "5173:5173"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
 <!DOCTYPE html>
 <html lang="es">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Masmorres Isometric View</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/manifest.md
+++ b/manifest.md
--- a/package.json
+++ b/package.json
@@ -0,0 +1,17 @@
 {
    "name": "masmorres-isometric",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "preview": "vite preview"
    },
    "devDependencies": {
        "vite": "^5.0.0"
    },
    "dependencies": {
        "three": "^0.160.0"
    }
 }
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,475 @@
 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 },
    },
    standees: {
        'hero_1': { src: '/assets/images/standees/barbaro.png', height: 3 },
        'hero_2': { src: '/assets/images/standees/esqueleto.png', height: 3 },
    }
 };
 const GAME_STATE = {
    placedTiles: [
        { id: 1, type: 'tile_base', x: 0, y: 0 },
        { id: 2, type: 'tile_cyan', x: 0, y: -4 },
        { id: 3, type: 'tile_orange', x: -4, y: 0 }       // Oeste de la primera
    ],
    entities: [
        { id: 101, type: 'hero_1', x: 1, y: 1 },
        { id: 102, type: 'hero_2', x: 2, y: -2 }
    ]
 };
 // State de la sesión (UI)
 const SESSION = {
    selectedUnitId: null,
    path: [], // Array de {x, y}
    pathMeshes: [], // Array de meshes visuales
    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();
    }
    // 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)) {
        tileTextures[key] = await loadTexture(def.src);
    }
    // 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;
        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;
    });
 }
 initWorld();
 function animate() {
    requestAnimationFrame(animate);
    controls.update();
    // Billboard opcional para los marcadores de texto? 
    // No, los queremos pegados al suelo según la spec.
    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);
 });
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,25 @@
 :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;
 }
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,14 @@
 import { defineConfig } from 'vite';
 export default defineConfig({
    server: {
        // Permite que el servidor escuche en todas las interfaces de red (necesario para Docker)
        host: true,
        // Lista blanca de dominios permitidos
        allowedHosts: [
            'masmorres.martivich.es',
            'localhost',
            '127.0.0.1'
        ]
    }
 });