fix: player size, unplayable walls, NPC interaction, canvas sizing

- Player sprite: render 32x32 char at 1 tile (TILE_PX) instead of
  2x2 tiles (32*SCALE), matching NPC size on the game grid
- Wall data: completely rebuilt for both lab and town maps based on
  actual PNG layouts. Previous walls blocked spawn point, NPC access,
  and all exits. Now uses Set for O(1) collision lookups
- NPC dialog: was unreachable due to wall layout, causing player to
  interact with workshop tiles instead. Fixed by opening corridors
- Canvas: use window.innerWidth/Height directly instead of
  offsetWidth which gave wrong values before CSS recompute

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jose Luis
2026-03-20 16:19:49 +01:00
parent 75001e10e7
commit 9b2a25856e
3 changed files with 149 additions and 130 deletions

View File

@@ -21,8 +21,10 @@ export function initWorldRenderer() {
function resizeCanvas() {
if (!canvas) return;
canvas.width = canvas.offsetWidth || window.innerWidth;
canvas.height = canvas.offsetHeight || window.innerHeight;
// Always use full window size in world mode — don't rely on offsetWidth
// because CSS layout may not have recomputed yet on initial load
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// ==================== Camera ====================
@@ -69,7 +71,7 @@ export function renderWorld(timestamp) {
updateMovement(dt);
// Resize check
if (canvas.width !== canvas.offsetWidth || canvas.height !== canvas.offsetHeight) {
if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
resizeCanvas();
}
@@ -94,15 +96,12 @@ export function renderWorld(timestamp) {
}
// === Layer 3: Player ===
// Character sprite is 32x32 native (2 tiles tall)
// Position so bottom half aligns with player tile, top half overlaps above
const playerScreen = tileToScreen(
worldState.player.x + worldState.player.px,
worldState.player.y + worldState.player.py
);
// Offset upward by 1 tile since character is 2 tiles tall
const playerDrawX = playerScreen.x;
const playerDrawY = playerScreen.y - TILE_PX;
const playerDrawY = playerScreen.y;
const walkFrame = worldState.player.moving
? (Math.floor(Date.now() / 150) % 2) + 1 // alternates 1, 2