@react-text-game/core 0.1.0

package/dist/tests/interactiveMap.test.js

@@ -0,0 +1,1003 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { Game } from "../game";
+import { newInteractiveMap } from "../passages/interactiveMap/fabric";
+import { InteractiveMap } from "../passages/interactiveMap/interactiveMap";
+import { Storage } from "../storage";
+// Counter for unique IDs
+let testCounter = 0;
+function uniqueId(prefix) {
+    return `${prefix}-${testCounter++}`;
+}
+describe("InteractiveMap", () => {
+    beforeEach(async () => {
+        // Clear storage
+        Storage.setState({});
+        // Re-initialize the game for each test
+        await Game.init({ gameName: "Test Game", isDevMode: true });
+    });
+    afterEach(() => {
+        // Reset game state after each test
+        Game._resetForTesting();
+    });
+    describe("Constructor", () => {
+        test("creates an interactive map with id and options", () => {
+            const id = uniqueId("map");
+            const options = {
+                image: "/map.jpg",
+                hotspots: [],
+            };
+            const map = new InteractiveMap(id, options);
+            expect(map.id).toBe(id);
+            expect(map.type).toBe("interactiveMap");
+        });
+        test("creates a map with complete options", () => {
+            const id = uniqueId("map");
+            const options = {
+                caption: "World Map",
+                image: "/map.jpg",
+                bgImage: "/bg.jpg",
+                hotspots: [],
+                props: { bgOpacity: 0.5 },
+                classNames: { container: "custom-container" },
+            };
+            const map = new InteractiveMap(id, options);
+            expect(map.id).toBe(id);
+            expect(map.type).toBe("interactiveMap");
+        });
+    });
+    describe("Factory Function", () => {
+        test("newInteractiveMap creates an InteractiveMap instance", () => {
+            const id = uniqueId("map");
+            const options = {
+                image: "/map.jpg",
+                hotspots: [],
+            };
+            const map = newInteractiveMap(id, options);
+            expect(map).toBeInstanceOf(InteractiveMap);
+            expect(map.id).toBe(id);
+        });
+        test("newInteractiveMap with full options", () => {
+            const id = uniqueId("map");
+            const options = {
+                caption: "Test Map",
+                image: "/test.jpg",
+                bgImage: "/bg.jpg",
+                hotspots: [],
+            };
+            const map = newInteractiveMap(id, options);
+            expect(map).toBeInstanceOf(InteractiveMap);
+            expect(map.id).toBe(id);
+        });
+    });
+    describe("Display Method - Basic", () => {
+        test("displays map with static image", () => {
+            const options = {
+                image: "/world-map.jpg",
+                hotspots: [],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.image).toBe("/world-map.jpg");
+            expect(result.hotspots).toHaveLength(0);
+        });
+        test("displays map with dynamic image function", () => {
+            const options = {
+                image: () => "/dynamic-map.jpg",
+                hotspots: [],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.image).toBe("/dynamic-map.jpg");
+        });
+        test("displays map with background image", () => {
+            const options = {
+                image: "/map.jpg",
+                bgImage: "/background.jpg",
+                hotspots: [],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.image).toBe("/map.jpg");
+            expect(result.bgImage).toBe("/background.jpg");
+        });
+        test("displays map with dynamic background image", () => {
+            const options = {
+                image: "/map.jpg",
+                bgImage: () => "/dynamic-bg.jpg",
+                hotspots: [],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.bgImage).toBe("/dynamic-bg.jpg");
+        });
+        test("displays map with caption", () => {
+            const options = {
+                caption: "Kingdom Map",
+                image: "/map.jpg",
+                hotspots: [],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.caption).toBe("Kingdom Map");
+        });
+        test("displays map with props", () => {
+            const options = {
+                image: "/map.jpg",
+                hotspots: [],
+                props: { bgOpacity: 0.7 },
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.props?.bgOpacity).toBe(0.7);
+        });
+        test("displays map with classNames", () => {
+            const options = {
+                image: "/map.jpg",
+                hotspots: [],
+                classNames: {
+                    container: "container-class",
+                    topHotspots: "top-class",
+                    bottomHotspots: "bottom-class",
+                    leftHotspots: "left-class",
+                    rightHotspots: "right-class",
+                },
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.classNames?.container).toBe("container-class");
+            expect(result.classNames?.topHotspots).toBe("top-class");
+            expect(result.classNames?.bottomHotspots).toBe("bottom-class");
+            expect(result.classNames?.leftHotspots).toBe("left-class");
+            expect(result.classNames?.rightHotspots).toBe("right-class");
+        });
+    });
+    describe("Hotspot Types - Map Label", () => {
+        test("displays map with label hotspot", () => {
+            const hotspot = {
+                type: "label",
+                content: "Village",
+                position: { x: 30, y: 40 },
+                action: () => { },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(1);
+            expect(result.hotspots[0]?.type).toBe("label");
+            expect(result.hotspots[0].content).toBe("Village");
+            expect(result.hotspots[0].position).toEqual({
+                x: 30,
+                y: 40,
+            });
+        });
+        test("label hotspot with dynamic content", () => {
+            const hotspot = {
+                type: "label",
+                content: () => "Dynamic Label",
+                position: { x: 50, y: 50 },
+                action: () => { },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            // Dynamic content remains as function (resolved by UI layer)
+            const resultHotspot = result.hotspots[0];
+            expect(typeof resultHotspot.content).toBe("function");
+            if (typeof resultHotspot.content === "function") {
+                expect(resultHotspot.content()).toBe("Dynamic Label");
+            }
+        });
+        test("label hotspot with dynamic position", () => {
+            const hotspot = {
+                type: "label",
+                content: "Test",
+                position: { x: () => 25, y: () => 75 },
+                action: () => { },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            const pos = result.hotspots[0].position;
+            expect(typeof pos.x).toBe("function");
+            expect(typeof pos.y).toBe("function");
+            if (typeof pos.x === "function" && typeof pos.y === "function") {
+                expect(pos.x()).toBe(25);
+                expect(pos.y()).toBe(75);
+            }
+        });
+        test("label hotspot with all properties", () => {
+            const hotspot = {
+                type: "label",
+                id: "village-hotspot",
+                content: "Village",
+                position: { x: 30, y: 40 },
+                action: () => { },
+                isDisabled: false,
+                tooltip: {
+                    content: "Click to visit village",
+                    position: "top",
+                },
+                props: {
+                    variant: "bordered",
+                    color: "primary",
+                    classNames: { button: "custom-button" },
+                },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            const resultHotspot = result.hotspots[0];
+            expect(resultHotspot.id).toBe("village-hotspot");
+            expect(resultHotspot.isDisabled).toBe(false);
+            expect(resultHotspot.tooltip?.content).toBe("Click to visit village");
+            expect(resultHotspot.tooltip?.position).toBe("top");
+            expect(resultHotspot.props?.variant).toBe("bordered");
+            expect(resultHotspot.props?.color).toBe("primary");
+            expect(resultHotspot.props?.classNames?.button).toBe("custom-button");
+        });
+        test("label hotspot with dynamic disabled state", () => {
+            const hotspot = {
+                type: "label",
+                content: "Shop",
+                position: { x: 50, y: 50 },
+                action: () => { },
+                isDisabled: () => true,
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            const resultHotspot = result.hotspots[0];
+            expect(typeof resultHotspot.isDisabled).toBe("function");
+            if (typeof resultHotspot.isDisabled === "function") {
+                expect(resultHotspot.isDisabled()).toBe(true);
+            }
+        });
+        test("label hotspot with dynamic tooltip", () => {
+            const hotspot = {
+                type: "label",
+                content: "Door",
+                position: { x: 50, y: 50 },
+                action: () => { },
+                tooltip: {
+                    content: () => "Dynamic tooltip",
+                    position: "bottom",
+                },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            const resultHotspot = result.hotspots[0];
+            expect(typeof resultHotspot.tooltip?.content).toBe("function");
+            if (typeof resultHotspot.tooltip?.content === "function") {
+                expect(resultHotspot.tooltip.content()).toBe("Dynamic tooltip");
+            }
+        });
+    });
+    describe("Hotspot Types - Map Image", () => {
+        test("displays map with image hotspot", () => {
+            const hotspot = {
+                type: "image",
+                content: { idle: "/icon.png" },
+                position: { x: 60, y: 70 },
+                action: () => { },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(1);
+            expect(result.hotspots[0]?.type).toBe("image");
+            expect(result.hotspots[0].content.idle).toBe("/icon.png");
+        });
+        test("image hotspot with all image states", () => {
+            const hotspot = {
+                type: "image",
+                content: {
+                    idle: "/idle.png",
+                    hover: "/hover.png",
+                    active: "/active.png",
+                    disabled: "/disabled.png",
+                },
+                position: { x: 50, y: 50 },
+                action: () => { },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            const resultHotspot = result.hotspots[0];
+            expect(resultHotspot.content.idle).toBe("/idle.png");
+            expect(resultHotspot.content.hover).toBe("/hover.png");
+            expect(resultHotspot.content.active).toBe("/active.png");
+            expect(resultHotspot.content.disabled).toBe("/disabled.png");
+        });
+        test("image hotspot with dynamic images", () => {
+            const hotspot = {
+                type: "image",
+                content: {
+                    idle: () => "/dynamic-idle.png",
+                    hover: () => "/dynamic-hover.png",
+                },
+                position: { x: 50, y: 50 },
+                action: () => { },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            const resultHotspot = result.hotspots[0];
+            expect(typeof resultHotspot.content.idle).toBe("function");
+            expect(typeof resultHotspot.content.hover).toBe("function");
+        });
+        test("image hotspot with zoom and classNames", () => {
+            const hotspot = {
+                type: "image",
+                content: { idle: "/icon.png" },
+                position: { x: 50, y: 50 },
+                action: () => { },
+                props: {
+                    zoom: "150%",
+                    classNames: {
+                        container: "custom-container",
+                        idle: "idle-class",
+                        hover: "hover-class",
+                        active: "active-class",
+                        disabled: "disabled-class",
+                    },
+                },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            const resultHotspot = result.hotspots[0];
+            expect(resultHotspot.props?.zoom).toBe("150%");
+            expect(resultHotspot.props?.classNames?.container).toBe("custom-container");
+            expect(resultHotspot.props?.classNames?.idle).toBe("idle-class");
+            expect(resultHotspot.props?.classNames?.hover).toBe("hover-class");
+            expect(resultHotspot.props?.classNames?.active).toBe("active-class");
+            expect(resultHotspot.props?.classNames?.disabled).toBe("disabled-class");
+        });
+    });
+    describe("Hotspot Types - Side Label", () => {
+        test("displays map with side label hotspot - top", () => {
+            const hotspot = {
+                type: "label",
+                content: "Menu",
+                position: "top",
+                action: () => { },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(1);
+            expect(result.hotspots[0].position).toBe("top");
+        });
+        test("side label hotspots on all sides", () => {
+            const options = {
+                image: "/map.jpg",
+                hotspots: [
+                    {
+                        type: "label",
+                        content: "Top",
+                        position: "top",
+                        action: () => { },
+                    },
+                    {
+                        type: "label",
+                        content: "Bottom",
+                        position: "bottom",
+                        action: () => { },
+                    },
+                    {
+                        type: "label",
+                        content: "Left",
+                        position: "left",
+                        action: () => { },
+                    },
+                    {
+                        type: "label",
+                        content: "Right",
+                        position: "right",
+                        action: () => { },
+                    },
+                ],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(4);
+            expect(result.hotspots[0].position).toBe("top");
+            expect(result.hotspots[1].position).toBe("bottom");
+            expect(result.hotspots[2].position).toBe("left");
+            expect(result.hotspots[3].position).toBe("right");
+        });
+    });
+    describe("Hotspot Types - Side Image", () => {
+        test("displays map with side image hotspot", () => {
+            const hotspot = {
+                type: "image",
+                content: { idle: "/compass.png" },
+                position: "bottom",
+                action: () => { },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(1);
+            expect(result.hotspots[0].position).toBe("bottom");
+            expect(result.hotspots[0].content.idle).toBe("/compass.png");
+        });
+        test("side image hotspots with all image states", () => {
+            const hotspot = {
+                type: "image",
+                content: {
+                    idle: "/idle.png",
+                    hover: "/hover.png",
+                    active: "/active.png",
+                    disabled: "/disabled.png",
+                },
+                position: "left",
+                action: () => { },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [hotspot],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            const resultHotspot = result.hotspots[0];
+            expect(resultHotspot.content.idle).toBe("/idle.png");
+            expect(resultHotspot.content.hover).toBe("/hover.png");
+            expect(resultHotspot.content.active).toBe("/active.png");
+            expect(resultHotspot.content.disabled).toBe("/disabled.png");
+        });
+    });
+    describe("Hotspot Types - Menu", () => {
+        test("displays map with menu hotspot", () => {
+            const menu = {
+                type: "menu",
+                position: { x: 50, y: 50 },
+                items: [
+                    {
+                        type: "label",
+                        content: "Option 1",
+                        action: () => { },
+                    },
+                    {
+                        type: "label",
+                        content: "Option 2",
+                        action: () => { },
+                    },
+                ],
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [menu],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(1);
+            expect(result.hotspots[0]?.type).toBe("menu");
+            expect(result.hotspots[0].items).toHaveLength(2);
+        });
+        test("menu with direction and className", () => {
+            const menu = {
+                type: "menu",
+                position: { x: 50, y: 50 },
+                direction: "horizontal",
+                items: [
+                    {
+                        type: "label",
+                        content: "Item 1",
+                        action: () => { },
+                    },
+                ],
+                props: { className: "menu-class" },
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [menu],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            const resultMenu = result.hotspots[0];
+            expect(resultMenu.direction).toBe("horizontal");
+            expect(resultMenu.props?.className).toBe("menu-class");
+        });
+        test("menu with dynamic position", () => {
+            const menu = {
+                type: "menu",
+                position: { x: () => 25, y: () => 75 },
+                items: [
+                    {
+                        type: "label",
+                        content: "Item",
+                        action: () => { },
+                    },
+                ],
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [menu],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            const resultMenu = result.hotspots[0];
+            expect(typeof resultMenu.position.x).toBe("function");
+            expect(typeof resultMenu.position.y).toBe("function");
+            if (typeof resultMenu.position.x === "function" &&
+                typeof resultMenu.position.y === "function") {
+                expect(resultMenu.position.x()).toBe(25);
+                expect(resultMenu.position.y()).toBe(75);
+            }
+        });
+        test("menu with conditional items", () => {
+            const menu = {
+                type: "menu",
+                position: { x: 50, y: 50 },
+                items: [
+                    {
+                        type: "label",
+                        content: "Always",
+                        action: () => { },
+                    },
+                    () => undefined, // Conditional item that's filtered out
+                    {
+                        type: "label",
+                        content: "Also always",
+                        action: () => { },
+                    },
+                ],
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [menu],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            const resultMenu = result.hotspots[0];
+            // The menu itself is not filtered, but the conditional logic
+            // would happen at render time in the UI
+            expect(resultMenu.items).toHaveLength(3);
+        });
+    });
+    describe("Dynamic Hotspots", () => {
+        test("filters out undefined hotspots", () => {
+            const options = {
+                image: "/map.jpg",
+                hotspots: [
+                    {
+                        type: "label",
+                        content: "Visible",
+                        position: { x: 50, y: 50 },
+                        action: () => { },
+                    },
+                    () => undefined, // Conditional hotspot
+                    {
+                        type: "label",
+                        content: "Also visible",
+                        position: { x: 60, y: 60 },
+                        action: () => { },
+                    },
+                ],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(2);
+            expect(result.hotspots[0].content).toBe("Visible");
+            expect(result.hotspots[1].content).toBe("Also visible");
+        });
+        test("processes hotspot functions with props", () => {
+            let receivedProps = null;
+            const options = {
+                image: "/map.jpg",
+                hotspots: [
+                    // @ts-expect-error TS2322
+                    (props) => {
+                        receivedProps = props;
+                        return {
+                            type: "label",
+                            content: "Test",
+                            position: { x: 50, y: 50 },
+                            action: () => { },
+                        };
+                    },
+                ],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const testProps = { hasKey: true, level: 5 };
+            map.display(testProps);
+            expect(receivedProps).toEqual(testProps);
+        });
+        test("conditional hotspot based on props", () => {
+            const options = {
+                image: "/map.jpg",
+                hotspots: [
+                    // @ts-expect-error TS2322
+                    (props) => props.hasKey
+                        ? {
+                            type: "label",
+                            content: "Secret Door",
+                            position: { x: 50, y: 50 },
+                            action: () => { },
+                        }
+                        : undefined,
+                ],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const resultWithKey = map.display({ hasKey: true });
+            expect(resultWithKey.hotspots).toHaveLength(1);
+            const resultWithoutKey = map.display({ hasKey: false });
+            expect(resultWithoutKey.hotspots).toHaveLength(0);
+        });
+        test("multiple conditional hotspots", () => {
+            const options = {
+                image: "/map.jpg",
+                hotspots: [
+                    // @ts-expect-error TS2322
+                    (props) => props.showA
+                        ? {
+                            type: "label",
+                            content: "A",
+                            position: { x: 25, y: 25 },
+                            action: () => { },
+                        }
+                        : undefined,
+                    // @ts-expect-error TS2322
+                    (props) => props.showB
+                        ? {
+                            type: "label",
+                            content: "B",
+                            position: { x: 75, y: 75 },
+                            action: () => { },
+                        }
+                        : undefined,
+                ],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const resultBoth = map.display({ showA: true, showB: true });
+            expect(resultBoth.hotspots).toHaveLength(2);
+            const resultA = map.display({ showA: true, showB: false });
+            expect(resultA.hotspots).toHaveLength(1);
+            expect(resultA.hotspots[0].content).toBe("A");
+            const resultNone = map.display({ showA: false, showB: false });
+            expect(resultNone.hotspots).toHaveLength(0);
+        });
+    });
+    describe("Mixed Hotspots", () => {
+        test("displays map with multiple hotspot types", () => {
+            const options = {
+                image: "/map.jpg",
+                hotspots: [
+                    {
+                        type: "label",
+                        content: "Village",
+                        position: { x: 30, y: 40 },
+                        action: () => { },
+                    },
+                    {
+                        type: "image",
+                        content: { idle: "/treasure.png" },
+                        position: { x: 60, y: 70 },
+                        action: () => { },
+                    },
+                    {
+                        type: "label",
+                        content: "Menu",
+                        position: "top",
+                        action: () => { },
+                    },
+                    {
+                        type: "image",
+                        content: { idle: "/compass.png" },
+                        position: "bottom",
+                        action: () => { },
+                    },
+                    {
+                        type: "menu",
+                        position: { x: 50, y: 50 },
+                        items: [
+                            {
+                                type: "label",
+                                content: "Option",
+                                action: () => { },
+                            },
+                        ],
+                    },
+                ],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(5);
+            expect(result.hotspots[0]?.type).toBe("label");
+            expect(result.hotspots[1]?.type).toBe("image");
+            expect(result.hotspots[2]?.type).toBe("label");
+            expect(result.hotspots[3]?.type).toBe("image");
+            expect(result.hotspots[4]?.type).toBe("menu");
+        });
+        test("mixed static and dynamic hotspots", () => {
+            const options = {
+                image: "/map.jpg",
+                hotspots: [
+                    {
+                        type: "label",
+                        content: "Static",
+                        position: { x: 25, y: 25 },
+                        action: () => { },
+                    },
+                    () => ({
+                        type: "label",
+                        content: "Dynamic",
+                        position: { x: 75, y: 75 },
+                        action: () => { },
+                    }),
+                ],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(2);
+            expect(result.hotspots[0].content).toBe("Static");
+            expect(result.hotspots[1].content).toBe("Dynamic");
+        });
+    });
+    describe("Integration with Game", () => {
+        test("map is registered with Game on creation", () => {
+            const id = uniqueId("map");
+            const options = {
+                image: "/map.jpg",
+                hotspots: [],
+            };
+            newInteractiveMap(id, options);
+            const retrieved = Game.getPassageById(id);
+            expect(retrieved).not.toBeNull();
+            expect(retrieved?.id).toBe(id);
+            expect(retrieved?.type).toBe("interactiveMap");
+        });
+        test("can navigate to map using Game.jumpTo", () => {
+            const id = uniqueId("map");
+            const options = {
+                image: "/map.jpg",
+                hotspots: [],
+            };
+            newInteractiveMap(id, options);
+            Game.jumpTo(id);
+            expect(Game.selfState.currentPassageId).toBe(id);
+        });
+        test("can retrieve and display current map", () => {
+            const id = uniqueId("map");
+            const options = {
+                caption: "Current Map",
+                image: "/map.jpg",
+                hotspots: [
+                    {
+                        type: "label",
+                        content: "Test",
+                        position: { x: 50, y: 50 },
+                        action: () => { },
+                    },
+                ],
+            };
+            newInteractiveMap(id, options);
+            Game.jumpTo(id);
+            const currentPassage = Game.currentPassage;
+            expect(currentPassage).not.toBeNull();
+            expect(currentPassage?.type).toBe("interactiveMap");
+            const result = currentPassage.display();
+            expect(result.caption).toBe("Current Map");
+            expect(result.hotspots).toHaveLength(1);
+        });
+        test("hotspot actions can trigger navigation", () => {
+            const mapId = uniqueId("map");
+            const targetId = uniqueId("target");
+            // Create target passage
+            const targetOptions = {
+                image: "/target.jpg",
+                hotspots: [],
+            };
+            newInteractiveMap(targetId, targetOptions);
+            // Create map with hotspot that navigates
+            let actionCalled = false;
+            const mapOptions = {
+                image: "/map.jpg",
+                hotspots: [
+                    {
+                        type: "label",
+                        content: "Go to target",
+                        position: { x: 50, y: 50 },
+                        action: () => {
+                            actionCalled = true;
+                            Game.jumpTo(targetId);
+                        },
+                    },
+                ],
+            };
+            newInteractiveMap(mapId, mapOptions);
+            Game.jumpTo(mapId);
+            const map = Game.currentPassage;
+            const result = map.display();
+            // Simulate clicking the hotspot
+            result.hotspots[0].action();
+            expect(actionCalled).toBe(true);
+            expect(Game.selfState.currentPassageId).toBe(targetId);
+        });
+    });
+    describe("Edge Cases", () => {
+        test("empty hotspots array", () => {
+            const options = {
+                image: "/map.jpg",
+                hotspots: [],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(0);
+        });
+        test("all hotspots return undefined", () => {
+            const options = {
+                image: "/map.jpg",
+                hotspots: [() => undefined, () => undefined, () => undefined],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(0);
+        });
+        test("display called multiple times returns different results", () => {
+            let callCount = 0;
+            const options = {
+                image: () => `/map-${++callCount}.jpg`,
+                hotspots: [],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result1 = map.display();
+            expect(result1.image).toBe("/map-1.jpg");
+            const result2 = map.display();
+            expect(result2.image).toBe("/map-2.jpg");
+        });
+        test("hotspot with all button color variants", () => {
+            const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+            const options = {
+                image: "/map.jpg",
+                hotspots: colors.map((color, i) => ({
+                    type: "label",
+                    content: color,
+                    position: { x: i * 10, y: i * 10 },
+                    action: () => { },
+                    props: { color },
+                })),
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(6);
+            colors.forEach((color, i) => {
+                expect(result.hotspots[i].props?.color).toBe(color);
+            });
+        });
+        test("hotspot with all button variants", () => {
+            const variants = ["solid", "bordered", "light", "flat", "faded", "shadow", "ghost"];
+            const options = {
+                image: "/map.jpg",
+                hotspots: variants.map((variant, i) => ({
+                    type: "label",
+                    content: variant,
+                    position: { x: i * 10, y: i * 10 },
+                    action: () => { },
+                    props: { variant },
+                })),
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(7);
+            variants.forEach((variant, i) => {
+                expect(result.hotspots[i].props?.variant).toBe(variant);
+            });
+        });
+        test("image hotspot with different zoom values", () => {
+            const zooms = ["50%", "100%", "150%", "200%"];
+            const options = {
+                image: "/map.jpg",
+                hotspots: zooms.map((zoom, i) => ({
+                    type: "image",
+                    content: { idle: "/icon.png" },
+                    position: { x: i * 20, y: i * 20 },
+                    action: () => { },
+                    props: { zoom },
+                })),
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots).toHaveLength(4);
+            zooms.forEach((zoom, i) => {
+                expect(result.hotspots[i].props?.zoom).toBe(zoom);
+            });
+        });
+        test("menu with empty items array", () => {
+            const menu = {
+                type: "menu",
+                position: { x: 50, y: 50 },
+                items: [],
+            };
+            const options = {
+                image: "/map.jpg",
+                hotspots: [menu],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots[0].items).toHaveLength(0);
+        });
+        test("position with edge values (0, 100)", () => {
+            const options = {
+                image: "/map.jpg",
+                hotspots: [
+                    {
+                        type: "label",
+                        content: "Top-Left",
+                        position: { x: 0, y: 0 },
+                        action: () => { },
+                    },
+                    {
+                        type: "label",
+                        content: "Bottom-Right",
+                        position: { x: 100, y: 100 },
+                        action: () => { },
+                    },
+                ],
+            };
+            const map = newInteractiveMap(uniqueId("map"), options);
+            const result = map.display();
+            expect(result.hotspots[0].position).toEqual({
+                x: 0,
+                y: 0,
+            });
+            expect(result.hotspots[1].position).toEqual({
+                x: 100,
+                y: 100,
+            });
+        });
+        test("bgOpacity with different values", () => {
+            const opacities = [0, 0.25, 0.5, 0.75, 1];
+            opacities.forEach((bgOpacity) => {
+                const options = {
+                    image: "/map.jpg",
+                    bgImage: "/bg.jpg",
+                    hotspots: [],
+                    props: { bgOpacity },
+                };
+                const map = newInteractiveMap(uniqueId("map"), options);
+                const result = map.display();
+                expect(result.props?.bgOpacity).toBe(bgOpacity);
+            });
+        });
+    });
+});
+//# sourceMappingURL=interactiveMap.test.js.map