Align scene ids with names and order

main.js

@@ -143,10 +143,24 @@
   };
 
   const getNextSceneId = () => {
-    const winCond = currentScene?.config?.winCondition;
-    if (winCond?.nextSceneId) return winCond.nextSceneId;
-    const idx = scenes.findIndex((s) => s.id === currentScene?.id);
-    if (idx >= 0 && idx < scenes.length - 1) return scenes[idx + 1].id;
+    const order = window.PhysilinksScenes?.order || [];
+    const currentId = currentScene?.id;
+    const orderedExisting = order.filter((id) =>
+      scenes.some((s) => s.id === id),
+    );
+    if (orderedExisting.length > 0 && currentId) {
+      const idx = orderedExisting.indexOf(currentId);
+      if (idx >= 0 && idx < orderedExisting.length - 1) {
+        return orderedExisting[idx + 1];
+      }
+      if (idx === orderedExisting.length - 1) {
+        return orderedExisting[0];
+      }
+    }
+    const fallbackIdx = scenes.findIndex((s) => s.id === currentId);
+    if (fallbackIdx >= 0 && fallbackIdx < scenes.length - 1) {
+      return scenes[fallbackIdx + 1].id;
+    }
     return scenes[0]?.id || defaultSceneId;
   };
 

scenes/index.js

@@ -1,10 +1,27 @@
 (() => {
   const scenes = window.PhysilinksSceneDefs || [];
-  const gridDefault = scenes.find((s) => s.id === "scene-grid");
-  const defaultSceneId = gridDefault?.id || scenes[0]?.id || "scene-grid";
+  const desiredOrder = [
+    "scene-grid",
+    "low-g-terraces",
+    "fast-drop-maze",
+    "balanced",
+    "scene-lava",
+  ];
+  const orderedScenes = desiredOrder
+    .map((id) => scenes.find((s) => s.id === id))
+    .filter(Boolean);
+  const unordered = scenes.filter(
+    (s) => !orderedScenes.find((o) => o.id === s.id),
+  );
+  const finalScenes = [...orderedScenes, ...unordered];
+  const defaultSceneId =
+    desiredOrder.find((id) => finalScenes.some((s) => s.id === id)) ||
+    finalScenes[0]?.id ||
+    "scene-grid";
 
   window.PhysilinksScenes = {
-    scenes,
+    scenes: finalScenes,
     defaultSceneId,
+    order: desiredOrder,
   };
 })();

scenes/scene-balanced.js

@@ -4,7 +4,7 @@
     window.PhysilinksSceneDefs || []);
 
   scenes.push({
-    id: "scene1",
+    id: "balanced",
     name: "Balanced",
     config: {
       gravity: 0.88,
@@ -16,7 +16,7 @@
         type: "score",
         target: 10000,
         onWin: { shoveBalls: true },
-        nextSceneId: "scene2",
+        nextSceneId: "low-g-terraces",
       },
       link: {
         stiffness: 0.85,

scenes/scene-fastdrop.js

@@ -1,10 +1,10 @@
 (() => {
   const { Bodies } = Matter;
-  const scenes =
-    (window.PhysilinksSceneDefs = window.PhysilinksSceneDefs || []);
+  const scenes = (window.PhysilinksSceneDefs =
+    window.PhysilinksSceneDefs || []);
 
   scenes.push({
-    id: "scene3",
+    id: "fast-drop-maze",
     name: "Fast drop maze",
     config: {
       gravity: 1.25,
@@ -42,16 +42,10 @@
             render: { fillStyle: "#14b8a6", strokeStyle: "#14b8a6" },
           },
         ),
-        Bodies.rectangle(
-          -wallThickness / 2,
-          h / 2,
-          wallThickness,
-          wallHeight,
-          {
-            isStatic: true,
-            render: { fillStyle: "#f472b6", strokeStyle: "#f472b6" },
-          },
-        ),
+        Bodies.rectangle(-wallThickness / 2, h / 2, wallThickness, wallHeight, {
+          isStatic: true,
+          render: { fillStyle: "#f472b6", strokeStyle: "#f472b6" },
+        }),
         Bodies.rectangle(
           w + wallThickness / 2,
           h / 2,

scenes/scene-lowg.js

@@ -4,7 +4,7 @@
     window.PhysilinksSceneDefs || []);
 
   scenes.push({
-    id: "scene2",
+    id: "low-g-terraces",
     name: "Low-G terraces",
     config: {
       gravity: 0.65,
@@ -15,7 +15,7 @@
       winCondition: {
         type: "score",
         target: 50000,
-        nextSceneId: "scene3",
+        nextSceneId: "fast-drop-maze",
         onWin: { shoveBalls: true },
       },
       link: {