🫘🎈 ↝ [SSM-57 SSM-55 SSM-56 SSM-40 SSC-30 SSM-54]: Mission guide with new content, views & configuration

Author: Gizmotronn

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/page.tsx

@@ -37,6 +37,7 @@ import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomat
 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();
@@ -95,7 +96,7 @@ export default function Home() {
           <AllAutomatonsOnActivePlanet />
         </center>
       </div>
-      <div className="w-full py-2">
+      <div className="w-full py-2"><StructureMissionGuide />
   </div>
     </EarthViewLayout>
     // 60: <SaturnView />,
@@ -119,17 +120,11 @@ export default function Home() {
     );
   };
 
-  if (activePlanet?.id === null) {
-    return (
-      <Onboarding />
-    );
-  };
-
   if (activePlanet?.id == 35) {
     return (
       <GlobeView />
     );
   };
 
-  return planetViews[activePlanet?.id] || <EarthView />;
+  return planetViews[activePlanet?.id] || <Onboarding />;
 };

app/scenes/onboarding/page.tsx

@@ -1,5 +1,4 @@
 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";
@@ -10,10 +9,10 @@ import VerticalToolbar from "@/components/Layout/Toolbar";
 export default function Onboarding () {
     return (
         <EarthScene
-            // topSection={<EnhancedWeatherEvents />}
+            topSection={<EnhancedWeatherEvents />}
             middleSection={<MissionSelector />}
-            toolbar={<VerticalToolbar />}
+            // toolbar={<VerticalToolbar />}
             // bottomSection={<InventoryPage />}
         />
-    );
+    ); 
 };

components/Data/ZoodexDataSources.tsx

@@ -93,7 +93,7 @@ export const zoodexDataSources = [
 export const telescopeDataSources = [
     {
         category: 'Planets',
-        items: [
+        items: [ 
             {
                 name: 'Transiting Exoplanet Survey Satellite Search',
                 description: 'Hunt for exoplanet candidates using lightcurve data',

components/Layout/Guide.tsx

@@ -0,0 +1,186 @@
+import React, { useEffect, useState } from "react";
+import { Button } from "../ui/button";
+import { Card, CardContent } from "../ui/card";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronLeft, ChevronRight, CloudHail, HelpCircle, LightbulbIcon, Telescope, TreeDeciduous } from "lucide-react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import MissionPathway from "../Missions/Pathway";
+
+interface Mission {
+    id: number;
+    name: string;
+    description: string;
+    icon: React.ElementType;
+    color: string;
+};
+
+interface DialogueStep {
+    text: string
+    requiredMissions: string[]
+};
+
+const astronomyMissions: Mission[] = [
+    {
+        id: 3000001 | 20000004 | 3000002,
+        name: "Complete an astronomy mission using your telescope",
+        description: "Click on the 'Telescope' structure to make some classifications",
+        icon: Telescope,
+        color: 'text-cyan-300',
+    },
+    {
+        id: 10000001,
+        name: "This is a test mission",
+        description: 'Not needed',
+        icon: LightbulbIcon,
+        color: 'text-yellow-300',
+    },
+];
+
+const biologistMissions: Mission[] = [
+    {
+        id: 3000004 | 3000004,
+        name: "Classify some animals using your Biodome",
+        description: "Click on the 'Biodome' structure to make some classifications",
+        icon: TreeDeciduous,
+        color: 'text-green-300',
+    },
+];
+
+const meteorologyMissions: Mission[] = [
+    {
+        id: 3000010 | 20000007,
+        name: "Study some weather events using your atmospheric probe",
+        description: "Click on your LIDAR module to make some classifications",
+        icon: CloudHail,
+        color: 'text-blue-300',
+    },
+];
+
+// Research station - walk the user through this. Then upload data, verify/vet (consensus), then we introduce travel. Add a "close"/swipe-down option so that the tutorial section can be hidden/minimised. Then we go through the guide for the different views....and determine the differentials from Pathway.tsx and this new list
+// As well as researching for other projects/mission modules that aren't in `mission-selector`
+
+const dialogueSteps: DialogueStep[] = [
+
+];
+
+export default function StructureMissionGuide() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+    const [completedMissions, setCompletedMissions] = useState<number[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [currentCategory, setCurrentCategory] = useState(0);
+    const [minimized, setMinimized] = useState(false);  // State to handle minimization
+
+    const categories = [
+        { missions: astronomyMissions, name: 'Astronomer' },
+        { missions: biologistMissions, name: 'Biologist' },
+        { missions: meteorologyMissions, name: 'Meteorologist' },
+    ];
+
+    useEffect(() => {
+        async function fetchCompletedMissions() {
+            if (!session?.user?.id) return;
+
+            const { data, error } = await supabase
+                .from('missions')
+                .select('mission')
+                .eq('user', session.user.id);
+
+            if (error) {
+                console.error("Error fetching completed missions:", error);
+            } else {
+                const completedMissionIds = data.map((mission: { mission: number }) => mission.mission);
+                setCompletedMissions(completedMissionIds);
+            }
+
+            setLoading(false);
+        }
+
+        fetchCompletedMissions();
+    }, [session, supabase]);
+
+    const handleNextCategory = () => {
+        setCurrentCategory((prevCategory) => (prevCategory + 1) % categories.length);
+    };
+
+    const handlePreviousCategory = () => {
+        setCurrentCategory((prevCategory) => (prevCategory - 1 + categories.length) % categories.length);
+    };
+
+    const toggleMinimize = () => {
+        setMinimized(!minimized);
+    };
+
+    return (
+        <div className="p-4 max-w-6xl mx-auto font-mono">
+            {minimized ? (
+                <Button onClick={toggleMinimize} className="bg-blue-600 text-white flex items-center space-x-2">
+                    <HelpCircle className="w-5 h-5" />
+                    <span>Help</span>
+                </Button>
+            ) : (
+                <Card className="overflow-hidden relative bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 border-2 border-gray-700">
+                    <CardContent className="p-4">
+                        <div className="flex justify-between mb-4 items-center">
+                            {/* Mission Group Header */}
+                            <h2 className="text-xl font-semibold text-gray-300">
+                                Mission guide for {categories[currentCategory].name} pathway
+                            </h2>
+
+                            <Button
+                                onClick={toggleMinimize}
+                                className="bg-gray-700 text-gray-300 hover:bg-gray-600 px-2 py-1 text-sm"
+                            >
+                                Minimize
+                            </Button>
+                        </div>
+
+                        <div className="flex justify-between mb-4">
+                            <Button
+                                onClick={handlePreviousCategory}
+                                className="bg-gray-700 text-gray-300 hover:bg-gray-600 px-2 py-1 text-sm"
+                            >
+                                <ChevronLeft className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                onClick={handleNextCategory}
+                                className="bg-blue-600 text-white hover:bg-blue-500 px-2 py-1 text-sm"
+                            >
+                                <ChevronRight className="h-4 w-4" />
+                            </Button>
+                        </div>
+
+                        <div className="grid grid-cols-1 gap-2">
+                            {loading ? (
+                                <p>Loading missions...</p>
+                            ) : (
+                                categories[currentCategory].missions.map((mission) => (
+                                    <Card
+                                        key={mission.id}
+                                        className={`cursor-pointer hover:shadow-lg transition-all duration-300 ${
+                                            completedMissions.includes(mission.id) ? 'bg-gray-700' : 'bg-gray-800'
+                                        } border border-gray-600 relative overflow-hidden`}
+                                    >
+                                        <CardContent className="p-2 flex items-center">
+                                            <mission.icon className={`w-6 h-6 mr-2 ${mission.color}`} />
+                                            <div>
+                                                <h3 className={`text-xs font-semibold ${mission.color}`}>{mission.name}</h3>
+                                                {completedMissions.includes(mission.id) ? (
+                                                    <p className="text-xs text-gray-400 line-through decoration-dotted decoration-green-400">
+                                                        {mission.description}
+                                                    </p>
+                                                ) : (
+                                                    <p className="text-xs text-gray-400">{mission.description}</p>
+                                                )}
+                                            </div>
+                                        </CardContent>
+                                    </Card>
+                                ))
+                            )}
+                        </div>
+                    </CardContent>
+                </Card>
+            )}
+        </div>
+    );
+};

components/Layout/Toolbar.tsx

@@ -20,7 +20,6 @@ export default function VerticalToolbar() {
 
   return (
     <div className="z-50">
-      {/* Desktop Toolbar */}
       <div className="hidden md:block fixed left-4 top-1/4 transform -translate-y-1/2">
         <nav className="bg-[#1E3A4C] rounded-xl shadow-lg backdrop-blur-md bg-opacity-80 p-2">
           <ul className="flex flex-col space-y-4">
@@ -30,16 +29,20 @@ export default function VerticalToolbar() {
                   <a
                     onMouseEnter={() => setHovered(label)}
                     onMouseLeave={() => setHovered(null)}
-                    className={`flex items-center space-x-2 px-4 py-3 rounded-full transition-all duration-300 
+                    className={`flex items-center px-4 py-3 rounded-full transition-all duration-300 relative 
                       ${pathname === href
                         ? "bg-white text-[#1E3A4C] shadow-md"
                         : "text-white hover:bg-white/10"}`}
                     aria-label={label}
                   >
                     <Icon className="w-6 h-6" />
-                    {(pathname === href || hovered === label) && (
-                      <span className="text-sm font-medium">{label}</span>
-                    )}
+                    <span
+                      className={`absolute left-12 opacity-0 transition-opacity duration-300 ${
+                        hovered === label || pathname === href ? 'opacity-100' : ''
+                      } text-sm font-medium whitespace-nowrap bg-[#1E3A4C] bg-opacity-90 text-white px-2 py-1 rounded-md`}
+                    >
+                      {label}
+                    </span>
                   </a>
                 </Link>
               </li>
@@ -53,7 +56,6 @@ export default function VerticalToolbar() {
         </nav>
       </div>
 
-      {/* Mobile Toolbar with Gear Icon */}
       <div className="block md:hidden fixed left-4 bottom-4">
         <button
           onClick={() => setIsMenuOpen(!isMenuOpen)}
@@ -70,7 +72,7 @@ export default function VerticalToolbar() {
                 <li key={label}>
                   <Link legacyBehavior href={href}>
                     <a
-                      onClick={() => setIsMenuOpen(false)}  // Close menu after selection
+                      onClick={() => setIsMenuOpen(false)}
                       className={`flex items-center space-x-2 px-4 py-3 rounded-full transition-all duration-300 
                         ${pathname === href
                           ? "bg-white text-[#1E3A4C] shadow-md"

components/Missions/Pathway.tsx

@@ -28,7 +28,7 @@ type MissionRoute = {
   researchStructureId?: number;
   inventoryStructureId?: number;
   route?: string;
-  infoText?: string;
+  infoText?: string; 
   component?: React.ReactNode;
   planet: string;
 };