idlerpg.sh 0.1.0

package/dist/tui/sections/MapSection.js

@@ -0,0 +1,669 @@
+/**
+ * Map Section - Visual map with two rendering modes:
+ * 1. Dungeon: Tile-based grid (classic roguelike style)
+ * 2. Town: Node-link diagram with box-drawing characters
+ */
+
+!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="fbdefc1f-3be2-522e-b408-c468135e7ae5")}catch(e){}}();
+import { BaseSection } from '../core/BaseSection.js';
+import { ANSI } from '../Screen.js';
+// Box-drawing characters for town map
+const BOX = {
+    H: '─', // horizontal
+    V: '│', // vertical
+    TL: '┌', // top-left
+    TR: '┐', // top-right
+    BL: '└', // bottom-left
+    BR: '┘', // bottom-right
+    T: '┬', // T down
+    B: '┴', // T up
+    L: '├', // T right
+    R: '┤', // T left
+    X: '┼', // cross
+};
+// Dungeon tile characters
+const TILES = {
+    WALL: '#',
+    FLOOR: '.',
+    PLAYER: '@',
+    DOOR: '+',
+    CORRIDOR: '·',
+    UNKNOWN: ' ',
+    ENEMY: '!',
+    TREASURE: '$',
+    STAIRS: '>',
+    BOSS: 'B',
+};
+/**
+ * Map Section - Shows current location and connected rooms
+ */
+export class MapSection extends BaseSection {
+    state_data = null;
+    onTravel;
+    // Travel state for showing player movement on map
+    travelState = null;
+    // Zoom and pan state - using data-centric approach like mapscii
+    zoom = 1.0;
+    // Center in data coordinates (room position space)
+    // Use null to indicate uninitialized state
+    centerX = null;
+    centerY = null;
+    MIN_ZOOM = 0.5;
+    MAX_ZOOM = 2.5;
+    ZOOM_STEP = 0.25;
+    // Pan step is in data coordinates, scaled by zoom
+    BASE_PAN_STEP = 0.5;
+    constructor() {
+        const config = {
+            id: 'map',
+            title: 'Map',
+            canEnter: true,
+            hints: {
+                focused: '+/-: zoom  WASD: pan  R: reset  Enter: select destination',
+                entered: '↑↓: select room  Enter: travel  R: reset view  Esc: back',
+            },
+        };
+        super(config);
+    }
+    setOnTravel(callback) {
+        this.onTravel = callback;
+    }
+    update(state) {
+        this.state_data = state;
+    }
+    /**
+     * Set travel state for showing player movement on map
+     */
+    setTravelState(state) {
+        this.travelState = state;
+    }
+    /**
+     * Get map rendering mode from GameMap type
+     */
+    getMapMode() {
+        if (!this.state_data)
+            return 'town';
+        return this.state_data.currentMap.type;
+    }
+    renderContent(ctx) {
+        if (!this.state_data)
+            return;
+        const mode = this.getMapMode();
+        if (mode === 'dungeon') {
+            this.renderDungeonMap(ctx);
+        }
+        else {
+            this.renderTownMap(ctx);
+        }
+    }
+    // ===========================================================================
+    // DUNGEON MAP - Box-based rooms (clearer visualization)
+    // ===========================================================================
+    renderDungeonMap(ctx) {
+        const { screen, bounds } = ctx;
+        const { x, y, width, height } = bounds;
+        const mapX = x + 1;
+        const mapY = y + 1;
+        const mapWidth = width - 2;
+        const mapHeight = height - 3;
+        const rooms = Array.from(this.state_data.currentMap.rooms.values());
+        const currentRoom = this.state_data.currentRoom;
+        const connections = currentRoom.connections;
+        // Calculate room bounds for positioning
+        const gridBounds = this.calculateRoomBounds(rooms);
+        // Box dimensions for dungeon rooms (smaller than town)
+        const boxWidth = 8;
+        const boxHeight = 3;
+        const hSpacing = 10; // horizontal spacing between room centers
+        const vSpacing = 5; // vertical spacing between room centers
+        // Initialize center to player position if not set
+        if (this.centerX === null || this.centerY === null) {
+            this.centerX = currentRoom.position.x;
+            this.centerY = currentRoom.position.y;
+        }
+        // Apply zoom
+        const scale = this.zoom;
+        const scaledHSpacing = Math.round(hSpacing * scale);
+        const scaledVSpacing = Math.round(vSpacing * scale);
+        // Calculate the center of the map area
+        const mapCenterX = mapX + Math.floor(mapWidth / 2);
+        const mapCenterY = mapY + Math.floor(mapHeight / 2);
+        // Function to convert room position to screen position
+        const roomToScreen = (room) => {
+            const offsetX = (room.position.x - this.centerX) * scaledHSpacing;
+            const offsetY = (room.position.y - this.centerY) * scaledVSpacing;
+            return {
+                x: mapCenterX + offsetX,
+                y: mapCenterY + offsetY,
+            };
+        };
+        // First pass: draw connections
+        for (const room of rooms) {
+            const pos = roomToScreen(room);
+            for (const connId of room.connections) {
+                const connRoom = this.state_data.currentMap.rooms.get(connId);
+                if (!connRoom)
+                    continue;
+                const connPos = roomToScreen(connRoom);
+                // Only draw if target is to the right or below (avoid double-drawing)
+                if (connPos.x < pos.x || (connPos.x === pos.x && connPos.y < pos.y))
+                    continue;
+                // Draw connection line
+                const startX = pos.x + Math.floor(boxWidth / 2);
+                const startY = pos.y + 1;
+                const endX = connPos.x + Math.floor(boxWidth / 2);
+                const endY = connPos.y + 1;
+                // Simple L-shaped or straight connection
+                if (startY === endY) {
+                    // Horizontal connection
+                    for (let cx = Math.min(startX, endX) + 1; cx < Math.max(startX, endX); cx++) {
+                        if (cx >= mapX && cx < mapX + mapWidth && startY >= mapY && startY < mapY + mapHeight) {
+                            screen.write(cx, startY, '-', ANSI.fg.gray);
+                        }
+                    }
+                }
+                else if (startX === endX) {
+                    // Vertical connection
+                    for (let cy = Math.min(startY, endY) + 1; cy < Math.max(startY, endY); cy++) {
+                        if (startX >= mapX && startX < mapX + mapWidth && cy >= mapY && cy < mapY + mapHeight) {
+                            screen.write(startX, cy, '|', ANSI.fg.gray);
+                        }
+                    }
+                }
+                else {
+                    // L-shaped connection (horizontal first, then vertical)
+                    const midX = endX;
+                    // Horizontal segment
+                    for (let cx = Math.min(startX, midX) + 1; cx < Math.max(startX, midX); cx++) {
+                        if (cx >= mapX && cx < mapX + mapWidth && startY >= mapY && startY < mapY + mapHeight) {
+                            screen.write(cx, startY, '-', ANSI.fg.gray);
+                        }
+                    }
+                    // Vertical segment
+                    for (let cy = Math.min(startY, endY); cy <= Math.max(startY, endY); cy++) {
+                        if (midX >= mapX && midX < mapX + mapWidth && cy >= mapY && cy < mapY + mapHeight) {
+                            screen.write(midX, cy, '|', ANSI.fg.gray);
+                        }
+                    }
+                    // Corner
+                    if (midX >= mapX && midX < mapX + mapWidth && startY >= mapY && startY < mapY + mapHeight) {
+                        screen.write(midX, startY, '+', ANSI.fg.gray);
+                    }
+                }
+            }
+        }
+        // Second pass: draw room boxes
+        for (const room of rooms) {
+            const pos = roomToScreen(room);
+            const boxX = pos.x;
+            const boxY = pos.y;
+            // Check if room box is within visible area
+            if (boxX + boxWidth < mapX || boxX >= mapX + mapWidth ||
+                boxY + boxHeight < mapY || boxY >= mapY + mapHeight) {
+                continue;
+            }
+            const isCurrentRoom = room.id === currentRoom.id;
+            const isConnected = connections.includes(room.id);
+            const connIdx = isConnected ? connections.indexOf(room.id) : -1;
+            const isSelected = this.state.entered && connIdx === this.state.selectedIndex;
+            // Determine room color and symbol based on type
+            let borderFg = ANSI.fg.gray;
+            let contentFg = ANSI.fg.white;
+            let icon = '?';
+            if (room.type === 'combat') {
+                borderFg = ANSI.fg.red;
+                icon = '!';
+            }
+            else if (room.type === 'treasure') {
+                borderFg = ANSI.fg.yellow;
+                icon = '$';
+            }
+            else if (room.type === 'dungeon_entrance') {
+                borderFg = ANSI.fg.cyan;
+                icon = '>';
+            }
+            else if (room.type === 'rest') {
+                borderFg = ANSI.fg.blue;
+                icon = 'R';
+            }
+            else if (room.type === 'event') {
+                borderFg = ANSI.fg.magenta;
+                icon = '?';
+            }
+            else if (room.type === 'shop') {
+                borderFg = ANSI.fg.green;
+                icon = 'S';
+            }
+            else if (room.type === 'empty') {
+                borderFg = ANSI.fg.gray;
+                icon = '.';
+            }
+            if (isCurrentRoom) {
+                borderFg = ANSI.fg.brightGreen;
+                icon = '@';
+            }
+            if (isSelected) {
+                borderFg = ANSI.fg.brightCyan;
+            }
+            // Draw room box (3 lines)
+            const top = '+' + '-'.repeat(boxWidth - 2) + '+';
+            const bottom = '+' + '-'.repeat(boxWidth - 2) + '+';
+            // Room label: icon + short type
+            let label = icon;
+            if (isConnected && connIdx >= 0) {
+                label = `${connIdx + 1}${icon}`;
+            }
+            const middle = '|' + label.padStart(Math.floor((boxWidth - 2 + label.length) / 2)).padEnd(boxWidth - 2) + '|';
+            // Clip and draw each line
+            for (let row = 0; row < boxHeight; row++) {
+                const lineY = boxY + row;
+                if (lineY < mapY || lineY >= mapY + mapHeight)
+                    continue;
+                let line;
+                if (row === 0)
+                    line = top;
+                else if (row === boxHeight - 1)
+                    line = bottom;
+                else
+                    line = middle;
+                // Calculate visible portion
+                const startCol = Math.max(0, mapX - boxX);
+                const endCol = Math.min(boxWidth, mapX + mapWidth - boxX);
+                if (startCol < endCol) {
+                    const visiblePart = line.slice(startCol, endCol);
+                    const drawX = Math.max(boxX, mapX);
+                    screen.write(drawX, lineY, visiblePart, borderFg);
+                }
+            }
+        }
+        // Legend at bottom
+        const legendY = y + height - 2;
+        screen.write(x + 2, legendY, '@:You  !:Enemy  $:Loot  >:Exit  R:Rest  ?:Event', ANSI.fg.gray);
+    }
+    drawCorridor(buffer, colorBuffer, x1, y1, x2, y2, gridWidth, gridHeight) {
+        // Only draw if target is to the right or below (avoid double-drawing)
+        if (x2 < x1 || (x2 === x1 && y2 < y1))
+            return;
+        // Horizontal first, then vertical
+        const midX = x2;
+        const midY = y1;
+        // Horizontal segment
+        const hStart = Math.min(x1, midX);
+        const hEnd = Math.max(x1, midX);
+        for (let cx = hStart + 1; cx < hEnd; cx++) {
+            if (cx >= 0 && cx < gridWidth && y1 >= 0 && y1 < gridHeight) {
+                if (buffer[y1][cx] === TILES.UNKNOWN) {
+                    buffer[y1][cx] = TILES.CORRIDOR;
+                    colorBuffer[y1][cx] = { fg: ANSI.fg.gray };
+                }
+            }
+        }
+        // Vertical segment
+        const vStart = Math.min(midY, y2);
+        const vEnd = Math.max(midY, y2);
+        for (let cy = vStart + 1; cy < vEnd; cy++) {
+            if (midX >= 0 && midX < gridWidth && cy >= 0 && cy < gridHeight) {
+                if (buffer[cy][midX] === TILES.UNKNOWN) {
+                    buffer[cy][midX] = TILES.CORRIDOR;
+                    colorBuffer[cy][midX] = { fg: ANSI.fg.gray };
+                }
+            }
+        }
+    }
+    // ===========================================================================
+    // TOWN MAP - Node-link diagram with box-drawing characters
+    // ===========================================================================
+    renderTownMap(ctx) {
+        const { screen, bounds } = ctx;
+        const { x, y, width, height } = bounds;
+        // Viewport bounds (inside the box border)
+        const mapX = x + 1;
+        const mapY = y + 1;
+        const mapWidth = width - 2;
+        const mapHeight = height - 3;
+        const rooms = Array.from(this.state_data.currentMap.rooms.values());
+        const currentRoom = this.state_data.currentRoom;
+        const connections = currentRoom.connections;
+        // Calculate data bounds
+        const roomBounds = this.calculateRoomBounds(rooms);
+        // Initialize center to current room position if not set (first render or after reset)
+        // This ensures the player's room is always visible initially
+        if (this.centerX === null || this.centerY === null) {
+            this.centerX = currentRoom.position.x;
+            this.centerY = currentRoom.position.y;
+        }
+        // Node spacing in screen pixels - scales with zoom
+        const baseNodeWidth = 12;
+        const baseNodeHeight = 4;
+        const nodeWidth = Math.round(baseNodeWidth * this.zoom);
+        const nodeHeight = Math.round(baseNodeHeight * this.zoom);
+        // Screen center coordinates
+        const screenCenterX = mapX + Math.floor(mapWidth / 2);
+        const screenCenterY = mapY + Math.floor(mapHeight / 2);
+        // Helper to convert room data position to screen position
+        // centerX and centerY are guaranteed to be initialized at this point
+        const cx = this.centerX;
+        const cy = this.centerY;
+        const roomToScreen = (room) => {
+            // Position relative to the view center, scaled by nodeWidth/Height
+            const dx = (room.position.x - cx) * nodeWidth;
+            const dy = (room.position.y - cy) * nodeHeight;
+            return {
+                x: Math.round(screenCenterX + dx),
+                y: Math.round(screenCenterY + dy),
+            };
+        };
+        // First pass: Draw connections with box-drawing characters
+        for (const room of rooms) {
+            const fromPos = roomToScreen(room);
+            for (const connId of room.connections) {
+                const connRoom = this.state_data.currentMap.rooms.get(connId);
+                if (!connRoom)
+                    continue;
+                // Avoid double-drawing
+                if (connRoom.position.x < room.position.x ||
+                    (connRoom.position.x === room.position.x && connRoom.position.y < room.position.y)) {
+                    continue;
+                }
+                const toPos = roomToScreen(connRoom);
+                this.drawBoxConnection(screen, fromPos.x, fromPos.y, toPos.x, toPos.y, mapX, mapY, mapWidth, mapHeight);
+            }
+        }
+        // Second pass: Draw room nodes
+        for (const room of rooms) {
+            const pos = roomToScreen(room);
+            const isCurrentRoom = room.id === currentRoom.id;
+            const isConnected = connections.includes(room.id);
+            const connIdx = isConnected ? connections.indexOf(room.id) : -1;
+            const isSelected = this.state.entered && connIdx === this.state.selectedIndex;
+            // Determine style
+            let fg = ANSI.fg.gray;
+            let bg;
+            let borderFg = ANSI.fg.gray;
+            if (isCurrentRoom) {
+                fg = ANSI.fg.brightGreen;
+                borderFg = ANSI.fg.green;
+            }
+            else if (isSelected) {
+                fg = ANSI.fg.black;
+                bg = ANSI.bg.cyan;
+                borderFg = ANSI.fg.cyan;
+            }
+            else if (isConnected) {
+                fg = ANSI.fg.white;
+                borderFg = ANSI.fg.white;
+            }
+            // Draw node box - size adapts slightly with zoom
+            const boxWidth = Math.min(10, room.name.length + 2);
+            const boxX = pos.x - Math.floor(boxWidth / 2);
+            const boxY = pos.y - 1;
+            // Check if any part of the box is visible (not just top-left corner)
+            const boxVisible = boxX + boxWidth > mapX && boxX < mapX + mapWidth &&
+                boxY + 2 >= mapY && boxY < mapY + mapHeight;
+            if (!boxVisible)
+                continue;
+            // Top border - render if row is visible
+            if (boxY >= mapY && boxY < mapY + mapHeight) {
+                const top = BOX.TL + BOX.H.repeat(boxWidth - 2) + BOX.TR;
+                const startX = Math.max(mapX, boxX);
+                const endX = Math.min(mapX + mapWidth, boxX + boxWidth);
+                if (startX < endX) {
+                    const sliceStart = startX - boxX;
+                    const sliceEnd = endX - boxX;
+                    screen.write(startX, boxY, top.slice(sliceStart, sliceEnd), borderFg);
+                }
+            }
+            // Middle with name - render if row is visible
+            if (pos.y >= mapY && pos.y < mapY + mapHeight) {
+                const symbol = isCurrentRoom ? '@' : this.getRoomSymbol(room);
+                const label = `${symbol}${room.name}`.slice(0, boxWidth - 2);
+                const padded = label.padEnd(boxWidth - 2);
+                // Draw left border if visible
+                if (boxX >= mapX && boxX < mapX + mapWidth) {
+                    screen.write(boxX, pos.y, BOX.V, borderFg);
+                }
+                // Draw right border if visible
+                if (boxX + boxWidth - 1 >= mapX && boxX + boxWidth - 1 < mapX + mapWidth) {
+                    screen.write(boxX + boxWidth - 1, pos.y, BOX.V, borderFg);
+                }
+                // Draw content
+                const contentStartX = Math.max(mapX, boxX + 1);
+                const contentEndX = Math.min(mapX + mapWidth, boxX + boxWidth - 1);
+                if (contentStartX < contentEndX) {
+                    const sliceStart = contentStartX - (boxX + 1);
+                    const sliceEnd = contentEndX - (boxX + 1);
+                    screen.write(contentStartX, pos.y, padded.slice(sliceStart, sliceEnd), fg, bg);
+                }
+            }
+            // Bottom border - render if row is visible
+            if (boxY + 2 >= mapY && boxY + 2 < mapY + mapHeight) {
+                const bottom = BOX.BL + BOX.H.repeat(boxWidth - 2) + BOX.BR;
+                const startX = Math.max(mapX, boxX);
+                const endX = Math.min(mapX + mapWidth, boxX + boxWidth);
+                if (startX < endX) {
+                    const sliceStart = startX - boxX;
+                    const sliceEnd = endX - boxX;
+                    screen.write(startX, boxY + 2, bottom.slice(sliceStart, sliceEnd), borderFg);
+                }
+            }
+            // Selection number
+            if (isConnected && connIdx >= 0) {
+                const numX = pos.x + Math.floor(boxWidth / 2);
+                if (numX >= mapX && numX < mapX + mapWidth && pos.y >= mapY && pos.y < mapY + mapHeight) {
+                    screen.write(numX, pos.y, String(connIdx + 1), ANSI.fg.yellow);
+                }
+            }
+        }
+        // Render traveling player icon when in travel state
+        if (this.travelState) {
+            const fromRoom = this.state_data.currentMap.rooms.get(this.travelState.fromRoomId);
+            const toRoom = this.state_data.currentMap.rooms.get(this.travelState.toRoomId);
+            if (fromRoom && toRoom) {
+                const fromPos = roomToScreen(fromRoom);
+                const toPos = roomToScreen(toRoom);
+                // Linear interpolation for current position
+                const progress = this.travelState.progress;
+                const currentX = Math.round(fromPos.x + (toPos.x - fromPos.x) * progress);
+                const currentY = Math.round(fromPos.y + (toPos.y - fromPos.y) * progress);
+                // Check if within visible bounds
+                if (currentX >= mapX && currentX < mapX + mapWidth &&
+                    currentY >= mapY && currentY < mapY + mapHeight) {
+                    // Draw player icon with blinking effect
+                    const blink = Math.floor(Date.now() / 300) % 2 === 0;
+                    const icon = blink ? '*' : '@';
+                    screen.write(currentX, currentY, icon, ANSI.fg.brightYellow);
+                }
+            }
+        }
+        // Zoom and pan indicator - show in the map area, not the border
+        const zoomText = `Zoom:${Math.round(this.zoom * 100)}%`;
+        screen.write(mapX + 1, mapY, zoomText, ANSI.fg.gray);
+        // Display selected/current room info in the bottom-right corner
+        let selectedRoom = null;
+        if (this.state.entered && this.state.selectedIndex < connections.length) {
+            // Show selected connected room when entered
+            const selectedId = connections[this.state.selectedIndex];
+            selectedRoom = this.state_data.currentMap.rooms.get(selectedId) || null;
+        }
+        else {
+            // Show current room when just focused
+            selectedRoom = currentRoom;
+        }
+        if (selectedRoom) {
+            const symbol = selectedRoom.id === currentRoom.id ? '@' : this.getRoomSymbol(selectedRoom);
+            const roomInfo = `${symbol} ${selectedRoom.name} (${selectedRoom.type})`;
+            const infoX = x + width - roomInfo.length - 2;
+            const infoY = y + height - 2;
+            const infoColor = selectedRoom.id === currentRoom.id ? ANSI.fg.brightGreen : ANSI.fg.cyan;
+            screen.write(Math.max(x + 2, infoX), infoY, roomInfo.slice(0, width - 4), infoColor);
+        }
+        // Legend - left side
+        const legendY = y + height - 1;
+        screen.write(x + 2, legendY, `+/-:Zoom  WASD:Pan  R:Reset`, ANSI.fg.gray);
+    }
+    drawBoxConnection(screen, x1, y1, x2, y2, mapX, mapY, mapWidth, mapHeight) {
+        // Orthogonal connection: horizontal then vertical
+        const midX = x2;
+        const midY = y1;
+        // Horizontal segment
+        const hStart = Math.min(x1, midX) + 1;
+        const hEnd = Math.max(x1, midX);
+        for (let cx = hStart; cx < hEnd; cx++) {
+            if (this.isInBounds(cx, y1, mapX, mapY, mapWidth, mapHeight)) {
+                screen.write(cx, y1, BOX.H, ANSI.fg.gray);
+            }
+        }
+        // Corner
+        if (y1 !== y2 && this.isInBounds(midX, midY, mapX, mapY, mapWidth, mapHeight)) {
+            const corner = y2 > y1 ? (x2 > x1 ? BOX.TL : BOX.TR) : (x2 > x1 ? BOX.BL : BOX.BR);
+            screen.write(midX, midY, corner, ANSI.fg.gray);
+        }
+        // Vertical segment
+        const vStart = Math.min(midY, y2) + 1;
+        const vEnd = Math.max(midY, y2);
+        for (let cy = vStart; cy < vEnd; cy++) {
+            if (this.isInBounds(midX, cy, mapX, mapY, mapWidth, mapHeight)) {
+                screen.write(midX, cy, BOX.V, ANSI.fg.gray);
+            }
+        }
+    }
+    // ===========================================================================
+    // COMMON HELPERS
+    // ===========================================================================
+    calculateRoomBounds(rooms) {
+        if (rooms.length === 0) {
+            return { minX: 0, maxX: 0, minY: 0, maxY: 0 };
+        }
+        let minX = Infinity, maxX = -Infinity;
+        let minY = Infinity, maxY = -Infinity;
+        for (const room of rooms) {
+            minX = Math.min(minX, room.position.x);
+            maxX = Math.max(maxX, room.position.x);
+            minY = Math.min(minY, room.position.y);
+            maxY = Math.max(maxY, room.position.y);
+        }
+        return { minX, maxX, minY, maxY };
+    }
+    isInBounds(px, py, mapX, mapY, mapWidth, mapHeight) {
+        return px >= mapX && px < mapX + mapWidth && py >= mapY && py < mapY + mapHeight;
+    }
+    getRoomSymbol(room) {
+        const symbols = {
+            safe: '♦',
+            shop: 'S',
+            exit: '→',
+            start: '○',
+            enemy: '!',
+            boss: 'B',
+            treasure: '$',
+            trap: '^',
+            event: '?',
+            empty: '·',
+        };
+        return symbols[room.type] || '·';
+    }
+    getItemCount() {
+        return this.state_data?.currentRoom.connections.length || 0;
+    }
+    activateItem() {
+        if (!this.state_data)
+            return false;
+        const connections = this.state_data.currentRoom.connections;
+        if (this.state.selectedIndex < connections.length) {
+            this.onTravel?.(this.state.selectedIndex);
+            this.exit();
+            return true;
+        }
+        return false;
+    }
+    getMaxVisibleItems() {
+        return this.state_data?.currentRoom.connections.length || 0;
+    }
+    /**
+     * Helper to check if a key matches a character (checks both raw and name)
+     */
+    isKey(key, ...chars) {
+        const raw = key.raw?.toLowerCase();
+        const name = key.name?.toLowerCase();
+        for (const char of chars) {
+            const c = char.toLowerCase();
+            if (raw === c || name === c)
+                return true;
+        }
+        return false;
+    }
+    /**
+     * Handle zoom/pan controls - works when focused (not just entered)
+     * Pan moves the center in data coordinates (like mapscii)
+     */
+    handleZoomPan(key) {
+        // Pan step scales inversely with zoom (faster pan when zoomed out)
+        const panStep = this.BASE_PAN_STEP / this.zoom;
+        // Zoom controls - check both raw characters
+        if (key.raw === '+' || key.raw === '=' || key.sequence === '+') {
+            this.zoom = Math.min(this.MAX_ZOOM, this.zoom + this.ZOOM_STEP);
+            return true;
+        }
+        if (key.raw === '-' || key.raw === '_' || key.sequence === '-') {
+            this.zoom = Math.max(this.MIN_ZOOM, this.zoom - this.ZOOM_STEP);
+            return true;
+        }
+        // Initialize center if null (before any pan operation)
+        // This can happen if handleZoomPan is called before first render
+        if (this.centerX === null)
+            this.centerX = 0;
+        if (this.centerY === null)
+            this.centerY = 0;
+        // Pan controls (WASD) - move center in data coordinates
+        // Use isKey helper to check both key.raw and key.name
+        // W = up = decrease Y (move view up = center moves up in data space)
+        if (this.isKey(key, 'w')) {
+            this.centerY -= panStep;
+            return true;
+        }
+        // S = down = increase Y
+        if (this.isKey(key, 's')) {
+            this.centerY += panStep;
+            return true;
+        }
+        // A = left = decrease X
+        if (this.isKey(key, 'a')) {
+            this.centerX -= panStep;
+            return true;
+        }
+        // D = right = increase X
+        if (this.isKey(key, 'd')) {
+            this.centerX += panStep;
+            return true;
+        }
+        // Reset view - reset center to null (will be recalculated on next render)
+        if (this.isKey(key, 'r', '0')) {
+            this.zoom = 1.0;
+            this.centerX = null;
+            this.centerY = null;
+            return true;
+        }
+        return false;
+    }
+    handleCustomKey(key) {
+        return this.handleZoomPan(key);
+    }
+    /**
+     * Override handleKey to allow zoom/pan when focused OR entered
+     */
+    handleKey(key) {
+        // Always try zoom/pan first when focused or entered
+        if ((this.focused || this.state.entered) && this.handleZoomPan(key)) {
+            return true;
+        }
+        // For other keys, use default behavior (requires entered state)
+        return super.handleKey(key);
+    }
+    resetView() {
+        this.zoom = 1.0;
+        this.centerX = null;
+        this.centerY = null;
+    }
+}
+//# sourceMappingURL=MapSection.js.map
+//# debugId=fbdefc1f-3be2-522e-b408-c468135e7ae5