rotate sky, organize missions into groups

src/components/InspectorControls.tsx

@@ -1,4 +1,5 @@
-import { getResourceList } from "../manifest";
+import { Fragment, useMemo } from "react";
+import { getMissionInfo, getMissionList, getSource } from "../manifest";
 import { useControls, useDebug, useSettings } from "./SettingsProvider";
 import orderBy from "lodash.orderby";
 
@@ -8,16 +9,60 @@ const excludeMissions = new Set([
   "SkiFree_Randomizer",
 ]);
 
-const missions = orderBy(
-  getResourceList()
-    .map((resourcePath) => resourcePath.match(/^missions\/(.+)\.mis$/))
-    .filter(Boolean)
-    .map((match) => match[1])
-    .filter((name) => !excludeMissions.has(name)),
-  [(name) => name.toLowerCase().replace(/_/g, " ")],
-  ["asc"]
+const SOURCE_GROUP_NAMES = {
+  "Classic_maps_v1.vl2": "Classic",
+  "missions.vl2": "Official",
+  "S5maps.vl2": "S5",
+  "S8maps.vl2": "S8",
+  "SkiFreeGameType.vl2": "SkiFree",
+  "TR2final105-client.vl2": "Team Rabbit 2",
+  "TWL-MapPack.vl2": "TWL",
+  "TWL2-MapPack.vl2": "TWL2",
+  "z_DMP2-V0.6.vl2": "DMP2 (Discord Map Pack)",
+  "zAddOnsVL2s/TWL_T2arenaOfficialMaps.vl2": "Arena",
+  "zAddOnsVL2s/zDiscord-Map-Pack-4.7.1.vl2": "DMP (Discord Map Pack)",
+};
+
+const groupedMissions = getMissionList().reduce(
+  (groupMap, missionName) => {
+    const missionInfo = getMissionInfo(missionName);
+    const source = getSource(missionInfo.resourcePath);
+    const groupName = SOURCE_GROUP_NAMES[source] ?? null;
+    const groupMissions = groupMap.get(groupName) ?? [];
+    if (!excludeMissions.has(missionName)) {
+      groupMissions.push({
+        resourcePath: missionInfo.resourcePath,
+        missionName,
+        displayName: missionInfo.displayName,
+      });
+      groupMap.set(groupName, groupMissions);
+    }
+    return groupMap;
+  },
+  new Map<
+    string | null,
+    Array<{
+      resourcePath: string;
+      missionName: string;
+      displayName: string;
+    }>
+  >()
 );
 
+groupedMissions.forEach((groupMissions, groupName) => {
+  groupedMissions.set(
+    groupName,
+    orderBy(
+      groupMissions,
+      [
+        (missionInfo) =>
+          (missionInfo.displayName || missionInfo.missionName).toLowerCase(),
+      ],
+      ["asc"]
+    )
+  );
+});
+
 export function InspectorControls({
   missionName,
   onChangeMission,
@@ -36,6 +81,19 @@ export function InspectorControls({
   const { speedMultiplier, setSpeedMultiplier } = useControls();
   const { debugMode, setDebugMode } = useDebug();
 
+  const groupedMissionOptions = useMemo(() => {
+    const groups = orderBy(
+      Array.from(groupedMissions.entries()),
+      [
+        ([groupName]) =>
+          groupName === "Official" ? 0 : groupName == null ? 2 : 1,
+        ([groupName]) => (groupName ? groupName.toLowerCase() : ""),
+      ],
+      ["asc", "asc"]
+    );
+    return groups;
+  }, []);
+
   return (
     <div
       id="controls"
@@ -48,9 +106,26 @@ export function InspectorControls({
         value={missionName}
         onChange={(event) => onChangeMission(event.target.value)}
       >
-        {missions.map((missionName) => (
-          <option key={missionName}>{missionName}</option>
-        ))}
+        {groupedMissionOptions.map(([groupName, groupMissions]) =>
+          groupName ? (
+            <optgroup key={groupName} label={groupName}>
+              {groupMissions.map((mission) => (
+                <option key={mission.missionName} value={mission.missionName}>
+                  {mission.displayName || mission.missionName}
+                </option>
+              ))}
+            </optgroup>
+          ) : (
+            <Fragment key="null">
+              <hr />
+              {groupMissions.map((mission) => (
+                <option key={mission.missionName} value={mission.missionName}>
+                  {mission.displayName || mission.missionName}
+                </option>
+              ))}
+            </Fragment>
+          )
+        )}
       </select>
       <div className="CheckboxField">
         <input

src/components/Sky.tsx

@@ -1,10 +1,11 @@
 import { Suspense, useMemo, useEffect, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useCubeTexture } from "@react-three/drei";
-import { Color, ShaderMaterial, BackSide } from "three";
-import { ConsoleObject, getProperty } from "../mission";
+import { Color, ShaderMaterial, BackSide, Euler } from "three";
+import { ConsoleObject, getProperty, getRotation } from "../mission";
 import { useSettings } from "./SettingsProvider";
 import { BASE_URL, getUrlForPath, loadDetailMapList } from "../loaders";
+import { useThree } from "@react-three/fiber";
 
 const FALLBACK_URL = `${BASE_URL}/black.png`;
 
@@ -119,6 +120,12 @@ export function SkyBox({
     }
   }, [skyBox, fogColor, hasFog, shaderMaterial]);
 
+  const { scene } = useThree();
+
+  useEffect(() => {
+    scene.backgroundRotation = new Euler(0, Math.PI / 2, 0);
+  }, []);
+
   // If fog is disabled, just use the skybox as background
   if (!hasFog) {
     return <primitive attach="background" object={skyBox} />;

src/loaders.ts

@@ -1,5 +1,10 @@
 import { parseImageFrameList } from "./ifl";
-import { getActualResourcePath, getSource } from "./manifest";
+import {
+  findMissionPath,
+  getActualResourcePath,
+  getMissionInfo,
+  getSource,
+} from "./manifest";
 import { parseMissionScript } from "./mission";
 import { parseTerrainBuffer } from "./terrain";
 
@@ -78,7 +83,8 @@ export async function loadDetailMapList(name: string) {
 }
 
 export async function loadMission(name: string) {
-  const res = await fetch(getUrlForPath(`missions/${name}.mis`));
+  const missionInfo = getMissionInfo(name);
+  const res = await fetch(getUrlForPath(missionInfo.resourcePath));
   const missionScript = await res.text();
   return parseMissionScript(missionScript);
 }

src/manifest.ts

@@ -1,7 +1,19 @@
-import manifest from "../public/manifest.json";
+import untypedManifest from "../public/manifest.json";
+
+const manifest = untypedManifest as {
+  resources: Record<string, string[]>;
+  missions: Record<
+    string,
+    {
+      resourcePath: string;
+      displayName: string | null;
+      missionTypes: string[];
+    }
+  >;
+};
 
 export function getSource(resourcePath: string) {
-  const sources = manifest[resourcePath];
+  const sources = manifest.resources[resourcePath];
   if (sources && sources.length > 0) {
     return sources[sources.length - 1];
   } else {
@@ -21,7 +33,7 @@ export function getActualResourcePath(resourcePath: string) {
 }
 
 export function getActualResourcePathUncached(resourcePath: string) {
-  if (manifest[resourcePath]) {
+  if (manifest.resources[resourcePath]) {
     return resourcePath;
   }
   const resourcePaths = getResourceList();
@@ -68,7 +80,7 @@ export function getActualResourcePathUncached(resourcePath: string) {
   return resourcePath;
 }
 
-const _cachedResourceList = Object.keys(manifest).sort();
+const _cachedResourceList = Object.keys(manifest.resources);
 
 export function getResourceList() {
   return _cachedResourceList;
@@ -82,3 +94,15 @@ export function getFilePath(resourcePath: string) {
     return `public/base/${resourcePath}`;
   }
 }
+
+export function getMissionInfo(missionName: string) {
+  const missionInfo = manifest.missions[missionName];
+  if (!missionInfo) {
+    throw new Error(`Mission not found: ${missionName}`);
+  }
+  return missionInfo;
+}
+
+export function getMissionList() {
+  return Object.keys(manifest.missions);
+}

src/mission.ts

@@ -1,7 +1,7 @@
 import { Quaternion, Vector3 } from "three";
 import parser from "@/generated/mission.cjs";
 
-const definitionComment = /^ (DisplayName|MissionTypes) = (.+)$/;
+const definitionComment = /^ (DisplayName|MissionTypes) = (.+)$/i;
 const sectionBeginComment = /^--- ([A-Z ]+) BEGIN ---$/;
 const sectionEndComment = /^--- ([A-Z ]+) END ---$/;
 
@@ -92,7 +92,7 @@ export function parseMissionScript(script) {
 
   let section = { name: null, definitions: [] };
   const mission: {
-    pragma: Record<string, string>;
+    pragma: Record<string, string | null>;
     sections: Array<{ name: string | null; definitions: any[] }>;
   } = {
     pragma: {},
@@ -150,8 +150,10 @@ export function parseMissionScript(script) {
   }
 
   return {
-    displayName: mission.pragma.DisplayName ?? null,
-    missionTypes: mission.pragma.MissionTypes?.split(" ") ?? [],
+    displayName:
+      mission.pragma.DisplayName ?? mission.pragma.Displayname ?? null,
+    missionTypes:
+      mission.pragma.MissionTypes?.split(/\s+/).filter(Boolean) ?? [],
     missionQuote:
       mission.sections
         .find((section) => section.name === "MISSION QUOTE")