🪂🪖 ↝ [SSM-61 SSM-63 SSM-62 SSC-30]: Each mission in comp. now has a modal and react node comp

Author: Gizmotronn

components/Layout/Guide.tsx

@@ -5,8 +5,10 @@ import { motion, AnimatePresence } from "framer-motion";
 import { ChevronLeft, ChevronRight, HelpCircle, Expand, Telescope, TreeDeciduous, CloudHail, LightbulbIcon, LucideTestTubeDiagonal, CameraIcon, Shapes, PersonStandingIcon } from "lucide-react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
+import MissionInfoModal from "../Missions/MissionInfoModal";
+import AllClassifications from "@/content/Starnet/YourClassifications";
 
-interface Mission {
+export interface Mission {
     id: number | number[];
     name: string;
     description: string;
@@ -16,6 +18,7 @@ interface Mission {
     tableEntry?: string;
     tableColumn?: string;
     voteOn?: string;
+    modalContent?: React.ReactNode;
 };
 
 interface DialogueStep {
@@ -106,6 +109,7 @@ const globalMissions: Mission[] = [
         tableEntry: 'votes',
         tableColumn: 'user_id',
         voteOn: 'planet',
+        modalContent: <AllClassifications initialType="planet" />,
     },
 ];
 
@@ -127,6 +131,17 @@ const StructureMissionGuide = () => {
         { missions: meteorologyMissions, name: 'Meteorologist' },
     ];
 
+    // For modals
+    const [selectedMission, setSelectedMission] = useState<Mission | null>(null);
+
+    const handleMissionClick = (mission: Mission) => {
+      setSelectedMission(mission);
+    };
+  
+    const closeModal = () => {
+      setSelectedMission(null);
+    };
+
     useEffect(() => {
         async function fetchInventoryAndCompletedMissions() {
             if (!session?.user?.id || !activePlanet?.id) return;
@@ -221,8 +236,9 @@ const StructureMissionGuide = () => {
 
         setScrollableMissions(uniqueMissions);
     }, [currentCategory, ownedItems]);
-    
-    
+
+    const [modalMissionContent, setModalMissionContent] = useState<React.ReactNode>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false); 
 
     useEffect(() => {
         const currentMissions = categories[currentCategory].missions;
@@ -246,16 +262,33 @@ const StructureMissionGuide = () => {
         setScrollableMissions(uniqueMissions);
     }, [currentCategory, ownedItems]);
 
+    const nextCategory = () => {
+        setCurrentCategory((prev) => (prev + 1) % categories.length);
+    };
+
+    const previousCategory = () => {
+        setCurrentCategory((prev) => (prev - 1 + categories.length) % categories.length);
+    };
+
     const renderMission = (mission: Mission) => {
         const missionId = Array.isArray(mission.id) ? mission.id[0] : mission.id;
         const isCompleted = completedMissions.includes(missionId);
 
+        const handleMissionClick = () => {
+            setModalMissionContent(mission.modalContent);
+            setIsModalOpen(true);
+        };
+
         return (
-            <Card key={missionId} className={`cursor-pointer border mb-2 ${isCompleted ? 'bg-gray-700' : 'bg-gray-800'}`}>
+            <Card
+                key={missionId}
+                className={`cursor-pointer border mb-2 ${isCompleted ? "bg-gray-700" : "bg-gray-800"}`}
+                onClick={handleMissionClick}
+            >
                 <CardContent className="p-4 flex items-center space-x-4">
                     <mission.icon className={`w-8 h-8 ${mission.color}`} />
                     <div>
-                        <h3 className={`text-lg font-semibold ${isCompleted ? 'text-green-500 line-through' : 'text-gray-200'}`}>
+                        <h3 className={`text-lg font-semibold ${isCompleted ? "text-green-500 line-through" : "text-gray-200"}`}>
                             {mission.name}
                         </h3>
                         <p className={`text-sm ${isCompleted ? 'text-green-400' : 'text-gray-400'}`}>
@@ -267,14 +300,6 @@ const StructureMissionGuide = () => {
         );
     };
 
-    const nextCategory = () => {
-        setCurrentCategory((prev) => (prev + 1) % categories.length);
-    };
-
-    const previousCategory = () => {
-        setCurrentCategory((prev) => (prev - 1 + categories.length) % categories.length);
-    };
-
     return (
         <div className="p-4 max-w-6xl mx-auto font-mono">
             <div className="relative bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 border-2 border-gray-700">
@@ -299,6 +324,11 @@ const StructureMissionGuide = () => {
                     </AnimatePresence>
                 </CardContent>
             </div>
+            <MissionInfoModal
+                show={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                content={modalMissionContent}
+            />
         </div>
     );
 };

components/Missions/MissionInfoModal.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+import { Button } from "../ui/button";
+
+const MissionInfoModal = ({
+    show,
+    onClose,
+    content,
+}: {
+    show: boolean;
+    onClose: () => void;
+    content: React.ReactNode;
+}) => {
+    if (!show) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-90">
+            <div className="w-full h-full flex flex-col p-6 overflow-auto">
+                {/* Close button */}
+                <Button
+                    onClick={onClose}
+                    className="absolute top-4 right-4 bg-red-600 text-white text-lg font-bold hover:bg-red-700 focus:ring-2 focus:ring-red-400 focus:outline-none"
+                >
+                    Close ✖
+                </Button>
+                {/* Content */}
+                <div className="flex-grow flex items-center justify-center text-gray-200">
+                    {content}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default MissionInfoModal;