versión inicial del juego

src/view/UIManager.js

@@ -0,0 +1,148 @@
+import { DIRECTIONS } from '../engine/dungeon/Constants.js';
+
+export class UIManager {
+    constructor(cameraManager, dungeonGenerator) {
+        this.cameraManager = cameraManager;
+        this.dungeon = dungeonGenerator;
+
+        this.createHUD();
+        this.setupMinimapLoop();
+    }
+
+    createHUD() {
+        // Container
+        this.container = document.createElement('div');
+        this.container.style.position = 'absolute';
+        this.container.style.top = '0';
+        this.container.style.left = '0';
+        this.container.style.width = '100%';
+        this.container.style.height = '100%';
+        this.container.style.pointerEvents = 'none'; // Click through to 3D scene
+        document.body.appendChild(this.container);
+
+        // --- Minimap (Top Left) ---
+        this.minimapCanvas = document.createElement('canvas');
+        this.minimapCanvas.width = 200;
+        this.minimapCanvas.height = 200;
+        this.minimapCanvas.style.position = 'absolute';
+        this.minimapCanvas.style.top = '10px';
+        this.minimapCanvas.style.left = '10px';
+        this.minimapCanvas.style.border = '2px solid #444';
+        this.minimapCanvas.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+        this.minimapCanvas.style.pointerEvents = 'auto'; // Allow interaction if needed
+        this.container.appendChild(this.minimapCanvas);
+
+        this.ctx = this.minimapCanvas.getContext('2d');
+
+        // --- Camera Controls (Top Right) ---
+        const controlsContainer = document.createElement('div');
+        controlsContainer.style.position = 'absolute';
+        controlsContainer.style.top = '20px';
+        controlsContainer.style.right = '20px';
+        controlsContainer.style.display = 'grid';
+        controlsContainer.style.gridTemplateColumns = '40px 40px 40px';
+        controlsContainer.style.gap = '5px';
+        controlsContainer.style.pointerEvents = 'auto';
+        this.container.appendChild(controlsContainer);
+
+        const createBtn = (label, dir) => {
+            const btn = document.createElement('button');
+            btn.textContent = label;
+            btn.style.width = '40px';
+            btn.style.height = '40px';
+            btn.style.backgroundColor = '#333';
+            btn.style.color = '#fff';
+            btn.style.border = '1px solid #666';
+            btn.style.cursor = 'pointer';
+            btn.onclick = () => this.cameraManager.setIsoView(dir);
+            return btn;
+        };
+
+        // Layout:   [N]
+        //        [W]   [E]
+        //           [S]
+
+        // Grid cells: 1 2 3
+        const btnN = createBtn('N', DIRECTIONS.NORTH); btnN.style.gridColumn = '2';
+        const btnW = createBtn('W', DIRECTIONS.WEST); btnW.style.gridColumn = '1';
+        const btnE = createBtn('E', DIRECTIONS.EAST); btnE.style.gridColumn = '3';
+        const btnS = createBtn('S', DIRECTIONS.SOUTH); btnS.style.gridColumn = '2';
+
+        controlsContainer.appendChild(btnN);
+        controlsContainer.appendChild(btnW);
+        controlsContainer.appendChild(btnE);
+        controlsContainer.appendChild(btnS);
+    }
+
+    setupMinimapLoop() {
+        const loop = () => {
+            this.drawMinimap();
+            requestAnimationFrame(loop);
+        };
+        loop();
+    }
+
+    drawMinimap() {
+        const ctx = this.ctx;
+        const w = this.minimapCanvas.width;
+        const h = this.minimapCanvas.height;
+
+        ctx.clearRect(0, 0, w, h);
+
+        // Center the view on 0,0 or the average?
+        // Let's rely on fixed scale for now
+        const cellSize = 5;
+        const centerX = w / 2;
+        const centerY = h / 2;
+
+        // Draw placed tiles
+        // We can access this.dungeon.grid.occupiedCells for raw occupied spots
+        // Or this.dungeon.placedTiles for structural info (type, color)
+
+        ctx.fillStyle = '#666'; // Generic floor
+
+        // Iterate over grid occupied cells
+        // But grid is a Map, iterating keys is slow.
+        // Better to iterate placedTiles which is an Array
+
+
+
+        // Simpler approach: Iterate the Grid Map directly
+        // It's a Map<"x,y", tileId>
+        // Use an iterator
+        for (const [key, tileId] of this.dungeon.grid.occupiedCells) {
+            const [x, y] = key.split(',').map(Number);
+
+            // Coordinate transformation to Canvas
+            // Dungeon (0,0) -> Canvas (CenterX, CenterY)
+            // Y in dungeon is Up/North. Y in Canvas is Down.
+            // So CanvasY = CenterY - (DungeonY * size)
+
+            const cx = centerX + (x * cellSize);
+            const cy = centerY - (y * cellSize);
+
+            // Color based on TileId type?
+            if (tileId.includes('room')) ctx.fillStyle = '#55a';
+            else ctx.fillStyle = '#aaa';
+
+            ctx.fillRect(cx, cy, cellSize, cellSize);
+        }
+
+        // Draw Exits (Pending)
+        ctx.fillStyle = '#0f0'; // Green dots for open exits
+        this.dungeon.pendingExits.forEach(exit => {
+            const ex = centerX + (exit.x * cellSize);
+            const ey = centerY - (exit.y * cellSize);
+            ctx.fillRect(ex, ey, cellSize, cellSize);
+        });
+
+        // Draw Entry (0,0) cross
+        ctx.strokeStyle = '#f00';
+        ctx.beginPath();
+        ctx.moveTo(centerX - 5, centerY);
+        ctx.lineTo(centerX + 5, centerY);
+        ctx.moveTo(centerX, centerY - 5);
+        ctx.lineTo(centerX, centerY + 5);
+        ctx.stroke();
+    }
+}