versión inicial del juego
This commit is contained in:
13
src/engine/dungeon/Constants.js
Normal file
13
src/engine/dungeon/Constants.js
Normal file
@@ -0,0 +1,13 @@
|
||||
export const DIRECTIONS = {
|
||||
NORTH: 'N',
|
||||
SOUTH: 'S',
|
||||
EAST: 'E',
|
||||
WEST: 'W'
|
||||
};
|
||||
|
||||
export const TILE_TYPES = {
|
||||
ROOM: 'room',
|
||||
CORRIDOR: 'corridor',
|
||||
JUNCTION: 'junction',
|
||||
OBJECTIVE_ROOM: 'objective_room'
|
||||
};
|
||||
109
src/engine/dungeon/DungeonDeck.js
Normal file
109
src/engine/dungeon/DungeonDeck.js
Normal file
@@ -0,0 +1,109 @@
|
||||
import { TILES } from './TileDefinitions.js';
|
||||
|
||||
export class DungeonDeck {
|
||||
|
||||
|
||||
constructor() {
|
||||
this.cards = [];
|
||||
this.discards = [];
|
||||
// We don't initialize automatically anymore
|
||||
}
|
||||
|
||||
/**
|
||||
* Constructs the deck according to the specific Warhammer Quest rules.
|
||||
* Rulebook steps:
|
||||
* 1. Take 6 random Dungeon Cards (Bottom pool).
|
||||
* 2. Add Objective Room card to Bottom pool.
|
||||
* 3. Shuffle Bottom pool (7 cards).
|
||||
* 4. Take 6 random Dungeon Cards (Top pool).
|
||||
* 5. Stack Top pool on Bottom pool.
|
||||
* Total: 13 cards.
|
||||
*
|
||||
* @param {string} objectiveTileId - ID of the objective/exit room.
|
||||
*/
|
||||
generateMissionDeck(objectiveTileId) {
|
||||
this.cards = [];
|
||||
|
||||
// 1. Create a "Pool" of standard dungeon tiles (Rooms & Corridors)
|
||||
// We replicate the physical deck distribution first
|
||||
let pool = [];
|
||||
const composition = [
|
||||
{ id: 'room_dungeon', count: 6 },
|
||||
// Objective room is special, handled separately
|
||||
{ id: 'corridor_straight', count: 7 },
|
||||
{ id: 'corridor_steps', count: 1 },
|
||||
{ id: 'corridor_corner', count: 1 },
|
||||
{ id: 'junction_t', count: 3 }
|
||||
];
|
||||
|
||||
composition.forEach(item => {
|
||||
const tileDef = TILES.find(t => t.id === item.id);
|
||||
if (tileDef) {
|
||||
for (let i = 0; i < item.count; i++) {
|
||||
pool.push(tileDef);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Helper to pull random cards
|
||||
const drawRandom = (source, count) => {
|
||||
const drawn = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
if (source.length === 0) break;
|
||||
const idx = Math.floor(Math.random() * source.length);
|
||||
drawn.push(source[idx]);
|
||||
source.splice(idx, 1); // Remove from pool
|
||||
}
|
||||
return drawn;
|
||||
};
|
||||
|
||||
// --- Step 1 & 2: Bottom Pool (6 Random + Objective) ---
|
||||
const bottomPool = drawRandom(pool, 6);
|
||||
|
||||
// Add Objective Card
|
||||
const objectiveDef = TILES.find(t => t.id === objectiveTileId);
|
||||
if (objectiveDef) {
|
||||
bottomPool.push(objectiveDef);
|
||||
} else {
|
||||
console.error("Objective Tile ID not found:", objectiveTileId);
|
||||
// Fallback: Add a generic room if objective missing?
|
||||
}
|
||||
|
||||
// --- Step 3: Shuffle Bottom Pool ---
|
||||
this.shuffleArray(bottomPool);
|
||||
|
||||
// --- Step 4: Top Pool (6 Random) ---
|
||||
const topPool = drawRandom(pool, 6);
|
||||
// Note: No shuffle explicitly needed for Top Pool if drawn randomly,
|
||||
// but shuffling ensures random order of the 6 drawn.
|
||||
this.shuffleArray(topPool);
|
||||
|
||||
// --- Step 5: Stack (Top on Bottom) ---
|
||||
// Array[0] is the "Top" card (first to be drawn)
|
||||
this.cards = [...topPool, ...bottomPool];
|
||||
|
||||
console.log(`Deck Generated: ${this.cards.length} cards.`);
|
||||
}
|
||||
|
||||
shuffleArray(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
}
|
||||
|
||||
draw() {
|
||||
if (this.cards.length === 0) {
|
||||
return null; // Deck empty
|
||||
}
|
||||
return this.cards.shift(); // Take from top
|
||||
}
|
||||
|
||||
// Useful for Campaign logic: Insert a specific card at position
|
||||
insertCard(tileId, position = 0) {
|
||||
const tileDef = TILES.find(t => t.id === tileId);
|
||||
if (tileDef) {
|
||||
this.cards.splice(position, 0, tileDef);
|
||||
}
|
||||
}
|
||||
}
|
||||
257
src/engine/dungeon/DungeonGenerator.js
Normal file
257
src/engine/dungeon/DungeonGenerator.js
Normal file
@@ -0,0 +1,257 @@
|
||||
import { DIRECTIONS } from './Constants.js';
|
||||
import { GridSystem } from './GridSystem.js';
|
||||
import { DungeonDeck } from './DungeonDeck.js';
|
||||
import { TILES } from './TileDefinitions.js';
|
||||
|
||||
export class DungeonGenerator {
|
||||
constructor() {
|
||||
this.grid = new GridSystem();
|
||||
this.deck = new DungeonDeck();
|
||||
this.pendingExits = []; // Array of global {x, y, direction}
|
||||
this.placedTiles = [];
|
||||
this.isComplete = false;
|
||||
}
|
||||
|
||||
startDungeon(missionConfig) {
|
||||
// 1. Prepare Deck (Rulebook: 13 cards, 6+1+6)
|
||||
// We need an objective tile ID from the config
|
||||
const objectiveId = missionConfig.type === 'quest' ? 'room_objective' : 'room_dungeon'; // Fallback for now
|
||||
this.deck.generateMissionDeck(objectiveId);
|
||||
|
||||
// 2. Rulebook Step 4: "Flip the first card. This is the entrance."
|
||||
const startCard = this.deck.draw();
|
||||
|
||||
if (!startCard) {
|
||||
console.error("Deck is empty on start!");
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. Place the Entry Tile at (0,0)
|
||||
// We assume rotation NORTH by default for the first piece
|
||||
const startInstance = {
|
||||
id: `tile_0_${startCard.id}`,
|
||||
defId: startCard.id,
|
||||
x: 0,
|
||||
y: 0,
|
||||
rotation: DIRECTIONS.NORTH
|
||||
};
|
||||
|
||||
if (this.grid.canPlace(startCard, 0, 0, DIRECTIONS.NORTH)) {
|
||||
this.grid.placeTile(startInstance, startCard);
|
||||
this.placedTiles.push(startInstance);
|
||||
this.addExitsToQueue(startInstance, startCard);
|
||||
console.log(`Dungeon started with ${startCard.name}`);
|
||||
} else {
|
||||
console.error("Failed to place starting tile (Grid collision at 0,0?)");
|
||||
}
|
||||
}
|
||||
|
||||
step() {
|
||||
if (this.isComplete) return false;
|
||||
if (this.pendingExits.length === 0) {
|
||||
console.log("No more exits available. Dungeon generation stopped.");
|
||||
this.isComplete = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Rulebook: Draw next card
|
||||
const card = this.deck.draw();
|
||||
|
||||
if (!card) {
|
||||
console.log("Deck empty. Dungeon complete.");
|
||||
this.isComplete = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Try to fit the card on any pending exit
|
||||
// We prioritize the "current" open exit? Rulebook implies expanding from the explored edge.
|
||||
// For a generator, we treat it as a queue (BFS) or stack (DFS). Queue is better for "bushy" dungeons.
|
||||
|
||||
// Let's try to fit the card onto the FIRST valid exit in our queue
|
||||
let placed = false;
|
||||
|
||||
// Iterate through copy of pending exits to avoid modification issues during loop
|
||||
// (Though we usually just pick ONE exit to explore per turn in the board game)
|
||||
// In the board game, you pick an exit and "Explore" it.
|
||||
// Let's pick the first available exit.
|
||||
const targetExit = this.pendingExits.shift();
|
||||
|
||||
console.log(`Attempting to place ${card.name} at exit ${targetExit.x},${targetExit.y} (${targetExit.direction})`);
|
||||
|
||||
// We need to rotate the new card so ONE of its exits connects to 'targetExit'
|
||||
// Connection rule: New Tile Exit be Opposed to Target Exit.
|
||||
// Target: NORTH -> New Tile must present a SOUTH exit to connect.
|
||||
const requiredInputDirection = this.getOppositeDirection(targetExit.direction);
|
||||
|
||||
// Find which exit on the CANDIDATE card can serve as the input
|
||||
// (A tile might have multiple potential inputs, e.g. a 4-way corridor)
|
||||
for (const candidateExit of card.exits) {
|
||||
// calculatedRotation: What rotation does the TILE need so that 'candidateExit' points 'requiredInputDirection'?
|
||||
// candidateExit.direction (Local) + TileRotation = requiredInputDirection
|
||||
|
||||
const rotation = this.calculateRequiredRotation(candidateExit.direction, requiredInputDirection);
|
||||
|
||||
// Now calculate where the tile top-left (x,y) must be so that the exits match positions.
|
||||
const position = this.calculateTilePosition(targetExit, candidateExit, rotation);
|
||||
|
||||
if (this.grid.canPlace(card, position.x, position.y, rotation)) {
|
||||
|
||||
// Success! Place it.
|
||||
const newInstance = {
|
||||
id: `tile_${this.placedTiles.length}_${card.id}`,
|
||||
defId: card.id,
|
||||
x: position.x,
|
||||
y: position.y,
|
||||
rotation: rotation
|
||||
};
|
||||
|
||||
this.grid.placeTile(newInstance, card);
|
||||
this.placedTiles.push(newInstance);
|
||||
|
||||
// Add NEW exits, but...
|
||||
// CRITICAL: The exit we just used to enter is NOT an exit anymore. It's the connection.
|
||||
this.addExitsToQueue(newInstance, card, targetExit); // Pass the source to exclude it
|
||||
|
||||
placed = true;
|
||||
break; // Stop looking for fits for this card
|
||||
}
|
||||
}
|
||||
|
||||
if (!placed) {
|
||||
console.log(`Could not fit ${card.name} at selected exit. Discarding.`);
|
||||
// In real game: Discard card.
|
||||
// Put the exit back? Rulebook says "If room doesn't fit, nothing is placed".
|
||||
// Does the exit remain open? Yes, usually.
|
||||
this.pendingExits.push(targetExit); // Return exit to queue to try later?
|
||||
// Or maybe discard it?
|
||||
// "If you cannot place the room... the passage is a dead end." (Some editions)
|
||||
// Let's keep it open for now, maybe next card fits.
|
||||
}
|
||||
|
||||
return true; // Step done
|
||||
}
|
||||
|
||||
// --- Helpers ---
|
||||
|
||||
getOppositeDirection(dir) {
|
||||
switch (dir) {
|
||||
case DIRECTIONS.NORTH: return DIRECTIONS.SOUTH;
|
||||
case DIRECTIONS.SOUTH: return DIRECTIONS.NORTH;
|
||||
case DIRECTIONS.EAST: return DIRECTIONS.WEST;
|
||||
case DIRECTIONS.WEST: return DIRECTIONS.EAST;
|
||||
}
|
||||
}
|
||||
|
||||
calculateRequiredRotation(localDir, targetGlobalDir) {
|
||||
// e.g. Local=NORTH needs to become Global=EAST.
|
||||
// N(0) -> E(1). Diff +1 (90 deg).
|
||||
// Standard mapping: N=0, E=1, S=2, W=3
|
||||
const dirs = [DIRECTIONS.NORTH, DIRECTIONS.EAST, DIRECTIONS.SOUTH, DIRECTIONS.WEST];
|
||||
const localIdx = dirs.indexOf(localDir);
|
||||
const targetIdx = dirs.indexOf(targetGlobalDir);
|
||||
|
||||
// (Local + Rotation) % 4 = Target
|
||||
// Rotation = (Target - Local + 4) % 4
|
||||
const diff = (targetIdx - localIdx + 4) % 4;
|
||||
return dirs[diff];
|
||||
}
|
||||
|
||||
calculateTilePosition(targetExitGlobal, candidateExitLocal, rotation) {
|
||||
// We know the Global Coordinate of the connection point (targetExitGlobal)
|
||||
// We know the Local Coordinate of the matching exit on the new tile (candidateExitLocal)
|
||||
// We need 'startX, startY' of the new tile.
|
||||
|
||||
// First, transform the local exit to a rotated offset
|
||||
// We reuse GridSystem logic logic ideally, but let's do math here
|
||||
let offsetX, offsetY;
|
||||
|
||||
// Replicating GridSystem.getGlobalPoint simple logic for vector only
|
||||
// If we treat candidateExitLocal as a vector from (0,0)
|
||||
const lx = candidateExitLocal.x;
|
||||
const ly = candidateExitLocal.y;
|
||||
|
||||
switch (rotation) {
|
||||
case DIRECTIONS.NORTH: offsetX = lx; offsetY = ly; break;
|
||||
case DIRECTIONS.SOUTH: offsetX = -lx; offsetY = -ly; break;
|
||||
case DIRECTIONS.EAST: offsetX = ly; offsetY = -lx; break;
|
||||
case DIRECTIONS.WEST: offsetX = -ly; offsetY = lx; break;
|
||||
}
|
||||
|
||||
// GlobalExit = TilePos + RotatedOffset
|
||||
// TilePos = GlobalExit - RotatedOffset
|
||||
|
||||
// Wait, 'targetExitGlobal' is the cell just OUTSIDE the previous tile?
|
||||
// Or the cell OF the previous tile's exit?
|
||||
// Usually targetExit is "The cell where the connection happens".
|
||||
// In GridSystem, exits are defined AT the edge.
|
||||
// Let's assume targetExitGlobal is the coordinate OF THE EXIT CELL on the previous tile.
|
||||
// So the new tile's matching exit cell must OVERLAP this one? NO.
|
||||
// They must be adjacent.
|
||||
|
||||
// Correction: Tiles must connect *adjacent* to each other.
|
||||
// If TargetExit is at (10,10) facing NORTH, the New Tile must attach at (10,11).
|
||||
|
||||
let connectionPointX = targetExitGlobal.x;
|
||||
let connectionPointY = targetExitGlobal.y;
|
||||
|
||||
// Move 1 step in the target direction to find the "Anchor Point" for the new tile
|
||||
switch (targetExitGlobal.direction) {
|
||||
case DIRECTIONS.NORTH: connectionPointY += 1; break;
|
||||
case DIRECTIONS.SOUTH: connectionPointY -= 1; break;
|
||||
case DIRECTIONS.EAST: connectionPointX += 1; break;
|
||||
case DIRECTIONS.WEST: connectionPointX -= 1; break;
|
||||
}
|
||||
|
||||
// Now align the new tile such that its candidate exit lands on connectionPoint
|
||||
return {
|
||||
x: connectionPointX - offsetX,
|
||||
y: connectionPointY - offsetY
|
||||
};
|
||||
}
|
||||
|
||||
addExitsToQueue(tileInstance, tileDef, excludeSourceExit = null) {
|
||||
// Calculate all global exits for this placed tile
|
||||
for (const exit of tileDef.exits) {
|
||||
const globalPoint = this.grid.getGlobalPoint(exit.x, exit.y, tileInstance);
|
||||
const globalDir = this.grid.getRotatedDirection(exit.direction, tileInstance.rotation);
|
||||
|
||||
// If this is the exit we just entered through, skip it
|
||||
// Logic: connection is adjacent.
|
||||
// A simpler check: if we just connected to (X,Y), don't add an exit at (X,Y).
|
||||
// But we calculated 'connectionPoint' as the place where the NEW tile's exit is.
|
||||
|
||||
// Check adjacency to excludeSource?
|
||||
// Or better: excludeSourceExit is the "Previous Tile's Exit".
|
||||
// The "Entrance" on the new tile connects to that.
|
||||
// We should just not add the exit that was used as input.
|
||||
|
||||
// How to identify it?
|
||||
// We calculated it in the main loop.
|
||||
// Let's simplify: Add ALL exits.
|
||||
// The logic later will filter out exits that point into occupied cells?
|
||||
// Yes, checking collision also checks if the target cell is free.
|
||||
// But we don't want to list "Backwards" exits.
|
||||
|
||||
// Optimization: If the cell immediate to this exit is already occupied, don't add it.
|
||||
// This handles the "Entrance" naturally (it points back to the previous tile).
|
||||
|
||||
let neighborX = globalPoint.x;
|
||||
let neighborY = globalPoint.y;
|
||||
switch (globalDir) {
|
||||
case DIRECTIONS.NORTH: neighborY += 1; break;
|
||||
case DIRECTIONS.SOUTH: neighborY -= 1; break;
|
||||
case DIRECTIONS.EAST: neighborX += 1; break;
|
||||
case DIRECTIONS.WEST: neighborX -= 1; break;
|
||||
}
|
||||
|
||||
const neighborKey = `${neighborX},${neighborY}`;
|
||||
if (!this.grid.occupiedCells.has(neighborKey)) {
|
||||
this.pendingExits.push({
|
||||
x: globalPoint.x,
|
||||
y: globalPoint.y,
|
||||
direction: globalDir
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
184
src/engine/dungeon/GridSystem.js
Normal file
184
src/engine/dungeon/GridSystem.js
Normal file
@@ -0,0 +1,184 @@
|
||||
import { DIRECTIONS } from './Constants.js';
|
||||
|
||||
export class GridSystem {
|
||||
/**
|
||||
* The GridSystem maintains the "Source of Truth" for the dungeon layout.
|
||||
* It knows which cells are occupied and by whom.
|
||||
* Dependencies: Constants.js (DIRECTIONS)
|
||||
*/
|
||||
constructor() {
|
||||
// We use a Map for O(1) lookups.
|
||||
// Key: "x,y" (String) -> Value: "tileId" (String)
|
||||
this.occupiedCells = new Map();
|
||||
|
||||
// We also keep a list of placed tile objects for easier iteration if needed later.
|
||||
this.tiles = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if a tile can be placed at the given coordinates with the given rotation.
|
||||
* Needs: The Tile Definition (to know size), the target X,Y, and desired Rotation.
|
||||
*/
|
||||
canPlace(tileDef, startX, startY, rotation) {
|
||||
// 1. Calculate the real-world coordinates of every single cell this tile would occupy.
|
||||
const cells = this.getGlobalCells(tileDef, startX, startY, rotation);
|
||||
|
||||
// 2. Check each cell against our Map of occupied spots.
|
||||
for (const cell of cells) {
|
||||
const key = `${cell.x},${cell.y}`;
|
||||
if (this.occupiedCells.has(key)) {
|
||||
return false; // COLLISION! Spot already taken.
|
||||
}
|
||||
}
|
||||
return true; // All clear.
|
||||
}
|
||||
|
||||
/**
|
||||
* Officially registers a tile onto the board.
|
||||
* Should only be called AFTER canPlace returns true.
|
||||
*/
|
||||
placeTile(tileInstance, tileDef) {
|
||||
const cells = this.getGlobalCells(tileDef, tileInstance.x, tileInstance.y, tileInstance.rotation);
|
||||
|
||||
// Record every cell in our Map
|
||||
for (const cell of cells) {
|
||||
const key = `${cell.x},${cell.y}`;
|
||||
this.occupiedCells.set(key, tileInstance.id);
|
||||
}
|
||||
|
||||
// Store the instance
|
||||
this.tiles.push(tileInstance);
|
||||
console.log(`Placed tile ${tileInstance.id} at ${tileInstance.x},${tileInstance.y}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* THE MAGIC MATH FUNCTION.
|
||||
* Converts a simplified abstract tile (width/length) into actual grid coordinates.
|
||||
* Handles the Rotation logic (N, S, E, W).
|
||||
* NOW SUPPORTS: Matrix Layouts (0 = Empty).
|
||||
*/
|
||||
getGlobalCells(tileDef, startX, startY, rotation) {
|
||||
const cells = [];
|
||||
const layout = tileDef.layout;
|
||||
|
||||
// Safety check: if no layout, fallback to full rectangle (optional, but good for stability)
|
||||
// usage: const w = tileDef.width; const l = tileDef.length;
|
||||
|
||||
if (!layout) {
|
||||
console.error("Tile definition missing layout. ID:", tileDef?.id);
|
||||
console.warn("Invalid tileDef object:", tileDef);
|
||||
return cells;
|
||||
}
|
||||
|
||||
const numberOfRows = layout.length; // usually equals tileDef.length
|
||||
|
||||
// Iterate through matrix rows
|
||||
for (let row = 0; row < numberOfRows; row++) {
|
||||
const rowData = layout[row];
|
||||
const numberOfCols = rowData.length; // usually equals tileDef.width
|
||||
|
||||
for (let col = 0; col < numberOfCols; col++) {
|
||||
const cellValue = rowData[col];
|
||||
|
||||
// CRITICAL: Skip empty cells (0)
|
||||
if (cellValue === 0) continue;
|
||||
|
||||
// Map Matrix (Row, Col) to Local Grid (lx, ly)
|
||||
// Matrix Row 0 is the "Top" (Max Y).
|
||||
// Matrix Row (Rows-1) is the "Bottom" (Y=0).
|
||||
// So: ly = (numberOfRows - 1) - row
|
||||
// lx = col
|
||||
|
||||
const lx = col;
|
||||
const ly = (numberOfRows - 1) - row;
|
||||
|
||||
let gx, gy;
|
||||
|
||||
// Apply Rotation to the local (lx, ly) point relative to (0,0) anchor
|
||||
switch (rotation) {
|
||||
case DIRECTIONS.NORTH:
|
||||
// Standard: +X is Right, +Y is Forward
|
||||
gx = startX + lx;
|
||||
gy = startY + ly;
|
||||
break;
|
||||
case DIRECTIONS.SOUTH:
|
||||
// 180 degrees: Extension goes "Backwards" and "Leftwards" relative to pivot
|
||||
gx = startX - lx;
|
||||
gy = startY - ly;
|
||||
break;
|
||||
case DIRECTIONS.EAST:
|
||||
// 90 degrees Clockwise: Width becomes "Length", Length becomes "Width"
|
||||
// x' = y, y' = -x
|
||||
gx = startX + ly;
|
||||
gy = startY - lx;
|
||||
break;
|
||||
case DIRECTIONS.WEST:
|
||||
// 270 degrees Clockwise (or 90 Counter-Clockwise)
|
||||
// x' = -y, y' = x
|
||||
gx = startX - ly;
|
||||
gy = startY + lx;
|
||||
break;
|
||||
default:
|
||||
gx = startX + lx;
|
||||
gy = startY + ly;
|
||||
}
|
||||
|
||||
// We could also store the 'cellValue' (height) if we wanted.
|
||||
cells.push({ x: gx, y: gy, value: cellValue });
|
||||
}
|
||||
}
|
||||
return cells;
|
||||
}
|
||||
|
||||
/**
|
||||
* Transforms a local point (like an exit definition) to Global Coordinates.
|
||||
* Useful for calculating where an exit actually ends up on the board.
|
||||
*/
|
||||
getGlobalPoint(localX, localY, tileInstance) {
|
||||
let gx, gy;
|
||||
const startX = tileInstance.x;
|
||||
const startY = tileInstance.y;
|
||||
const rotation = tileInstance.rotation;
|
||||
|
||||
switch (rotation) {
|
||||
case DIRECTIONS.NORTH:
|
||||
gx = startX + localX;
|
||||
gy = startY + localY;
|
||||
break;
|
||||
case DIRECTIONS.SOUTH:
|
||||
gx = startX - localX;
|
||||
gy = startY - localY;
|
||||
break;
|
||||
case DIRECTIONS.EAST:
|
||||
gx = startX + localY;
|
||||
gy = startY - localX;
|
||||
break;
|
||||
case DIRECTIONS.WEST:
|
||||
gx = startX - localY;
|
||||
gy = startY + localX;
|
||||
break;
|
||||
default:
|
||||
gx = startX + localX;
|
||||
gy = startY + localY;
|
||||
}
|
||||
return { x: gx, y: gy };
|
||||
}
|
||||
|
||||
/**
|
||||
* Rotates a direction (N, S, E, W) by a given amount.
|
||||
* Useful for calculating which way an exit faces after the tile is rotated.
|
||||
*/
|
||||
getRotatedDirection(originalDirection, tileRotation) {
|
||||
// N=0, E=1, S=2, W=3
|
||||
const dirs = [DIRECTIONS.NORTH, DIRECTIONS.EAST, DIRECTIONS.SOUTH, DIRECTIONS.WEST];
|
||||
const idx = dirs.indexOf(originalDirection);
|
||||
|
||||
let rotationSteps = 0;
|
||||
if (tileRotation === DIRECTIONS.EAST) rotationSteps = 1;
|
||||
if (tileRotation === DIRECTIONS.SOUTH) rotationSteps = 2;
|
||||
if (tileRotation === DIRECTIONS.WEST) rotationSteps = 3;
|
||||
|
||||
const newIdx = (idx + rotationSteps) % 4;
|
||||
return dirs[newIdx];
|
||||
}
|
||||
}
|
||||
39
src/engine/dungeon/MissionConfig.js
Normal file
39
src/engine/dungeon/MissionConfig.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import { TILE_TYPES } from './Constants.js';
|
||||
|
||||
export const MISSION_TYPES = {
|
||||
ESCAPE: 'escape', // Objective is to find the exit
|
||||
QUEST: 'quest' // Objective is to find the Objective Room
|
||||
};
|
||||
|
||||
export class MissionConfig {
|
||||
/**
|
||||
* @param {Object} config - The mission configuration object
|
||||
* @param {string} config.id - Unique ID
|
||||
* @param {string} config.name - Display Name
|
||||
* @param {string} config.type - MISSION_TYPES.ESCAPE or .QUEST
|
||||
* @param {number} config.minTiles - Minimum tiles before the objective card is shuffled in
|
||||
*/
|
||||
constructor(config) {
|
||||
this.id = config.id;
|
||||
this.name = config.name;
|
||||
this.type = config.type || MISSION_TYPES.ESCAPE;
|
||||
|
||||
// For Campaign missions: "Force valid exit room after X tiles"
|
||||
// Use this to control when the "Target" card is inserted into the future deck
|
||||
this.minTiles = config.minTiles || 8;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines which tile acts as the "Objective" for this mission.
|
||||
* In standard missions: It's the Objective Room.
|
||||
* In escape missions: It might be a specific generic room designated as the "Exit".
|
||||
*/
|
||||
getTargetTileType() {
|
||||
if (this.type === MISSION_TYPES.QUEST) {
|
||||
return TILE_TYPES.OBJECTIVE_ROOM;
|
||||
} else {
|
||||
// In escape missions, any Room can be the exit, usually marked specifically
|
||||
return TILE_TYPES.ROOM;
|
||||
}
|
||||
}
|
||||
}
|
||||
148
src/engine/dungeon/TileDefinitions.js
Normal file
148
src/engine/dungeon/TileDefinitions.js
Normal file
@@ -0,0 +1,148 @@
|
||||
import { DIRECTIONS, TILE_TYPES } from './Constants.js';
|
||||
|
||||
export const TILES = [
|
||||
// --- CORRIDORS (Corredores) ---
|
||||
{
|
||||
id: 'corridor_straight',
|
||||
name: 'Corridor',
|
||||
type: TILE_TYPES.CORRIDOR,
|
||||
width: 2,
|
||||
length: 6,
|
||||
textures: ['/assets/images/dungeon1/tiles/corridor1.png', '/assets/images/dungeon1/tiles/corridor2.png', '/assets/images/dungeon1/tiles/corridor3.png'], // Visual variety
|
||||
// Layout: 6 rows
|
||||
layout: [
|
||||
[1, 1], // y=5 (North End - Trident?)
|
||||
[1, 1], // y=4
|
||||
[1, 1], // y=3
|
||||
[1, 1], // y=2
|
||||
[1, 1], // y=1
|
||||
[1, 1] // y=0 (South End - Single Input)
|
||||
],
|
||||
exits: [
|
||||
// South End (1 direction)
|
||||
{ x: 0, y: 0, direction: DIRECTIONS.SOUTH },
|
||||
{ x: 1, y: 0, direction: DIRECTIONS.SOUTH },
|
||||
|
||||
// North End (3 Directions: N, plus Side E/W meaning West/East in vertical)
|
||||
{ x: 0, y: 5, direction: DIRECTIONS.NORTH }, // Straight Out
|
||||
{ x: 1, y: 5, direction: DIRECTIONS.NORTH },
|
||||
|
||||
{ x: 0, y: 5, direction: DIRECTIONS.WEST },
|
||||
{ x: 1, y: 5, direction: DIRECTIONS.EAST }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'corridor_steps',
|
||||
name: 'Steps',
|
||||
type: TILE_TYPES.CORRIDOR,
|
||||
width: 2,
|
||||
length: 6,
|
||||
textures: ['/assets/images/dungeon1/tiles/stairs1.png'],
|
||||
// Layout includes 9 for stairs? User example used 9.
|
||||
layout: [
|
||||
[2, 2], // y=5 (High end)
|
||||
[2, 2],
|
||||
[9, 9], // Stairs
|
||||
[9, 9],
|
||||
[1, 1],
|
||||
[1, 1] // y=0 (Low end)
|
||||
],
|
||||
exits: [
|
||||
{ x: 0, y: 0, direction: DIRECTIONS.SOUTH },
|
||||
{ x: 1, y: 0, direction: DIRECTIONS.SOUTH },
|
||||
{ x: 0, y: 5, direction: DIRECTIONS.NORTH },
|
||||
{ x: 1, y: 5, direction: DIRECTIONS.NORTH }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'corridor_corner',
|
||||
name: 'Corner',
|
||||
type: TILE_TYPES.CORRIDOR,
|
||||
width: 4,
|
||||
length: 4,
|
||||
textures: ['/assets/images/dungeon1/tiles/L.png'],
|
||||
// L Shape
|
||||
layout: [
|
||||
[1, 1, 1, 1], // y=3
|
||||
[1, 1, 1, 1], // y=2
|
||||
[1, 1, 0, 0], // y=1
|
||||
[1, 1, 0, 0] // y=0
|
||||
],
|
||||
exits: [
|
||||
{ x: 0, y: 0, direction: DIRECTIONS.SOUTH },
|
||||
{ x: 1, y: 0, direction: DIRECTIONS.SOUTH },
|
||||
|
||||
{ x: 3, y: 2, direction: DIRECTIONS.EAST },
|
||||
{ x: 3, y: 3, direction: DIRECTIONS.EAST }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'junction_t',
|
||||
name: 'T-Junction',
|
||||
type: TILE_TYPES.JUNCTION,
|
||||
width: 6,
|
||||
length: 4,
|
||||
textures: ['/assets/images/dungeon1/tiles/T.png'],
|
||||
// T-Shape
|
||||
layout: [
|
||||
[1, 1, 1, 1, 1, 1], // y=3
|
||||
[1, 1, 1, 1, 1, 1], // y=2
|
||||
[0, 0, 1, 1, 0, 0], // y=1
|
||||
[0, 0, 1, 1, 0, 0] // y=0
|
||||
],
|
||||
exits: [
|
||||
{ x: 2, y: 0, direction: DIRECTIONS.SOUTH },
|
||||
{ x: 3, y: 0, direction: DIRECTIONS.SOUTH },
|
||||
|
||||
{ x: 0, y: 2, direction: DIRECTIONS.WEST },
|
||||
{ x: 0, y: 3, direction: DIRECTIONS.WEST },
|
||||
|
||||
{ x: 5, y: 2, direction: DIRECTIONS.EAST },
|
||||
{ x: 5, y: 3, direction: DIRECTIONS.EAST }
|
||||
]
|
||||
},
|
||||
|
||||
// --- ROOMS ---
|
||||
{
|
||||
id: 'room_dungeon',
|
||||
name: 'Dungeon Room',
|
||||
type: TILE_TYPES.ROOM,
|
||||
width: 4,
|
||||
length: 4,
|
||||
textures: ['/assets/images/dungeon1/tiles/room_4x4_circle.png', '/assets/images/dungeon1/tiles/room_4x4_orange.png', '/assets/images/dungeon1/tiles/room_4x4_squeleton.png'],
|
||||
layout: [
|
||||
[1, 1, 1, 1],
|
||||
[1, 1, 1, 1],
|
||||
[1, 1, 1, 1],
|
||||
[1, 1, 1, 1]
|
||||
],
|
||||
exits: [
|
||||
{ x: 1, y: 0, direction: DIRECTIONS.SOUTH },
|
||||
{ x: 2, y: 0, direction: DIRECTIONS.SOUTH },
|
||||
{ x: 1, y: 3, direction: DIRECTIONS.NORTH },
|
||||
{ x: 2, y: 3, direction: DIRECTIONS.NORTH }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'room_objective',
|
||||
name: 'Objective Room',
|
||||
type: TILE_TYPES.OBJECTIVE_ROOM,
|
||||
width: 4,
|
||||
length: 8,
|
||||
textures: ['/assets/images/dungeon1/tiles/room_4x8_altar.png', '/assets/images/dungeon1/tiles/room_4x8_tomb.png'],
|
||||
layout: [
|
||||
[1, 1, 1, 1], // y=7
|
||||
[1, 1, 1, 1],
|
||||
[1, 1, 1, 1],
|
||||
[1, 1, 1, 1],
|
||||
[1, 1, 1, 1],
|
||||
[1, 1, 1, 1],
|
||||
[1, 1, 1, 1],
|
||||
[1, 1, 1, 1] // y=0
|
||||
],
|
||||
exits: [
|
||||
{ x: 1, y: 0, direction: DIRECTIONS.SOUTH },
|
||||
{ x: 2, y: 0, direction: DIRECTIONS.SOUTH }
|
||||
]
|
||||
}
|
||||
];
|
||||
59
src/main.js
Normal file
59
src/main.js
Normal file
@@ -0,0 +1,59 @@
|
||||
import { DungeonGenerator } from './engine/dungeon/DungeonGenerator.js';
|
||||
import { MissionConfig, MISSION_TYPES } from './engine/dungeon/MissionConfig.js';
|
||||
|
||||
console.log("Initializing Warhammer Quest Engine... VERSION: TEXTURE_DEBUG_V1");
|
||||
window.TEXTURE_DEBUG = true; // Global flag we can check
|
||||
|
||||
|
||||
|
||||
// 1. Setup Mission
|
||||
const mission = new MissionConfig({
|
||||
id: 'mission_1',
|
||||
name: 'The First Dive',
|
||||
type: MISSION_TYPES.ESCAPE,
|
||||
minTiles: 6
|
||||
});
|
||||
|
||||
// 2. Init Engine
|
||||
import { GameRenderer } from './view/GameRenderer.js';
|
||||
import { CameraManager } from './view/CameraManager.js';
|
||||
import { UIManager } from './view/UIManager.js';
|
||||
import { DIRECTIONS } from './engine/dungeon/Constants.js';
|
||||
|
||||
const renderer = new GameRenderer('app'); // Assuming <div id="app"> or body
|
||||
const cameraManager = new CameraManager(renderer);
|
||||
const generator = new DungeonGenerator();
|
||||
const ui = new UIManager(cameraManager, generator);
|
||||
|
||||
// Hook generator to renderer (Primitive Event system)
|
||||
// We simply check placedTiles changes or adding methods
|
||||
const originalPlaceTile = generator.grid.placeTile.bind(generator.grid);
|
||||
generator.grid.placeTile = (instance, def) => {
|
||||
originalPlaceTile(instance, def);
|
||||
// Visual Spawn
|
||||
// We need to spawn the actual shape. For now `addTile` does a bug cube.
|
||||
// Ideally we iterate the cells of the tile and spawn cubes.
|
||||
|
||||
// Quick Hack: Spawn a cube for every occupied cell of this tile
|
||||
const cells = generator.grid.getGlobalCells(def, instance.x, instance.y, instance.rotation);
|
||||
renderer.addTile(cells, def.type, def, instance);
|
||||
};
|
||||
|
||||
// 3. Start
|
||||
console.log("Starting Dungeon Generation...");
|
||||
|
||||
generator.startDungeon(mission);
|
||||
|
||||
// 4. Render Loop
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// Logic Step
|
||||
if (!generator.isComplete) {
|
||||
generator.step();
|
||||
}
|
||||
|
||||
// Render
|
||||
renderer.render(cameraManager.getCamera());
|
||||
};
|
||||
animate();
|
||||
150
src/view/CameraManager.js
Normal file
150
src/view/CameraManager.js
Normal file
@@ -0,0 +1,150 @@
|
||||
import * as THREE from 'three';
|
||||
import { DIRECTIONS } from '../engine/dungeon/Constants.js';
|
||||
|
||||
export class CameraManager {
|
||||
constructor(renderer) {
|
||||
this.renderer = renderer; // Reference to GameRenderer to access scenes/resize if needed
|
||||
|
||||
// Configuration
|
||||
this.zoomLevel = 20; // Orthographic zoom factor
|
||||
this.aspect = window.innerWidth / window.innerHeight;
|
||||
|
||||
// Isometric Setup: Orthographic Camera
|
||||
// Left, Right, Top, Bottom, Near, Far
|
||||
// Dimensions determined by zoomLevel and aspect
|
||||
this.camera = new THREE.OrthographicCamera(
|
||||
-this.zoomLevel * this.aspect,
|
||||
this.zoomLevel * this.aspect,
|
||||
this.zoomLevel,
|
||||
-this.zoomLevel,
|
||||
1,
|
||||
1000
|
||||
);
|
||||
|
||||
// Initial Position: Isometric View
|
||||
// Looking from "High Corner"
|
||||
this.camera.position.set(20, 20, 20);
|
||||
this.camera.lookAt(0, 0, 0);
|
||||
|
||||
// --- Controls State ---
|
||||
this.isDragging = false;
|
||||
this.lastMouseX = 0;
|
||||
this.lastMouseY = 0;
|
||||
this.panSpeed = 0.5;
|
||||
|
||||
// Current Snap View (North, East, South, West)
|
||||
// We'll define View Angles relative to "Target"
|
||||
this.currentViewAngle = 0; // 0 = North? We'll refine mapping.
|
||||
|
||||
this.setupInputListeners();
|
||||
}
|
||||
|
||||
getCamera() {
|
||||
return this.camera;
|
||||
}
|
||||
|
||||
setupInputListeners() {
|
||||
// Zoom (Mouse Wheel)
|
||||
window.addEventListener('wheel', (e) => {
|
||||
e.preventDefault();
|
||||
// Adjust Zoom Level property
|
||||
if (e.deltaY < 0) this.zoomLevel = Math.max(5, this.zoomLevel - 1);
|
||||
else this.zoomLevel = Math.min(50, this.zoomLevel + 1);
|
||||
|
||||
this.updateProjection();
|
||||
}, { passive: false });
|
||||
|
||||
// Pan Listeners (Middle Click)
|
||||
window.addEventListener('mousedown', (e) => {
|
||||
if (e.button === 1) { // Middle Mouse
|
||||
this.isDragging = true;
|
||||
this.lastMouseX = e.clientX;
|
||||
this.lastMouseY = e.clientY;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
this.isDragging = false;
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (this.isDragging) {
|
||||
const dx = e.clientX - this.lastMouseX;
|
||||
const dy = e.clientY - this.lastMouseY;
|
||||
this.lastMouseX = e.clientX;
|
||||
this.lastMouseY = e.clientY;
|
||||
|
||||
this.pan(-dx, dy); // Invert X usually feels natural (drag ground)
|
||||
}
|
||||
});
|
||||
|
||||
// Resize Listener linkage
|
||||
window.addEventListener('resize', () => {
|
||||
this.aspect = window.innerWidth / window.innerHeight;
|
||||
this.updateProjection();
|
||||
});
|
||||
}
|
||||
|
||||
updateProjection() {
|
||||
this.camera.left = -this.zoomLevel * this.aspect;
|
||||
this.camera.right = this.zoomLevel * this.aspect;
|
||||
this.camera.top = this.zoomLevel;
|
||||
this.camera.bottom = -this.zoomLevel;
|
||||
this.camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
pan(dx, dy) {
|
||||
// Panning moves the camera position relative to its local axes
|
||||
// X movement moves Right/Left
|
||||
// Y movement moves Up/Down (in screen space)
|
||||
|
||||
// Since we are isometric, "Up/Down" on screen means moving along the projected Z axis basically.
|
||||
|
||||
// Simple implementation: Translate on X and Z (Ground Plane)
|
||||
// We need to convert screen delta to world delta based on current rotation?
|
||||
// For 'Fixed' views, it's easier.
|
||||
|
||||
const moveSpeed = this.panSpeed * 0.1 * (this.zoomLevel / 10);
|
||||
|
||||
// Basic Pan relative to world for now:
|
||||
// We really want to move camera.translateX/Y?
|
||||
this.camera.translateX(dx * moveSpeed);
|
||||
this.camera.translateY(dy * moveSpeed);
|
||||
}
|
||||
|
||||
// --- Fixed Orbit Logic ---
|
||||
// N, S, E, W
|
||||
setIsoView(direction) {
|
||||
// Standard Isometric look from corner
|
||||
// Distance
|
||||
const dist = 40;
|
||||
const height = 30; // 35 degrees up approx?
|
||||
|
||||
let x, z;
|
||||
switch (direction) {
|
||||
case DIRECTIONS.NORTH: // Looking North means camera is at South?
|
||||
// Or Looking FROM North?
|
||||
// Usually "North View" means "Top of map is North".
|
||||
// In 3D Iso, standard is X=Right, Z=Down(South).
|
||||
// "Normal" view: Camera at +X, +Z looking at origin?
|
||||
x = dist; z = dist;
|
||||
break;
|
||||
case DIRECTIONS.SOUTH:
|
||||
x = -dist; z = -dist;
|
||||
break;
|
||||
case DIRECTIONS.EAST:
|
||||
x = dist; z = -dist;
|
||||
break;
|
||||
case DIRECTIONS.WEST:
|
||||
x = -dist; z = dist;
|
||||
break;
|
||||
default:
|
||||
x = dist; z = dist;
|
||||
}
|
||||
|
||||
this.camera.position.set(x, height, z);
|
||||
this.camera.lookAt(0, 0, 0); // Need to orbit around a pivot actually if we want to pan...
|
||||
// If we pan, camera.lookAt overrides position logic unless we move the visual target.
|
||||
// TODO: Implement OrbitControls-like logic with a target.
|
||||
}
|
||||
}
|
||||
158
src/view/GameRenderer.js
Normal file
158
src/view/GameRenderer.js
Normal file
@@ -0,0 +1,158 @@
|
||||
import * as THREE from 'three';
|
||||
|
||||
export class GameRenderer {
|
||||
constructor(containerId) {
|
||||
this.container = document.getElementById(containerId) || document.body;
|
||||
|
||||
// 1. Scene
|
||||
this.scene = new THREE.Scene();
|
||||
this.scene.background = new THREE.Color(0x1a1a1a);
|
||||
|
||||
// 2. Renderer
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.renderer.shadowMap.enabled = true;
|
||||
this.container.appendChild(this.renderer.domElement);
|
||||
|
||||
// 3. Default Lights
|
||||
this.setupLights();
|
||||
|
||||
// Debug Properties
|
||||
this.scene.add(new THREE.AxesHelper(10)); // Red=X, Green=Y, Blue=Z
|
||||
|
||||
// Grid Helper: Size 100, Divisions 100 (1 unit per cell)
|
||||
const gridHelper = new THREE.GridHelper(100, 100, 0x444444, 0x222222);
|
||||
this.scene.add(gridHelper);
|
||||
|
||||
// 4. Resize Handler
|
||||
window.addEventListener('resize', this.onWindowResize.bind(this));
|
||||
|
||||
// 5. Textures
|
||||
this.textureLoader = new THREE.TextureLoader();
|
||||
this.textureCache = new Map();
|
||||
}
|
||||
|
||||
setupLights() {
|
||||
// Ambient Light (Base visibility)
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
|
||||
this.scene.add(ambientLight);
|
||||
|
||||
// Directional Light (Sun/Moon - creates shadows)
|
||||
const dirLight = new THREE.DirectionalLight(0xffffff, 0.7);
|
||||
dirLight.position.set(50, 100, 50);
|
||||
dirLight.castShadow = true;
|
||||
this.scene.add(dirLight);
|
||||
}
|
||||
|
||||
onWindowResize() {
|
||||
if (this.camera) {
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
}
|
||||
}
|
||||
|
||||
render(camera) {
|
||||
if (camera) {
|
||||
this.renderer.render(this.scene, camera);
|
||||
}
|
||||
}
|
||||
|
||||
getTexture(path) {
|
||||
if (!this.textureCache.has(path)) {
|
||||
// NOTE: Using absolute paths from public dir requires leading slash if served from root
|
||||
// But verify if we need to prepend anything else.
|
||||
// Assuming served at root /.
|
||||
const tex = this.textureLoader.load(path,
|
||||
(t) => console.log(`Texture loaded: ${path}`),
|
||||
undefined,
|
||||
(err) => console.error(`Texture failed: ${path}`, err)
|
||||
);
|
||||
tex.magFilter = THREE.NearestFilter;
|
||||
tex.minFilter = THREE.NearestFilter;
|
||||
tex.colorSpace = THREE.SRGBColorSpace;
|
||||
this.textureCache.set(path, tex);
|
||||
}
|
||||
return this.textureCache.get(path);
|
||||
}
|
||||
|
||||
addTile(cells, type, tileDef, tileInstance) {
|
||||
// cells: Array of {x, y} global coordinates
|
||||
// tileDef: The definition object (has textures, dimensions)
|
||||
// tileInstance: The instance object (has x, y, rotation, id)
|
||||
|
||||
console.log(`Rendering Tile [${type}] with ${cells.length} cells.`);
|
||||
|
||||
const isRoom = type === 'room' || type === 'room_objective' || type === 'room_dungeon';
|
||||
|
||||
// 1. Draw individual Cells (The Grill)
|
||||
cells.forEach(cell => {
|
||||
const geometry = new THREE.BoxGeometry(1, 0.5, 1);
|
||||
const material = new THREE.MeshStandardMaterial({
|
||||
color: isRoom ? 0x4444ff : 0xaaaaaa,
|
||||
roughness: 0.8,
|
||||
metalness: 0.1,
|
||||
transparent: true,
|
||||
opacity: 0.5
|
||||
});
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
mesh.position.set(cell.x, 0, -cell.y);
|
||||
|
||||
const edges = new THREE.EdgesGeometry(geometry);
|
||||
const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x000000 }));
|
||||
mesh.add(line);
|
||||
|
||||
this.scene.add(mesh);
|
||||
});
|
||||
|
||||
// 2. Draw Texture Plane (The Image)
|
||||
if (tileDef && tileInstance && tileDef.textures && tileDef.textures.length > 0) {
|
||||
|
||||
const texturePath = tileDef.textures[0];
|
||||
console.log(`[GameRenderer] Loading texture ${texturePath} for tile`, tileDef.id);
|
||||
const texture = this.getTexture(texturePath);
|
||||
|
||||
const w = tileDef.width;
|
||||
const l = tileDef.length;
|
||||
|
||||
// Create Plane
|
||||
const geometry = new THREE.PlaneGeometry(w, l);
|
||||
const material = new THREE.MeshBasicMaterial({
|
||||
map: texture,
|
||||
transparent: true,
|
||||
side: THREE.DoubleSide,
|
||||
alphaTest: 0.1
|
||||
});
|
||||
const plane = new THREE.Mesh(geometry, material);
|
||||
|
||||
// Initial Rotation: Plane X-Y to X-Z
|
||||
plane.rotation.x = -Math.PI / 2;
|
||||
|
||||
// Apply Tile Rotation (N=0, E=1, S=2, W=3 in Y axis)
|
||||
// We rotate around 0,0 of the plane geometry
|
||||
// Note: rotation.z is local Z, which after rotX(-90) is Global Y (Vertical)
|
||||
plane.rotation.z = -tileInstance.rotation * (Math.PI / 2);
|
||||
|
||||
// Calculate Center Offset for Positioning
|
||||
// Visual Center needs to be offset from Tile Origin (x,y)
|
||||
const midX = (tileDef.width - 1) / 2;
|
||||
const midY = (tileDef.length - 1) / 2;
|
||||
|
||||
// Rotate the offset vector based on tile rotation
|
||||
let dx, dy;
|
||||
const r = tileInstance.rotation;
|
||||
|
||||
if (r === 0) { dx = midX; dy = midY; }
|
||||
else if (r === 1) { dx = midY; dy = -midX; }
|
||||
else if (r === 2) { dx = -midX; dy = -midY; }
|
||||
else if (r === 3) { dx = -midY; dy = midX; }
|
||||
|
||||
const centerX = tileInstance.x + dx;
|
||||
const centerY = tileInstance.y + dy;
|
||||
|
||||
plane.position.set(centerX, 0.55, -centerY);
|
||||
|
||||
this.scene.add(plane);
|
||||
} else {
|
||||
console.warn(`[GameRenderer] details missing for texture render. def: ${!!tileDef}, inst: ${!!tileInstance}, tex: ${tileDef?.textures?.length}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
148
src/view/UIManager.js
Normal file
148
src/view/UIManager.js
Normal file
@@ -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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user