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>

docs/index.txt

@@ -2,7 +2,7 @@
 2:I[39756,["/t2-mapper/_next/static/chunks/060f9a97930f3d04.js"],"default"]
 3:I[37457,["/t2-mapper/_next/static/chunks/060f9a97930f3d04.js"],"default"]
 4:I[47257,["/t2-mapper/_next/static/chunks/060f9a97930f3d04.js"],"ClientPageRoot"]
-5:I[31713,["/t2-mapper/_next/static/chunks/f620a0b974993323.js","/t2-mapper/_next/static/chunks/860a32ced1b1d3e2.js","/t2-mapper/_next/static/chunks/f86ccd4277098102.js","/t2-mapper/_next/static/chunks/b220ddd938779a2f.js"],"default"]
+5:I[31713,["/t2-mapper/_next/static/chunks/f620a0b974993323.js","/t2-mapper/_next/static/chunks/32ef0c8650712240.js","/t2-mapper/_next/static/chunks/f86ccd4277098102.js","/t2-mapper/_next/static/chunks/7f76920397aa2ac5.js"],"default"]
 8:I[97367,["/t2-mapper/_next/static/chunks/060f9a97930f3d04.js"],"OutletBoundary"]
 a:I[11533,["/t2-mapper/_next/static/chunks/060f9a97930f3d04.js"],"AsyncMetadataOutlet"]
 c:I[97367,["/t2-mapper/_next/static/chunks/060f9a97930f3d04.js"],"ViewportBoundary"]
@@ -10,7 +10,7 @@ e:I[97367,["/t2-mapper/_next/static/chunks/060f9a97930f3d04.js"],"MetadataBounda
 f:"$Sreact.suspense"
 11:I[68027,[],"default"]
 :HL["/t2-mapper/_next/static/chunks/be0d253f8c18ec3b.css","style"]
-0:{"P":null,"b":"dKwf7cXyXSd0Ev0XN-1nO","p":"/t2-mapper","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/t2-mapper/_next/static/chunks/be0d253f8c18ec3b.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"children":["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","$L4",null,{"Component":"$5","searchParams":{},"params":{},"promises":["$@6","$@7"]}],[["$","script","script-0",{"src":"/t2-mapper/_next/static/chunks/f620a0b974993323.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/t2-mapper/_next/static/chunks/860a32ced1b1d3e2.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/t2-mapper/_next/static/chunks/f86ccd4277098102.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/t2-mapper/_next/static/chunks/b220ddd938779a2f.js","async":true,"nonce":"$undefined"}]],["$","$L8",null,{"children":["$L9",["$","$La",null,{"promise":"$@b"}]]}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,[["$","$Lc",null,{"children":"$Ld"}],null],["$","$Le",null,{"children":["$","div",null,{"hidden":true,"children":["$","$f",null,{"fallback":null,"children":"$L10"}]}]}]]}],false]],"m":"$undefined","G":["$11",[["$","link","0",{"rel":"stylesheet","href":"/t2-mapper/_next/static/chunks/be0d253f8c18ec3b.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]]],"s":false,"S":true}
+0:{"P":null,"b":"6uyz3T9YZXssG5kYw_GcG","p":"/t2-mapper","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/t2-mapper/_next/static/chunks/be0d253f8c18ec3b.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"children":["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","$L4",null,{"Component":"$5","searchParams":{},"params":{},"promises":["$@6","$@7"]}],[["$","script","script-0",{"src":"/t2-mapper/_next/static/chunks/f620a0b974993323.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/t2-mapper/_next/static/chunks/32ef0c8650712240.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/t2-mapper/_next/static/chunks/f86ccd4277098102.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/t2-mapper/_next/static/chunks/7f76920397aa2ac5.js","async":true,"nonce":"$undefined"}]],["$","$L8",null,{"children":["$L9",["$","$La",null,{"promise":"$@b"}]]}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,[["$","$Lc",null,{"children":"$Ld"}],null],["$","$Le",null,{"children":["$","div",null,{"hidden":true,"children":["$","$f",null,{"fallback":null,"children":"$L10"}]}]}]]}],false]],"m":"$undefined","G":["$11",[["$","link","0",{"rel":"stylesheet","href":"/t2-mapper/_next/static/chunks/be0d253f8c18ec3b.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]]],"s":false,"S":true}
 6:{}
 7:"$0:f:0:1:2:children:1:props:children:0:props:params"
 d:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]

src/components/CloudLayers.tsx

@@ -17,7 +17,7 @@ import {
 import { loadDetailMapList, textureToUrl } from "../loaders";
 import type { TorqueObject } from "../torqueScript";
 import { getFloat, getProperty } from "../mission";
-import { useDebug } from "./SettingsProvider";
+import { useDebug, useSettings } from "./SettingsProvider";
 
 const GRID_SIZE = 5;
 const VERTEX_COUNT = GRID_SIZE * GRID_SIZE;
@@ -330,6 +330,7 @@ interface CloudLayerProps {
   windDirection: Vector2;
   layerIndex: number;
   debugMode: boolean;
+  animationEnabled: boolean;
 }
 
 /**
@@ -343,6 +344,7 @@ function CloudLayer({
   windDirection,
   layerIndex,
   debugMode,
+  animationEnabled,
 }: CloudLayerProps) {
   const materialRef = useRef<ShaderMaterial>(null!);
   const offsetRef = useRef(new Vector2(0, 0));
@@ -380,7 +382,7 @@ function CloudLayer({
   // From Tribes 2: mOffset = (currentTime - mLastTime) / 32.0 (time in ms)
   // delta is in seconds, so: delta * 1000 / 32 = delta * 31.25
   useFrame((_, delta) => {
-    if (!materialRef.current) return;
+    if (!materialRef.current || !animationEnabled) return;
 
     // Match Tribes 2 timing: deltaTime(ms) / 32
     const mOffset = (delta * 1000) / 32;
@@ -451,6 +453,7 @@ export interface CloudLayersProps {
  */
 export function CloudLayers({ object }: CloudLayersProps) {
   const { debugMode } = useDebug();
+  const { animationEnabled } = useSettings();
   const materialList = getProperty(object, "materialList");
   const { data: detailMapList } = useDetailMapList(materialList);
 
@@ -541,6 +544,7 @@ export function CloudLayers({ object }: CloudLayersProps) {
               windDirection={windDirection}
               layerIndex={i}
               debugMode={debugMode}
+              animationEnabled={animationEnabled}
             />
           </Suspense>
         );