🧨⌚️ ↝ [SSG-58]: The "Create Sprint" became...something else

app/api/gameplay/inventory/route.ts

@@ -38,8 +38,8 @@ const inventoryItems: InventoryItem[] = [
   {
     id: 3103, name: 'Telescope', description: 'Space-based observations & classifications', icon_url: '/assets/Items/Telescope.png', ItemCategory: 'Structure', locationType: 'Surface'
   }, 
-  {
-    id: 3104, name: "Zoodex", description: "Populate your planet with some animals to gain an understanding of animal behaviour on your planet and aide local research back home", cost: 1, icon_url: "/assets/Items/Pokedex.png", ItemCategory: "Structure", parentItem: null, itemLevel: 1, locationType: "Surface"
+  { // Previously referred to as #Zoodex-3104
+    id: 3104, name: "Biodome", description: "Populate your planet with some animals to gain an understanding of animal behaviour on your planet and aide local research back home", cost: 1, icon_url: "/assets/Items/Pokedex.png", ItemCategory: "Structure", parentItem: null, itemLevel: 1, locationType: "Surface"
   },
   {
     id: 3105,

app/api/gameplay/missions/route.ts

@@ -12,7 +12,7 @@ export interface Mission {
     chapter?: number;
     component?: React.ComponentType<any>;
 }; 
-
+ 
 const missions: Mission[] = [
     // Chapter One Missions
     {

app/layout.tsx

@@ -12,7 +12,6 @@ import { UserAnomaliesProvider } from "@/context/UserAnomalies";
 import { bgImage, backgroundImages } from "@/constants/backgrounds";
 import { Analytics } from "@vercel/analytics/react"
 import { MissionProvider } from "@/context/MissionContext";
-import TutorialPopup from "../content/Dialogue/helpButton";
 import AppLayout from "@/components/Layout/Layout";
 import Header from "@/components/ui/Header";
 
@@ -103,9 +102,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
                     <div className="sci-fi-signal sci-fi-signal-1"></div>
                     <div className="sci-fi-signal sci-fi-signal-2"></div>
                   </div>
+                  <div className="relative min-h-screen w-full flex flex-col">
                           {children}
+                          </div>
                         </AppLayout>
-                      <TutorialPopup />
                     <Analytics />
                   </InventoryProvider>
                 </UserAnomaliesProvider>

app/page.tsx

@@ -30,6 +30,14 @@ import {
 } from './scenes';
 import GlobeView from "./scenes/globe/page";
 import InitialiseChapterOneUser from "@/components/(scenes)/chapters/one/InitialiseUser";
+import { EarthScene } from "./scenes/earth/scene";
+import StructuresOnPlanet, { AtmosphereStructuresOnPlanet, OrbitalStructuresOnPlanet } from "@/components/Structures/Structures";
+import EnhancedWeatherEvents from "@/components/enhanced-weather-events";
+import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomatons";
+import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
+import Onboarding from "./scenes/onboarding/page";
+import VerticalToolbar from "@/components/Layout/Toolbar";
+import StructureMissionGuide from "@/components/Layout/Guide";
 
 export default function Home() {
   const session = useSession();
@@ -52,6 +60,45 @@ export default function Home() {
     52: <IoView />,
     55: <EuropaView />,
     51: <AmaltheaView />,
+    // 30: <EarthScene
+    //   topSection={
+    //     <EnhancedWeatherEvents />
+    //   }
+    //   middleSection={
+    //     <StructuresOnPlanet />
+    //   }
+    //   middleSectionTwo={
+    //     <AllAutomatonsOnActivePlanet />
+    //   }
+    // />,
+    30: <EarthViewLayout>
+      <div className="w-full">
+        <div className="flex flex-row space-y-4"></div>
+        <div className="py-3">
+          <div className="py-1">
+            <EnhancedWeatherEvents />
+          </div>
+          <center>
+            <OrbitalStructuresOnPlanet />
+          </center>
+        </div>
+      </div>
+      <div className="w-full">
+        <div className="py-2">
+          <center>
+            <AtmosphereStructuresOnPlanet />
+          </center>
+        </div>
+      </div>
+      <div className="w-full py-2">
+        <center>
+          <StructuresOnPlanet />
+          <AllAutomatonsOnActivePlanet />
+        </center>
+      </div>
+      <div className="w-full py-2"><StructureMissionGuide />
+  </div>
+    </EarthViewLayout>
     // 60: <SaturnView />,
     // 62: <TitanView />,
     // 61: <EnceladusView />,
@@ -69,13 +116,7 @@ export default function Home() {
 
   if (activePlanet?.id === 69) {
     return (
-      <EarthView />
-    );
-  };
-
-  if (activePlanet?.id === null) {
-    return (
-      <InitialiseChapterOneUser />
+      <EarthScene />
     );
   };
 
@@ -85,5 +126,5 @@ export default function Home() {
     );
   };
 
-  return planetViews[activePlanet?.id] || <EarthView />;
+  return planetViews[activePlanet?.id] || <Onboarding />;
 };

app/scenes/earth/page.tsx

@@ -1,116 +1,83 @@
 "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 = () => {
-  const supabase = useSupabaseClient();
-  const session = useSession();
+  const { activePlanet, updatePlanetLocation } = useActivePlanet();
+  const handleUpdateToEarth = () => {
+    updatePlanetLocation(69);
+  };
 
-  return ( 
+  if (activePlanet?.id !== 50) {
+    return (
+        <div className="min-h-screen w-full flex flex-col">
+            <div className="bg-black/90">
+                <p>Current planet is not "old" Earth.</p>
+                <button onClick={handleUpdateToEarth}>Switch to 'old' Earth</button>
+            </div>
+        </div>
+    );
+};
+
+  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 = () => {
-    const supabase = useSupabaseClient();
-    const session = useSession();
-
-    const { activePlanet } = useActivePlanet();
-
-    const [orbitalStructures, setOrbitalStructures] = useState<InventoryStructureItem[]>([]);
-    const [atmosphereStructures, setAtmosphereStructures] = useState<InventoryStructureItem[]>([]);
-    const [surfaceStructures, setSurfaceStructures] = useState<InventoryStructureItem[]>([]);
-
-    const handleStructuresFetch = (
-        orbital: InventoryStructureItem[],
-        atmosphere: InventoryStructureItem[],
-        surface: InventoryStructureItem[]
-    ) => {
-        setOrbitalStructures(orbital);
-        setAtmosphereStructures(atmosphere);
-        setSurfaceStructures(surface);
-    };
-
-    const fetchStructures = useCallback(async () => {
-        if (!session?.user?.id || !activePlanet?.id) return;
-
-        try {
-            const { data: inventoryData, error } = await supabase
-                .from('inventory')
-                .select('*')
-                .eq('owner', session.user.id)
-                .eq('anomaly', activePlanet.id)
-                .not('item', 'lte', 100);
-
-            if (error) throw error;
-
-            const orbital = inventoryData.filter((item) => item.locationType === 'Orbital');
-            const atmosphere = inventoryData.filter((item) => item.locationType === 'Atmosphere');
-            const surface = inventoryData.filter((item) => item.locationType === 'Surface');
-
-            handleStructuresFetch(orbital, atmosphere, surface);
-        } catch (error) {
-            console.error('Error fetching structures:', error);
-        };
-    }, [session?.user?.id, activePlanet?.id, supabase]);
-
-    useEffect(() => {
-        fetchStructures();
-    }, [fetchStructures]);
+  return (
+    <EarthViewLayout>
+      <EnhancedWeatherEventsComponent />
+      <div className="w-full">
+        <div className="py-2">
+          <center>
+            <AtmosphereStructuresOnPlanet />
+          </center>
+        </div>
+      </div>
+      <div className="w-full">
+        <center>
+          <StructuresOnPlanet />
+        </center>
+      </div>
+      <div className="relative flex-1">
+        <AllAutomatonsOnActivePlanet />
+      </div>
+    </EarthViewLayout>
+  );
+};
 
-    return (
-        <EarthViewLayout>
-            <div className="w-full">
-                <div className="flex flex-row space-y-4">
-                {orbitalStructures.map((structure) => (
-                            <div
-                                key={structure.id}
-                                className="relative flex items-center space-x-4"
-                            >
-                                <img
-                                    src={structure.itemDetail?.icon_url}
-                                    alt={structure.itemDetail?.name}
-                                    className="w-16 h-16 object-cover"
-                                />
-                            </div>
-                        ))}
-                </div>
+      {/* <div className="w-full">
+        {/* <InventoryPage />
                 <div className="py-3">
                     <div className="py-1">
                         <PlanetarySystem />
                     </div>
-                    <center><OrbitalStructuresOnPlanet onStructuresFetch={handleStructuresFetch} /></center>
+                    <center><OrbitalStructuresOnPlanet /></center>
                 </div>
-            </div>
-            <div className="w-full">
-                <div className="py-2">
-                    <center><AtmosphereStructuresOnPlanet onStructuresFetch={handleStructuresFetch} /></center>
-                </div>
-            </div>
-            <div className="w-full">
-                <center><StructuresOnPlanet onStructuresFetch={handleStructuresFetch} /></center>  
-            </div>
-            <div className="relative flex-1">
-                <AllAutomatonsOnActivePlanet />
-            </div>
-        </EarthViewLayout>
-    );
-};
+            </div> */}
+      {/* <TopographicMap /> */}

app/scenes/earth/scene.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { ReactNode, CSSProperties } from "react";
+
+export const EarthScene: React.FC<{
+    toolbar?: ReactNode;
+    topSection?: ReactNode;
+    middleSection?: ReactNode;
+    bottomSection?: ReactNode;
+    middleSectionTwo?: ReactNode;
+}> = ({ toolbar, topSection, middleSection, bottomSection, middleSectionTwo }) => {
+    // Collect all sections to determine height distribution
+    const sections = [topSection, middleSection, middleSectionTwo, bottomSection].filter(Boolean);
+    const totalSections = sections.length;
+
+    // Define the flex properties for each section
+    const sectionStyles: CSSProperties[] = sections.map((_, index) => {
+        // Distribute height for each section
+        let flexValue = 0;
+
+        if (index === 0) {
+            flexValue = 22.5; // Top section
+        } else if (index === 1 || index === 2) {
+            flexValue = 15; // Middle sections, reduced height
+        } else if (index === 3) {
+            flexValue = 22.5; // Bottom section
+        }
+
+        return {
+            flex: flexValue,
+        };
+    });
+
+    return (
+        <div className="relative min-h-screen w-full flex flex-col">
+            <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 z-10">
+                {topSection && (
+                    <div className="relative flex" style={sectionStyles[0]}>
+                        {topSection}
+                    </div>
+                )}
+
+                {middleSection && (
+                    <div className="mt-4 relative flex" style={sectionStyles[1]}>
+                        <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>
+                )}
+
+                {middleSectionTwo && (
+                    <div className="mt-4 relative flex" style={sectionStyles[2]}>
+                        <div className="w-2/3 h-full mx-auto p-4 overflow-hidden">
+                            {middleSectionTwo}
+                        </div>
+                    </div>
+                )}
+
+                {bottomSection && (
+                    <div className="relative flex" style={sectionStyles[3]}>
+                        <div className="w-2/3 h-full mx-auto p-4 overflow-hidden">
+                            {bottomSection}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};