Add support for multiple maps

app/App.tsx

@@ -1,43 +1,73 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Map from "./Map";
 import RoomSelect from "./RoomSelect";
+import MapSelect from "./MapSelect";
 import InfoPanel from "./InfoPanel";
 import config from "./config";
-import { Room } from "./config.types";
-import { set } from "ol/transform";
+import { Map as MapConfig, Room } from "./config.types";
 
-export default function App({ roomId }: { roomId?: string }) {
-  const room = config.map.rooms.find((room) => room.id === roomId);
+export default function App({
+  mapId,
+  roomId,
+}: {
+  mapId?: string;
+  roomId?: string;
+}) {
+  const map = config.maps.find((m) => m.id === mapId) || config.maps[0];
+  const room = map.rooms.find((room) => room.id === roomId);
+  const [selectedMap, setSelectedMap] = useState<MapConfig>(map);
   const [selectedRoom, setSelectedRoom] = useState<Room | undefined>(room);
   const [focusedRoom, setFocusedRoom] = useState<Room | undefined>(undefined);
 
-  const [infoPanelExpanded, setInfoPanelExpanded] = useState(() => {
-    return Boolean(
-      typeof localStorage !== "undefined" &&
-        localStorage.getItem("infoPanelExpanded"),
-    );
-  });
+  useEffect(() => {
+    if (!mapId) {
+      window.history.replaceState(null, "", `/map/${selectedMap.id}`);
+    }
+  }, [mapId, selectedMap.id]);
+
+  const [infoPanelExpanded, setInfoPanelExpanded] = useState(false);
+
+  useEffect(() => {
+    if (typeof localStorage !== "undefined") {
+      const stored = localStorage.getItem("infoPanelExpanded");
+      if (stored) {
+        setInfoPanelExpanded(true);
+      }
+    }
+  }, []);
 
-  const onRoomSelected = (room?: Room) => {
+  const onRoomSelected = (map: MapConfig, room?: Room) => {
+    setSelectedMap(map);
     if (!room) {
       setSelectedRoom(undefined);
-      window.history.replaceState(null, "", "/");
+      window.history.replaceState(null, "", `/map/${map.id}`);
     } else {
-      history.replaceState(null, "", `/room/${room.id}`);
+      history.replaceState(null, "", `/map/${map.id}/room/${room.id}`);
       setSelectedRoom(room);
     }
   };
 
+  const onMapSelected = (map: MapConfig) => {
+    setSelectedMap(map);
+    onRoomSelected(map, undefined);
+    window.history.replaceState(null, "", `/map/${map.id}`);
+  };
+
   const onRoomSelectedFromMap = (room?: Room) => {
     setFocusedRoom(undefined);
-    onRoomSelected(room);
+    onRoomSelected(selectedMap, room);
   };
 
-  const onRoomSelectedFromDropdown = (room?: Room) => {
+  const onRoomSelectedFromDropdown = (map: MapConfig, room?: Room) => {
     setFocusedRoom(room);
-    onRoomSelected(room);
+    onRoomSelected(map, room);
+  };
+
+  const onMapSelectedFromDropdown = (map: MapConfig) => {
+    setSelectedMap(map);
+    onMapSelected(map);
   };
 
   const onInfoPanelExpandChange = (expanded: boolean) => {
@@ -59,12 +89,20 @@ export default function App({ roomId }: { roomId?: string }) {
       <Map
         className="h-dvh w-dvw"
         config={config}
+        selectedMap={selectedMap}
         selectedRoom={selectedRoom}
         focusedRoom={focusedRoom}
         onRoomSelected={onRoomSelectedFromMap}
         onPan={onPan}
       />
       <RoomSelect config={config} onRoomSelected={onRoomSelectedFromDropdown} />
+      {config.maps.length > 1 && (
+        <MapSelect
+          config={config}
+          selectedMap={selectedMap}
+          onMapSelected={onMapSelectedFromDropdown}
+        />
+      )}
       <InfoPanel
         room={selectedRoom}
         expanded={infoPanelExpanded}

app/InfoPanel.tsx

@@ -4,9 +4,11 @@ import {
   ViewfinderCircleIcon,
 } from "@heroicons/react/24/solid";
 import Markdown from "react-markdown";
+import type { Components } from "react-markdown";
 import { Room } from "./config.types";
 import { useTranslations } from "next-intl";
 import { dedent } from "./text-utils";
+import Link from "next/link";
 
 interface InfoPanelProps {
   room?: Room;
@@ -75,6 +77,21 @@ export default function InfoPanel({
                 h3: "h5",
                 h4: "h6",
                 h5: "h6",
+                a: ({ href, children, ...props }) => {
+                  // Use Next.js Link for internal links, regular <a> for external
+                  if (href && href.startsWith("/")) {
+                    return (
+                      <Link href={href} {...props}>
+                        {children}
+                      </Link>
+                    );
+                  }
+                  return (
+                    <a href={href} {...props}>
+                      {children}
+                    </a>
+                  );
+                },
               }}
             >
               {dedent(room.description)}

app/Map.tsx

@@ -15,10 +15,11 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Room, Config } from "./config.types";
+import { Config, Map as MapConfig, Room } from "./config.types";
 
 interface MapProps extends React.HTMLAttributes<HTMLDivElement> {
   config: Config;
+  selectedMap: MapConfig;
   selectedRoom?: Room;
   focusedRoom?: Room;
   onRoomSelected?: (room?: Room) => void;
@@ -35,6 +36,7 @@ async function decodeAllImages(src: string) {
 
 export default function Map({
   config,
+  selectedMap,
   selectedRoom,
   focusedRoom,
   onRoomSelected,
@@ -85,7 +87,10 @@ export default function Map({
       return;
     }
 
-    decodeAllImages(config.map.src).then((img) => {
+    let map: olMap | null = null;
+
+    // TODO: support multiple maps
+    decodeAllImages(selectedMap.src).then((img) => {
       const width = img.naturalWidth;
       const height = img.naturalHeight;
 
@@ -98,13 +103,13 @@ export default function Map({
 
       const imageLayer = new ImageLayer({
         source: new Static({
-          url: config.map.src,
+          url: selectedMap.src,
           projection: projection,
           imageExtent: extent,
         }),
       });
 
-      const markers = config.map.rooms.map((room) => {
+      const markers = selectedMap.rooms.map((room) => {
         return new Feature({
           geometry: new Polygon([
             room.area.map((coords) => [coords[0], height - coords[1]]),
@@ -121,7 +126,7 @@ export default function Map({
         style: unselectedStyle,
       });
 
-      const map = new olMap({
+      map = new olMap({
         target: mapDiv,
         interactions: defaults({
           altShiftDragRotate: false,
@@ -135,15 +140,19 @@ export default function Map({
 
       if (
         typeof localStorage !== "undefined" &&
-        localStorage.getItem("map-extent")
+        localStorage.getItem(`map-extent-${selectedMap.id}`)
       ) {
-        map.getView().fit(JSON.parse(localStorage.getItem("map-extent")!));
+        map
+          .getView()
+          .fit(
+            JSON.parse(localStorage.getItem(`map-extent-${selectedMap.id}`)!),
+          );
       } else {
         map.getView().fit(extent);
       }
 
       map.on("pointermove", (e) => {
-        const selectable = map.forEachFeatureAtPixel(e.pixel, (f) => f);
+        const selectable = map!.forEachFeatureAtPixel(e.pixel, (f) => f);
         if (selectable) {
           mapDiv.style.cursor = "pointer";
         } else {
@@ -154,15 +163,24 @@ export default function Map({
       map.on("moveend", (e) => {
         typeof localStorage !== "undefined" &&
           localStorage.setItem(
-            "map-extent",
-            JSON.stringify(map.getView().calculateExtent()),
+            `map-extent-${selectedMap.id}`,
+            JSON.stringify(map!.getView().calculateExtent()),
           );
         onPanRef.current && onPanRef.current();
       });
 
       setMap(map);
     });
-  }, [config.map, mapDiv, unselectedStyle]);
+
+    return function cleanup() {
+      if (map != null) {
+        map.setTarget(undefined);
+        map.dispose();
+      }
+      setMap(null);
+      setSelectedFeature(null);
+    };
+  }, [selectedMap, mapDiv, unselectedStyle]);
 
   const onMapClick = useCallback(
     (e: MapBrowserEvent<any>) => {
@@ -207,17 +225,21 @@ export default function Map({
       .getSource()!
       .getFeatures()
       .find(
-        (f: { get: (arg0: string) => Room }) => f.get("room") === selectedRoom,
+        (f: { get: (arg0: string) => Room }) =>
+          f.get("room").id === selectedRoom?.id,
       );
     if (selected != null) {
       setSelectedFeature(selected);
+    } else {
+      setSelectedFeature(null);
     }
 
     const focused = vectorLayer
       .getSource()!
       .getFeatures()
       .find(
-        (f: { get: (arg0: string) => Room }) => f.get("room") === focusedRoom,
+        (f: { get: (arg0: string) => Room }) =>
+          f.get("room").id === focusedRoom?.id,
       );
     if (focused != null) {
       map.getView().fit(focused.getGeometry().getExtent(), {

app/MapSelect.tsx

@@ -0,0 +1,36 @@
+import { Map, Config } from "./config.types";
+import { MapIcon } from "@heroicons/react/24/outline";
+
+export default function MapSelect({
+  config,
+  selectedMap,
+  onMapSelected,
+}: {
+  config: Config;
+  selectedMap: Map;
+  onMapSelected: (map: Map) => void;
+}) {
+  return (
+    <div className="absolute top-11 left-10 z-10 px-4 py-4">
+      <div className="relative">
+        <MapIcon className="text-secondary-text pointer-events-none absolute top-1/2 left-3 size-5 -translate-y-1/2" />
+        <select
+          className="bg-background border-border text-primary-text rounded border p-3 pl-9"
+          value={selectedMap.id}
+          onChange={(e) => {
+            const map = config.maps.find((m) => m.id === e.target.value);
+            if (map) {
+              onMapSelected(map);
+            }
+          }}
+        >
+          {config.maps.map((map) => (
+            <option key={map.id} value={map.id}>
+              {map.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}