pause clouds when animation is disabled

app/global.d.ts

@@ -0,0 +1,10 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { getMissionList, getMissionInfo } from "@/src/manifest";
+
+declare global {
+  interface Window {
+    setMissionName?: Dispatch<SetStateAction<string>>;
+    getMissionList?: typeof getMissionList;
+    getMissionInfo?: typeof getMissionInfo;
+  }
+}

app/page.tsx

@@ -12,6 +12,7 @@ import { ObserverCamera } from "@/src/components/ObserverCamera";
 import { AudioProvider } from "@/src/components/AudioContext";
 import { DebugElements } from "@/src/components/DebugElements";
 import { CamerasProvider } from "@/src/components/CamerasProvider";
+import { getMissionList, getMissionInfo } from "@/src/manifest";
 
 // three.js has its own loaders for textures and models, but we need to load other
 // stuff too, e.g. missions, terrains, and more. This client is used for those.
@@ -27,6 +28,19 @@ function MapInspector() {
   );
   const [isLoading, setIsLoading] = useState(true);
 
+  useEffect(() => {
+    // For automation, like the t2-maps app!
+    window.setMissionName = setMissionName;
+    window.getMissionList = getMissionList;
+    window.getMissionInfo = getMissionInfo;
+
+    return () => {
+      delete window.setMissionName;
+      delete window.getMissionList;
+      delete window.getMissionInfo;
+    };
+  }, []);
+
   // Update query params when state changes
   useEffect(() => {
     const params = new URLSearchParams();
@@ -43,7 +57,9 @@ function MapInspector() {
       <main>
         <SettingsProvider>
           <div id="canvasContainer">
-            {isLoading && <div className="LoadingSpinner" />}
+            {isLoading && (
+              <div id="loadingIndicator" className="LoadingSpinner" />
+            )}
             <Canvas shadows frameloop="always">
               <CamerasProvider>
                 <AudioProvider>