mudlet-map-renderer 0.0.25 → 1.0.0

package/demo/colors.json

@@ -0,0 +1 @@
+[{"envId":1,"colors":[128,0,0]},{"envId":2,"colors":[0,128,0]},{"envId":3,"colors":[128,128,0]},{"envId":4,"colors":[0,0,128]},{"envId":5,"colors":[128,0,128]},{"envId":6,"colors":[0,128,128]},{"envId":7,"colors":[192,192,192]},{"envId":8,"colors":[0,0,0]},{"envId":9,"colors":[255,0,0]},{"envId":10,"colors":[0,255,0]},{"envId":11,"colors":[255,255,0]},{"envId":12,"colors":[0,0,255]},{"envId":13,"colors":[255,0,255]},{"envId":14,"colors":[0,255,255]},{"envId":15,"colors":[255,255,255]},{"envId":16,"colors":[128,128,128]},{"envId":17,"colors":[0,0,95]},{"envId":18,"colors":[0,0,135]},{"envId":19,"colors":[0,0,175]},{"envId":20,"colors":[0,0,215]},{"envId":21,"colors":[0,0,255]},{"envId":22,"colors":[0,95,0]},{"envId":23,"colors":[0,95,95]},{"envId":24,"colors":[0,95,135]},{"envId":25,"colors":[0,95,175]},{"envId":26,"colors":[0,95,215]},{"envId":27,"colors":[0,95,255]},{"envId":28,"colors":[0,135,0]},{"envId":29,"colors":[0,135,95]},{"envId":30,"colors":[0,135,135]},{"envId":31,"colors":[0,135,175]},{"envId":32,"colors":[0,135,215]},{"envId":33,"colors":[0,135,255]},{"envId":34,"colors":[0,175,0]},{"envId":35,"colors":[0,175,95]},{"envId":36,"colors":[0,175,135]},{"envId":37,"colors":[0,175,175]},{"envId":38,"colors":[0,175,215]},{"envId":39,"colors":[0,175,255]},{"envId":40,"colors":[0,215,0]},{"envId":41,"colors":[0,215,95]},{"envId":42,"colors":[0,215,135]},{"envId":43,"colors":[0,215,175]},{"envId":44,"colors":[0,215,215]},{"envId":45,"colors":[0,215,255]},{"envId":46,"colors":[0,255,0]},{"envId":47,"colors":[0,255,95]},{"envId":48,"colors":[0,255,135]},{"envId":49,"colors":[0,255,175]},{"envId":50,"colors":[0,255,215]},{"envId":51,"colors":[0,255,255]},{"envId":52,"colors":[95,0,0]},{"envId":53,"colors":[95,0,95]},{"envId":54,"colors":[95,0,135]},{"envId":55,"colors":[95,0,175]},{"envId":56,"colors":[95,0,215]},{"envId":57,"colors":[95,0,255]},{"envId":58,"colors":[95,95,0]},{"envId":59,"colors":[95,95,95]},{"envId":60,"colors":[95,95,135]},{"envId":61,"colors":[95,95,175]},{"envId":62,"colors":[95,95,215]},{"envId":63,"colors":[95,95,255]},{"envId":64,"colors":[95,135,0]},{"envId":65,"colors":[95,135,95]},{"envId":66,"colors":[95,135,135]},{"envId":67,"colors":[95,135,175]},{"envId":68,"colors":[95,135,215]},{"envId":69,"colors":[95,135,255]},{"envId":70,"colors":[95,175,0]},{"envId":71,"colors":[95,175,95]},{"envId":72,"colors":[95,175,135]},{"envId":73,"colors":[95,175,175]},{"envId":74,"colors":[95,175,215]},{"envId":75,"colors":[95,175,255]},{"envId":76,"colors":[95,215,0]},{"envId":77,"colors":[95,215,95]},{"envId":78,"colors":[95,215,135]},{"envId":79,"colors":[95,215,175]},{"envId":80,"colors":[95,215,215]},{"envId":81,"colors":[95,215,255]},{"envId":82,"colors":[95,255,0]},{"envId":83,"colors":[95,255,95]},{"envId":84,"colors":[95,255,135]},{"envId":85,"colors":[95,255,175]},{"envId":86,"colors":[95,255,215]},{"envId":87,"colors":[95,255,255]},{"envId":88,"colors":[135,0,0]},{"envId":89,"colors":[135,0,95]},{"envId":90,"colors":[135,0,135]},{"envId":91,"colors":[135,0,175]},{"envId":92,"colors":[135,0,215]},{"envId":93,"colors":[135,0,255]},{"envId":94,"colors":[135,95,0]},{"envId":95,"colors":[135,95,95]},{"envId":96,"colors":[135,95,135]},{"envId":97,"colors":[135,95,175]},{"envId":98,"colors":[135,95,215]},{"envId":99,"colors":[135,95,255]},{"envId":100,"colors":[135,135,0]},{"envId":101,"colors":[135,135,95]},{"envId":102,"colors":[135,135,135]},{"envId":103,"colors":[135,135,175]},{"envId":104,"colors":[135,135,215]},{"envId":105,"colors":[135,135,255]},{"envId":106,"colors":[135,175,0]},{"envId":107,"colors":[135,175,95]},{"envId":108,"colors":[135,175,135]},{"envId":109,"colors":[135,175,175]},{"envId":110,"colors":[135,175,215]},{"envId":111,"colors":[135,175,255]},{"envId":112,"colors":[135,215,0]},{"envId":113,"colors":[135,215,95]},{"envId":114,"colors":[135,215,135]},{"envId":115,"colors":[135,215,175]},{"envId":116,"colors":[135,215,215]},{"envId":117,"colors":[135,215,255]},{"envId":118,"colors":[135,255,0]},{"envId":119,"colors":[135,255,95]},{"envId":120,"colors":[135,255,135]},{"envId":121,"colors":[135,255,175]},{"envId":122,"colors":[135,255,215]},{"envId":123,"colors":[135,255,255]},{"envId":124,"colors":[175,0,0]},{"envId":125,"colors":[175,0,95]},{"envId":126,"colors":[175,0,135]},{"envId":127,"colors":[175,0,175]},{"envId":128,"colors":[175,0,215]},{"envId":129,"colors":[175,0,255]},{"envId":130,"colors":[175,95,0]},{"envId":131,"colors":[175,95,95]},{"envId":132,"colors":[175,95,135]},{"envId":133,"colors":[175,95,175]},{"envId":134,"colors":[175,95,215]},{"envId":135,"colors":[175,95,255]},{"envId":136,"colors":[175,135,0]},{"envId":137,"colors":[175,135,95]},{"envId":138,"colors":[175,135,135]},{"envId":139,"colors":[175,135,175]},{"envId":140,"colors":[175,135,215]},{"envId":141,"colors":[175,135,255]},{"envId":142,"colors":[175,175,0]},{"envId":143,"colors":[175,175,95]},{"envId":144,"colors":[175,175,135]},{"envId":145,"colors":[175,175,175]},{"envId":146,"colors":[175,175,215]},{"envId":147,"colors":[175,175,255]},{"envId":148,"colors":[175,215,0]},{"envId":149,"colors":[175,215,95]},{"envId":150,"colors":[175,215,135]},{"envId":151,"colors":[175,215,175]},{"envId":152,"colors":[175,215,215]},{"envId":153,"colors":[175,215,255]},{"envId":154,"colors":[175,255,0]},{"envId":155,"colors":[175,255,95]},{"envId":156,"colors":[175,255,135]},{"envId":157,"colors":[175,255,175]},{"envId":158,"colors":[175,255,215]},{"envId":159,"colors":[175,255,255]},{"envId":160,"colors":[215,0,0]},{"envId":161,"colors":[215,0,95]},{"envId":162,"colors":[215,0,135]},{"envId":163,"colors":[215,0,175]},{"envId":164,"colors":[215,0,215]},{"envId":165,"colors":[215,0,255]},{"envId":166,"colors":[215,95,0]},{"envId":167,"colors":[215,95,95]},{"envId":168,"colors":[215,95,135]},{"envId":169,"colors":[215,95,175]},{"envId":170,"colors":[215,95,215]},{"envId":171,"colors":[215,95,255]},{"envId":172,"colors":[215,135,0]},{"envId":173,"colors":[215,135,95]},{"envId":174,"colors":[215,135,135]},{"envId":175,"colors":[215,135,175]},{"envId":176,"colors":[215,135,215]},{"envId":177,"colors":[215,135,255]},{"envId":178,"colors":[215,175,0]},{"envId":179,"colors":[215,175,95]},{"envId":180,"colors":[215,175,135]},{"envId":181,"colors":[215,175,175]},{"envId":182,"colors":[215,175,215]},{"envId":183,"colors":[215,175,255]},{"envId":184,"colors":[215,215,0]},{"envId":185,"colors":[215,215,95]},{"envId":186,"colors":[215,215,135]},{"envId":187,"colors":[215,215,175]},{"envId":188,"colors":[215,215,215]},{"envId":189,"colors":[215,215,255]},{"envId":190,"colors":[215,255,0]},{"envId":191,"colors":[215,255,95]},{"envId":192,"colors":[215,255,135]},{"envId":193,"colors":[215,255,175]},{"envId":194,"colors":[215,255,215]},{"envId":195,"colors":[215,255,255]},{"envId":196,"colors":[255,0,0]},{"envId":197,"colors":[255,0,95]},{"envId":198,"colors":[255,0,135]},{"envId":199,"colors":[255,0,175]},{"envId":200,"colors":[0,0,255]},{"envId":201,"colors":[0,255,0]},{"envId":202,"colors":[255,0,0]},{"envId":203,"colors":[165,42,42]},{"envId":204,"colors":[255,95,135]},{"envId":205,"colors":[255,95,175]},{"envId":206,"colors":[255,95,215]},{"envId":207,"colors":[255,95,255]},{"envId":208,"colors":[255,135,0]},{"envId":209,"colors":[255,135,95]},{"envId":210,"colors":[255,135,135]},{"envId":211,"colors":[255,135,175]},{"envId":212,"colors":[255,135,215]},{"envId":213,"colors":[255,135,255]},{"envId":214,"colors":[255,175,0]},{"envId":215,"colors":[255,175,95]},{"envId":216,"colors":[255,175,135]},{"envId":217,"colors":[255,175,175]},{"envId":218,"colors":[255,175,215]},{"envId":219,"colors":[255,175,255]},{"envId":220,"colors":[255,215,0]},{"envId":221,"colors":[255,215,95]},{"envId":222,"colors":[255,215,135]},{"envId":223,"colors":[255,215,175]},{"envId":224,"colors":[255,215,215]},{"envId":225,"colors":[255,215,255]},{"envId":226,"colors":[255,255,0]},{"envId":227,"colors":[255,255,95]},{"envId":228,"colors":[255,255,135]},{"envId":229,"colors":[255,255,175]},{"envId":230,"colors":[255,255,215]},{"envId":231,"colors":[255,255,255]},{"envId":232,"colors":[8,8,8]},{"envId":233,"colors":[18,18,18]},{"envId":234,"colors":[28,28,28]},{"envId":235,"colors":[38,38,38]},{"envId":236,"colors":[48,48,48]},{"envId":237,"colors":[58,58,58]},{"envId":238,"colors":[68,68,68]},{"envId":239,"colors":[78,78,78]},{"envId":240,"colors":[88,88,88]},{"envId":241,"colors":[98,98,98]},{"envId":242,"colors":[108,108,108]},{"envId":243,"colors":[118,118,118]},{"envId":244,"colors":[128,128,128]},{"envId":245,"colors":[138,138,138]},{"envId":246,"colors":[148,148,148]},{"envId":247,"colors":[158,158,158]},{"envId":248,"colors":[168,168,168]},{"envId":249,"colors":[178,178,178]},{"envId":250,"colors":[188,188,188]},{"envId":251,"colors":[198,198,198]},{"envId":252,"colors":[208,208,208]},{"envId":253,"colors":[218,218,218]},{"envId":254,"colors":[228,228,228]},{"envId":255,"colors":[238,238,238]},{"envId":257,"colors":[128,0,0]},{"envId":258,"colors":[0,128,0]},{"envId":259,"colors":[128,128,0]},{"envId":260,"colors":[0,0,128]},{"envId":261,"colors":[128,0,128]},{"envId":262,"colors":[0,128,128]},{"envId":263,"colors":[192,192,192]},{"envId":264,"colors":[0,0,0]},{"envId":265,"colors":[255,0,0]},{"envId":266,"colors":[0,255,0]},{"envId":267,"colors":[255,255,0]},{"envId":268,"colors":[0,0,255]},{"envId":269,"colors":[255,0,255]},{"envId":270,"colors":[0,255,255]},{"envId":271,"colors":[255,255,255]},{"envId":272,"colors":[128,128,128]},{"envId":293,"colors":[0,171,192]},{"envId":294,"colors":[139,255,0]},{"envId":295,"colors":[239,176,73]},{"envId":296,"colors":[163,151,235]},{"envId":297,"colors":[236,167,236]},{"envId":298,"colors":[22,232,196]},{"envId":299,"colors":[0,170,255]},{"envId":300,"colors":[0,196,255]},{"envId":301,"colors":[255,114,14]},{"envId":303,"colors":[170,139,89]},{"envId":400,"colors":[186,112,74]},{"envId":798,"colors":[255,140,0]},{"envId":799,"colors":[230,230,250]},{"envId":800,"colors":[30,144,255]},{"envId":801,"colors":[154,205,50]},{"envId":802,"colors":[85,107,47]},{"envId":803,"colors":[0,255,255]},{"envId":805,"colors":[107,142,35]},{"envId":806,"colors":[0,100,0]},{"envId":810,"colors":[255,0,0]},{"envId":811,"colors":[139,69,19]},{"envId":812,"colors":[230,230,250]},{"envId":813,"colors":[255,255,255]},{"envId":814,"colors":[34,139,34]},{"envId":823,"colors":[255,215,0]},{"envId":824,"colors":[47,79,79]},{"envId":825,"colors":[189,183,107]},{"envId":826,"colors":[184,134,11]},{"envId":830,"colors":[255,69,0]},{"envId":855,"colors":[160,82,45]}]

package/demo/index.html

@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Konva Universal Lib — Demo</title>
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            font-family: Inter, system-ui, sans-serif;
+            background-color: #000;
+            color: #fff;
+        }
+
+        body {
+            position: relative;
+            overflow: hidden;
+        }
+
+        #stage {
+            width: 100%;
+            height: 100%;
+        }
+
+        #hud {
+            position: absolute;
+            top: 1rem;
+            left: 1rem;
+            padding: 0.5rem 0.75rem;
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: 0.5rem;
+            font-size: 0.9rem;
+            line-height: 1.4;
+            pointer-events: auto;
+        }
+
+        #controls {
+            margin-top: 0.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        #controls label {
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
+            font-weight: 500;
+        }
+
+        #destination-form {
+            display: flex;
+            flex-direction: column;
+            gap: 0.35rem;
+        }
+
+        #destination-inputs {
+            display: flex;
+            gap: 0.35rem;
+        }
+
+        #destination-input {
+            width: 6rem;
+        }
+
+        #destination-status {
+            font-size: 0.8rem;
+            color: #c8f7ff;
+        }
+
+        #hud strong {
+            font-weight: 600;
+        }
+    </style>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+</head>
+<body>
+<div id="stage"></div>
+<div id="hud">
+    <div id="status">Loading map…</div>
+    <div id="walker-status"></div>
+    <div id="controls">
+        <label>
+            <input type="checkbox" id="exploration-toggle" checked>
+            Exploration overlay
+        </label>
+        <form id="destination-form">
+            <label for="destination-input">Destination room</label>
+            <div id="destination-inputs">
+                <input type="number" id="destination-input" min="1" placeholder="Room ID" />
+                <button type="submit">Set</button>
+                <button type="button" id="destination-clear">Clear</button>
+            </div>
+            <div id="destination-status"></div>
+        </form>
+    </div>
+</div>
+<script type="module" src="/main.ts"></script>
+</body>
+</html>

package/demo/main.ts

@@ -0,0 +1,389 @@
+import data from "./mapExport.json";
+import colors from "./colors.json";
+import {Renderer} from "@src";
+import MapReader from "@src/reader/MapReader";
+
+const stageElement = document.getElementById("stage") as HTMLDivElement;
+const statusElement = document.getElementById("status") as HTMLDivElement;
+const walkerStatusElement = document.getElementById("walker-status") as HTMLDivElement;
+const explorationToggle = document.getElementById("exploration-toggle") as HTMLInputElement | null;
+const destinationForm = document.getElementById("destination-form") as HTMLFormElement | null;
+const destinationInput = document.getElementById("destination-input") as HTMLInputElement | null;
+const destinationClearButton = document.getElementById("destination-clear") as HTMLButtonElement | null;
+const destinationStatusElement = document.getElementById("destination-status") as HTMLDivElement | null;
+
+const mapReader = new MapReader(data as MapData.Map, colors as MapData.Env[]);
+const startingRoomId = 1;
+
+const visitedRooms = mapReader.decorateWithExploration([startingRoomId]);
+
+const renderer = new Renderer(stageElement, mapReader);
+const startingRoom = mapReader.getRoom(startingRoomId);
+let currentRoomId = startingRoomId;
+const walkerState: { timeoutId: number | undefined } = { timeoutId: undefined };
+let destinationRoomId: number | undefined;
+let currentDestinationPath: number[] | undefined;
+
+if (startingRoom) {
+    const startingArea = mapReader.getExplorationArea(startingRoom.area);
+    startingArea?.addVisitedRoom(startingRoom.id);
+
+    renderer.setPosition(startingRoomId);
+    updateAreaStatus(startingRoom.area);
+    updateDestinationStatus("No destination set.");
+
+    walkerStatusElement.textContent = "Walker preparing first step…";
+    scheduleNextStep(600);
+} else {
+    statusElement.textContent = "Starting room not found.";
+    walkerStatusElement.textContent = "Walker is idle.";
+}
+
+explorationToggle?.addEventListener("change", () => {
+    if (explorationToggle.checked) {
+        mapReader.decorateWithExploration(visitedRooms);
+    } else {
+        mapReader.clearExplorationDecoration();
+    }
+    renderer.setPosition(currentRoomId);
+    const currentRoom = mapReader.getRoom(currentRoomId);
+    if (currentRoom) {
+        updateAreaStatus(currentRoom.area);
+    }
+    updateDestinationGuidance();
+});
+
+if (explorationToggle) {
+    explorationToggle.checked = mapReader.isExplorationEnabled();
+}
+
+destinationForm?.addEventListener("submit", event => {
+    event.preventDefault();
+    if (!destinationInput) {
+        return;
+    }
+    const roomId = Number.parseInt(destinationInput.value, 10);
+    if (Number.isNaN(roomId)) {
+        updateDestinationStatus("Enter a valid room id.");
+        return;
+    }
+
+    const room = mapReader.getRoom(roomId);
+    if (!room) {
+        updateDestinationStatus(`Room ${roomId} not found.`);
+        return;
+    }
+
+    destinationRoomId = roomId;
+    destinationInput.value = roomId.toString();
+    updateDestinationGuidance();
+});
+
+destinationClearButton?.addEventListener("click", () => {
+    destinationRoomId = undefined;
+    currentDestinationPath = undefined;
+    updateDestinationStatus("Destination cleared. Walking freely.");
+    renderer.clearPaths();
+    if (destinationInput) {
+        destinationInput.value = "";
+    }
+});
+
+const exitNumberToDirection: Record<number, MapData.direction> = {
+    1: "north",
+    2: "northeast",
+    3: "northwest",
+    4: "east",
+    5: "west",
+    6: "south",
+    7: "southeast",
+    8: "southwest",
+    9: "up",
+    10: "down",
+    11: "in",
+    12: "out",
+};
+
+function getRoomExits(room: MapData.Room) {
+    const lockedDirections = new Set(
+        (room.exitLocks ?? [])
+            .map(lockId => exitNumberToDirection[lockId])
+            .filter((direction): direction is MapData.direction => Boolean(direction)),
+    );
+    const lockedSpecialTargets = new Set(room.mSpecialExitLocks ?? []);
+
+    const exits: number[] = [];
+
+    Object.entries(room.exits ?? {}).forEach(([direction, exitId]) => {
+        if (lockedDirections.has(direction as MapData.direction)) {
+            return;
+        }
+        if (exitId > 0) {
+            exits.push(exitId);
+        }
+    });
+
+    Object.values(room.specialExits ?? {}).forEach(exitId => {
+        if (typeof exitId !== "number" || exitId <= 0) {
+            return;
+        }
+        if (lockedSpecialTargets.has(exitId)) {
+            return;
+        }
+        exits.push(exitId);
+    });
+
+    return exits;
+}
+
+function updateAreaStatus(areaId: number) {
+    if (!mapReader.isExplorationEnabled()) {
+        statusElement.textContent = `Area ${areaId}`;
+        return;
+    }
+
+    const area = mapReader.getExplorationArea(areaId);
+    if (!area) {
+        statusElement.textContent = `Area ${areaId}`;
+        return;
+    }
+
+    const visited = area.getVisitedRoomCount();
+    const total = area.getTotalRoomCount();
+    statusElement.innerHTML = `<strong>Area ${areaId}</strong><br/>Visited ${visited} of ${total} rooms`;
+}
+
+function randomDelay() {
+    return 800 + Math.random() * 1200;
+}
+
+const PREFERRED_PATH_PROBABILITY = 0.7;
+
+function findPreferredRoomId(room: MapData.Room) {
+    const queue: number[] = [room.id];
+    const cameFrom = new Map<number, number | null>([[room.id, null]]);
+
+    while (queue.length) {
+        const currentId = queue.shift()!;
+        const currentRoom = mapReader.getRoom(currentId);
+        if (!currentRoom) {
+            continue;
+        }
+
+        const area = mapReader.getExplorationArea(currentRoom.area);
+        const isVisited = area?.hasVisitedRoom(currentId) ?? false;
+        const isStartRoom = currentId === room.id;
+        if (!isVisited && !isStartRoom) {
+            let stepId = currentId;
+            let parentId = cameFrom.get(stepId) ?? null;
+            while (parentId !== null && parentId !== room.id) {
+                stepId = parentId;
+                parentId = cameFrom.get(stepId) ?? null;
+            }
+            return stepId;
+        }
+
+        for (const neighbourId of getRoomExits(currentRoom)) {
+            if (!cameFrom.has(neighbourId)) {
+                cameFrom.set(neighbourId, currentId);
+                queue.push(neighbourId);
+            }
+        }
+    }
+
+    return undefined;
+}
+
+function pickNextRoom(room: MapData.Room) {
+    const exits = getRoomExits(room)
+        .map(exitRoomId => mapReader.getRoom(exitRoomId))
+        .filter((candidate): candidate is MapData.Room => Boolean(candidate));
+
+    if (!exits.length) {
+        return undefined;
+    }
+
+    const preferredExplorationRoomId = findPreferredRoomId(room);
+    if (preferredExplorationRoomId !== undefined) {
+        const preferredRoom = exits.find(candidate => candidate.id === preferredExplorationRoomId);
+        if (preferredRoom && Math.random() < PREFERRED_PATH_PROBABILITY) {
+            return preferredRoom;
+        }
+    }
+
+    const unvisited = exits.filter(candidate => {
+        const area = mapReader.getExplorationArea(candidate.area);
+        if (area) {
+            return !area.hasVisitedRoom(candidate.id);
+        }
+        return !visitedRooms?.has(candidate.id);
+    });
+
+    const preferredDestinationRoomId = getNextStepTowardsDestination(room.id);
+    const preferredRoom = preferredDestinationRoomId !== undefined
+        ? exits.find(candidate => candidate.id === preferredDestinationRoomId)
+        : undefined;
+
+    if (preferredRoom) {
+        const bias = unvisited.length ? 0.75 : 0.55;
+        if (Math.random() < bias) {
+            return preferredRoom;
+        }
+    }
+
+    const choices = unvisited.length ? unvisited : exits;
+
+    return choices[Math.floor(Math.random() * choices.length)];
+}
+
+function scheduleNextStep(delay = randomDelay()) {
+    const {timeoutId} = walkerState;
+    if (timeoutId !== undefined) {
+        window.clearTimeout(timeoutId);
+    }
+    walkerState.timeoutId = window.setTimeout(walkStep, delay);
+    walkerStatusElement.textContent = `Next step in ${(delay / 1000).toFixed(1)}s`;
+}
+
+function walkStep() {
+    const room = mapReader.getRoom(currentRoomId);
+    if (!room) {
+        walkerStatusElement.textContent = "Walker lost its position.";
+        return;
+    }
+
+    const nextRoom = pickNextRoom(room);
+    if (!nextRoom) {
+        walkerStatusElement.textContent = "Walker reached a dead end.";
+        scheduleNextStep();
+        return;
+    }
+
+    const explorationArea = mapReader.getExplorationArea(nextRoom.area);
+    if (explorationArea) {
+        explorationArea.addVisitedRoom(nextRoom.id);
+    } else {
+        visitedRooms?.add(nextRoom.id);
+    }
+
+    currentRoomId = nextRoom.id;
+
+    renderer.setPosition(nextRoom.id);
+    updateAreaStatus(nextRoom.area);
+    updateDestinationGuidance();
+
+    walkerStatusElement.textContent = `Walker moved to room ${nextRoom.id}`;
+    scheduleNextStep();
+}
+
+function getNextStepTowardsDestination(fromRoomId: number) {
+    if (!destinationRoomId || destinationRoomId === fromRoomId) {
+        return undefined;
+    }
+    if (currentDestinationPath && currentDestinationPath[0] === fromRoomId) {
+        if (currentDestinationPath.length >= 2) {
+            return currentDestinationPath[1];
+        }
+        return undefined;
+    }
+    const path = findPathBetweenRooms(fromRoomId, destinationRoomId);
+    if (!path || path.length < 2) {
+        return undefined;
+    }
+    currentDestinationPath = path;
+    return path[1];
+}
+
+function findPathBetweenRooms(startRoomId: number, targetRoomId: number) {
+    const startRoom = mapReader.getRoom(startRoomId);
+    const targetRoom = mapReader.getRoom(targetRoomId);
+    if (!startRoom || !targetRoom) {
+        return undefined;
+    }
+
+    if (startRoomId === targetRoomId) {
+        return [startRoomId];
+    }
+
+    const queue: number[] = [startRoomId];
+    const visited = new Set<number>([startRoomId]);
+    const parents = new Map<number, number>();
+
+    while (queue.length) {
+        const currentId = queue.shift();
+        if (currentId === undefined) {
+            break;
+        }
+        const currentRoom = mapReader.getRoom(currentId);
+        if (!currentRoom) {
+            continue;
+        }
+
+        for (const neighborId of getRoomExits(currentRoom)) {
+            if (visited.has(neighborId)) {
+                continue;
+            }
+            visited.add(neighborId);
+            parents.set(neighborId, currentId);
+
+            if (neighborId === targetRoomId) {
+                return buildPathFromParents(targetRoomId, parents, startRoomId);
+            }
+
+            queue.push(neighborId);
+        }
+    }
+
+    return undefined;
+}
+
+function buildPathFromParents(targetId: number, parents: Map<number, number>, startId: number) {
+    const path = [targetId];
+    let current = targetId;
+
+    while (current !== startId) {
+        const parent = parents.get(current);
+        if (parent === undefined) {
+            return undefined;
+        }
+        path.push(parent);
+        current = parent;
+    }
+
+    path.reverse();
+    return path;
+}
+
+function updateDestinationStatus(message: string) {
+    if (!destinationStatusElement) {
+        return;
+    }
+    destinationStatusElement.textContent = message;
+}
+
+function updateDestinationGuidance() {
+    if (!destinationRoomId) {
+        updateDestinationStatus("No destination set.");
+        currentDestinationPath = undefined;
+        return;
+    }
+
+    const path = findPathBetweenRooms(currentRoomId, destinationRoomId);
+    renderer.clearPaths();
+
+    if (!path) {
+        updateDestinationStatus(`No route to room ${destinationRoomId}. Wandering randomly.`);
+        currentDestinationPath = undefined;
+        return;
+    }
+
+    if (path.length < 2) {
+        updateDestinationStatus(`Already at destination room ${destinationRoomId}.`);
+        currentDestinationPath = path;
+        return;
+    }
+
+    renderer.renderPath(path);
+    updateDestinationStatus(`Biasing towards room ${destinationRoomId} (${path.length - 1} steps away).`);
+    currentDestinationPath = path;
+}