1

src/components/rpg-runtime-shell/useRpgRuntimeOverlayState.ts

@@ -1,5 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
+import {
+  pushAppHistoryPath,
+  resolvePathForSelectionStage,
+  resolveSelectionStageFromPath,
+} from '../../routing/appPageRoutes';
 import type { GameState } from '../../types';
 import type { GameCanvasEntitySelection } from '../GameCanvas';
 import type { SelectionStage } from '../platform-entry';
@@ -34,11 +39,28 @@ export function useRpgRuntimeOverlayState(params: {
     characterChatModalOpen,
     hasNpcModalOpen,
   } = params;
-  const [selectionStage, setSelectionStage] = useState<SelectionStage>('platform');
+  const [selectionStage, setRawSelectionStage] = useState<SelectionStage>(() =>
+    resolveSelectionStageFromPath(window.location.pathname),
+  );
   const [overlayPanel, setOverlayPanel] = useState<OverlayPanel>(null);
   const [selectedSceneEntity, setSelectedSceneEntity] =
     useState<GameCanvasEntitySelection | null>(null);
   const [showTeamModal, setShowTeamModal] = useState(false);
+  const setSelectionStage = useCallback((stage: SelectionStage) => {
+    setRawSelectionStage(stage);
+    pushAppHistoryPath(resolvePathForSelectionStage(stage));
+  }, []);
+
+  useEffect(() => {
+    const syncStageFromHistory = () => {
+      setRawSelectionStage(
+        resolveSelectionStageFromPath(window.location.pathname),
+      );
+    };
+
+    window.addEventListener('popstate', syncStageFromHistory);
+    return () => window.removeEventListener('popstate', syncStageFromHistory);
+  }, []);
 
   useEffect(() => {
     setSelectedSceneEntity(null);