🎆🚣🏻 ↝ [SSM-27]: Dynamic components per-mission, working on adding fun…

…ction to separate & improve UI

app/tests/page.tsx

@@ -3,17 +3,17 @@
 import React, { useEffect, useState } from "react";
 import StarnetLayout from "@/components/Layout/Starnet";
 import { ExoplanetTransitHunter } from "@/components/Projects/Telescopes/ExoplanetC23";
-import SwitchPlanet from "@/components/(scenes)/travel/SolarSystem";
-import { MissionProgressionComponent } from "@/components/Missions/PathwayGuide";
 import CompletedMissions from "@/components/Missions/CompletedMissions";
 import { UnownedSurfaceStructures } from "@/components/Structures/Build/EditMode";
+import { CompletedMissionsss } from "@/components/Missions/PathwayGuide";
 
 export default function TestPage() {
     return (
             <div className="1">
                 {/* <MissionProgressionComponent /> */}
                 <UnownedSurfaceStructures />
-                <CompletedMissions />
+                {/* <CompletedMissions /> */}
+                <CompletedMissionsss />
             </div>
     );
 };

components/Missions/CompletedMissions.tsx

@@ -53,10 +53,10 @@ const missionsData: Record<PlayStyle, Partial<Record<Planet, MissionRoute[]>>> =
           id: 'researchStation', title: "Create a Research Station", component: <UnownedSurfaceStructures />, inventoryStructureId: 3106,
         },
         { id: 'research', title: 'Research the launchpad', routeId: [100000042], mission: '100000042', researchStructureId: 3107, component: <AdvancedTechTreeComponent />},
-        { id: 'owl', title: 'Classify some burrowing owls', routeId: [100000035], mission: '100000035',
+        { id: 'owl', title: 'Classify some burrowing owls', routeId: [100000035], mission: '100000035', component: <DataSourcesModal structureId="3104" structure="Zoodex" />,
           infoText: 'Return to the planet page and use the Zoodex structure to classify burrowing owls', route: "/",
          },
-        { id: 'penguin', title: 'Take a look at some penguins', routeId: [200000010], mission: '200000010',
+        { id: 'penguin', title: 'Take a look at some penguins', routeId: [200000010], mission: '200000010',  component: <DataSourcesModal structureId="3104" structure="Zoodex" />,
           infoText: 'Return to the planet page and use the Zoodex structure to classify penguins', route: "/",
          },
         { id: 'build', title: 'Build the launchpad', routeId: [100000044], mission: '100000044', inventoryStructureId: 3107, component: <UnownedSurfaceStructures />,    },
@@ -214,7 +214,43 @@ export default function CompletedMissions() {
       return completedMissions.includes(Number(missionRoute.mission));
     };    
 
-    const [showComponent, setShowComponent] = useState(false);
+    const [selectedPlayStyle, setSelectedPlayStyle] = useState<PlayStyle | null>(null);
+    const [filteredMissions, setFilteredMissions] = useState<MissionRoute[]>([]);
+
+    useEffect(() => {
+      const fetchMissionsByPlayStyle = () => {
+        if (!selectedPlayStyle) return; 
+
+        const missionsList = missionsData[selectedPlayStyle];
+        if (missionsList) {
+          const allMissionsList: MissionRoute[] = [];
+          for (const planet in missionsList) {
+            const planetMissions = missionsList[planet as Planet];
+            if (planetMissions) {
+              allMissionsList.push(...planetMissions);
+            };
+          };
+          setFilteredMissions(allMissionsList);
+        };
+      };
+
+      fetchMissionsByPlayStyle();
+    }, [selectedPlayStyle]);
+
+    return (
+      <div className="min-h-screen bg-[#1D2833] text-[#F7F5E9] p-4 md:p-8 relative overflow-hidden">
+        <div className="absolutte inset-0 overflow-hidden pointer-events-none">
+          <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0,50 Q50,0 100,50 T200,50" fill="none" stroke="#2C3A4A" strokeWidth="2" />
+            <path d="M0,100 Q50,50 100,100 T200,100" fill="none" stroke="#5FCBC3" strokeWidth="2" />
+            <circle cx="80%" cy="20%" r="50" fill="#303F51" opacity="0.5" />
+            <rect x="10%" y="70%" width="100" height="100" fill="#74859A" opacity="0.3" />
+          </svg>
+        </div>
+
+        <h1 className="text-3xl font-bold mb-8 relative z-10">Mission Progression</h1>
+      </div>
+    );
 
     return (
       <div style={{ padding: '20px', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px' }}>
@@ -228,6 +264,7 @@ export default function CompletedMissions() {
                 <ul>
                   {missions?.map((missionRoute) => {
                     const [showInfo, setShowInfo] = useState(false);
+                    const [showComponent, setShowComponent] = useState(false);
 
                     return (
                       <li key={missionRoute.id} style={{ display: "flex", flexDirection: "column", marginBottom: '20px' }}>
@@ -241,9 +278,9 @@ export default function CompletedMissions() {
                         </div>
                         {missionRoute.infoText && (
                           <>
-                            <button onClick={() => setShowInfo(!showInfo)} style={{ marginTop: '5px' }}>
+                            <Button onClick={() => setShowInfo(!showInfo)} style={{ marginTop: '5px' }}>
                               {showInfo ? "Read less" : "Read more"}
-                            </button>
+                            </Button>
                             {showInfo && <p style={{ marginTop: '5px', color: 'grey' }}>{missionRoute.infoText}</p>}
                           </>
                         )}

components/Missions/PathwayGuide.tsx

@@ -297,4 +297,120 @@ export function MissionProgressionComponent() {
       )}
     </div>
   );
+};
+
+type MissionRoute = {
+  id: string;
+  title: string;
+  routeId?: number[];
+  mission?: string;
+  researchStructureId?: number;
+  inventoryStructureId?: number;
+  route?: string;
+  infoText?: string;
+  component?: React.ReactNode;
+}; 
+
+export function CompletedMissionsss() {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+  const [completedMissions, setCompletedMissions] = useState<number[]>([]);
+  const [selectedPlayStyle, setSelectedPlayStyle] = useState<PlayStyle | null>(null);
+  const [filteredMissions, setFilteredMissions] = useState<MissionRoute[]>([]);
+  const [selectedMission, setSelectedMission] = useState<MissionRoute | null>(null);
+
+  const handlePlayStyleSelect = (playStyle: PlayStyle) => {
+    setSelectedPlayStyle(playStyle);
+  };
+
+  const isMissionCompleted = (missionRoute: MissionRoute): boolean => {
+    if (!missionRoute.mission) return false;
+    return completedMissions.includes(Number(missionRoute.mission));
+  };
+
+  const handleMissionSelect = (mission: MissionRoute) => {
+    setSelectedMission(mission);
+  };
+
+  useEffect(() => {
+    const fetchCompletedMissions = async () => {
+      if (!session) return;
+      try {
+        const { data, error } = await supabase
+          .from('missions')
+          .select('mission')
+          .eq('user', session.user.id);
+
+        if (error) throw error;
+
+        const completedMissionIds = data.map((missionEntry: { mission: number }) => missionEntry.mission);
+        setCompletedMissions(completedMissionIds);
+      } catch (error) {
+        console.error("Error fetching completed missions", error);
+      }
+    };
+
+    fetchCompletedMissions();
+  }, [session]); // Fetch completed missions when session changes
+
+  useEffect(() => {
+    // Fetch all missions based on the selected play style
+    const fetchMissionsByPlayStyle = () => {
+      if (!selectedPlayStyle) return; // Exit if no playstyle is selected
+
+      const missionsList = missionsData[selectedPlayStyle];
+      if (missionsList) {
+        const allMissionsList: MissionRoute[] = [];
+        for (const planet in missionsList) {
+          const planetMissions = missionsList[planet as Planet];
+          if (planetMissions) {
+            allMissionsList.push(...planetMissions);
+          }
+        }
+        setFilteredMissions(allMissionsList);
+      }
+    };
+
+    fetchMissionsByPlayStyle();
+  }, [selectedPlayStyle]); // Run effect when selected play style changes
+
+  return (
+    <div>
+      <div>
+        <h2>Select Your Playstyle</h2>
+        <button onClick={() => handlePlayStyleSelect('biologist')}>Biologist</button>
+        <button onClick={() => handlePlayStyleSelect('astronomer')}>Astronomer</button>
+        <button onClick={() => handlePlayStyleSelect('meteorologist')}>Meteorologist</button>
+      </div>
+
+      {selectedPlayStyle ? (
+        <div>
+          {selectedMission ? (
+            <div>
+              <h3>{selectedMission.title}</h3>
+              <p>{selectedMission.infoText}</p>
+              {selectedMission.component}
+              <button onClick={() => setSelectedMission(null)}>Back to Mission List</button>
+            </div>
+          ) : (
+            filteredMissions.map((mission) => (
+              <div
+                key={mission.id}
+                onClick={() => handleMissionSelect(mission)}
+                style={{ cursor: 'pointer', marginBottom: '10px', padding: '10px', border: isMissionCompleted(mission) ? '2px solid green' : '2px solid red' }}
+              >
+                <h3>{mission.title}</h3>
+                <p>{mission.infoText}</p>
+                <span style={{ color: isMissionCompleted(mission) ? 'green' : 'red' }}>
+                  {isMissionCompleted(mission) ? 'Completed' : 'Incomplete'}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+      ) : (
+        <p>Please select a playstyle to view your missions.</p>
+      )}
+    </div>
+  );
 }