🪸🪲 ↝ [SSG-61 SSG-54 SSC-34 SSG-63]: New onboarding/chapter-1 layout & flow; start

Author: Gizmotronn

app/scenes/earth/page.tsx

@@ -1,60 +1,66 @@
 "use client";
 
-import React, { useCallback, useEffect, useState } from "react";
+import React, { ReactNode, useCallback, useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
 import { InventoryStructureItem } from "@/types/Items";
 import { PlanetarySystem } from "@/components/(scenes)/planetScene/orbitals/system";
-import StructuresOnPlanet, { AtmosphereStructuresOnPlanet, OrbitalStructuresOnPlanet } from "@/components/Structures/Structures";
+import StructuresOnPlanet, {
+  AtmosphereStructuresOnPlanet,
+  OrbitalStructuresOnPlanet,
+} from "@/components/Structures/Structures";
 import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomatons";
 import InitialiseChapterOneUser from "@/components/(scenes)/chapters/one/InitialiseUser";
 import InventoryPage from "@/components/Inventory/Grid/Grid";
 import EnhancedWeatherEventsComponent from "@/components/enhanced-weather-events";
 import TopographicMap from "@/components/topographic-map";
 
 const EarthView: React.FC = () => {
-  return ( 
+  return (
     <div className="min-h-screen w-full flex flex-col">
-    <img
-      className="absolute inset-0 w-full h-full object-cover"
-      src="/assets/Backdrops/Earth.png"
-    />
-    <div className="relative min-h-screen">
+      <img
+        className="absolute inset-0 w-full h-full object-cover"
+        src="/assets/Backdrops/Earth.png"
+      />
+      <div className="relative min-h-screen">
         <EarthStructures />
-    </div>
+      </div>
     </div>
   );
 };
 
 export default EarthView;
 
 const EarthStructures: React.FC = () => {
-    return (
-        <EarthViewLayout>
-            <EnhancedWeatherEventsComponent />
-            {/* <div className="w-full">
+  return (
+    <EarthViewLayout>
+      <EnhancedWeatherEventsComponent />
+      {/* <div className="w-full">
                 <div className="py-3">
                     <div className="py-1">
                         <PlanetarySystem />
                     </div>
                     <center><OrbitalStructuresOnPlanet /></center>
                 </div>
             </div> */}
-            {/* <TopographicMap /> */}
-            <div className="w-full">
-                <div className="py-2">
-                    <center><AtmosphereStructuresOnPlanet /></center>
-                </div>
-            </div>
-            <div className="w-full">
-                <center>
-                    {/* <InventoryPage /> */}
-                    <StructuresOnPlanet /></center>
-            </div>
-            <div className="relative flex-1">
-                <AllAutomatonsOnActivePlanet />
-            </div>
-        </EarthViewLayout>
-    );
+      {/* <TopographicMap /> */}
+      <div className="w-full">
+        <div className="py-2">
+          <center>
+            <AtmosphereStructuresOnPlanet />
+          </center>
+        </div>
+      </div>
+      <div className="w-full">
+        <center>
+          {/* <InventoryPage /> */}
+          <StructuresOnPlanet />
+        </center>
+      </div>
+      <div className="relative flex-1">
+        <AllAutomatonsOnActivePlanet />
+      </div>
+    </EarthViewLayout>
+  );
 };

app/scenes/earth/scene.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { ReactNode } from "react";
+
+export const EarthScene: React.FC<{
+    toolbar?: ReactNode;
+    topSection?: ReactNode;
+    middleSection?: ReactNode;
+    bottomSection?: ReactNode;
+  }> = ({ toolbar, topSection, middleSection, bottomSection }) => {
+    return (
+      <div className="relative min-h-screen w-full flex flex-col justify-start">
+        <img
+          className="absolute inset-0 w-full h-full object-cover"
+          src="/assets/Backdrops/Earth.png"
+          alt="Earth Background"
+        />
+  
+        <div className="relative flex flex-col h-full">
+          {topSection && <div className="w-full h-[22.5vh]">{topSection}</div>}
+  
+          <div className="flex w-full h-[55vh] relative">
+            <div className="w-2/3 h-full mx-auto p-4 overflow-hidden">
+              {middleSection}
+            </div>
+  
+            {toolbar && (
+              <div className="absolute top-0 right-0 h-full flex flex-col justify-center p-7">
+                {toolbar}
+              </div>
+            )}
+          </div>
+  
+          {bottomSection && (
+            <div className="flex w-full h-[22.5vh]">
+              <div className="w-2/3 h-full mx-auto p-4 overflow-hidden">
+                {bottomSection}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };

app/scenes/onboarding/page.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+import { EarthScene } from "../earth/scene";
+import InitialiseChapterOneUser from "@/components/(scenes)/chapters/one/InitialiseUser";
+import InventoryPage from "@/components/Inventory/Grid/Grid";
+import EnhancedWeatherEvents from "@/components/enhanced-weather-events";
+import { MissionSelectorComponent } from "@/components/mission-selector";
+
+export default function Onboarding () {
+    return (
+        <EarthScene
+            // topSection={<EnhancedWeatherEvents />}
+            middleSection={<MissionSelectorComponent />}
+            bottomSection={<InventoryPage />}
+        />
+    );
+};