️🐥🫙️ ↝ [SSG-117 SSC-82]: Updated simple post card to show download bu…

…tton, add tutorial to all MissionShell
Signal-K · Feb 1, 2025 · 1bcf788 · 1bcf788
1 parent b1362c1
commit 1bcf788
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 21 deletions.
diff --git a/components/Projects/Lidar/Clouds.tsx b/components/Projects/Lidar/Clouds.tsx
@@ -5,7 +5,7 @@ import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import ClassificationForm from "@/components/Projects/(classifications)/PostForm";
 import { Anomaly } from "../Telescopes/Transiting";
-import { CloudspottingOnMars } from "./cloudspottingOnMars"; 
+import { CloudspottingOnMarsTutorial } from "./cloudspottingOnMars"; 
 import PreferredTerrestrialClassifications from "@/components/Structures/Missions/PickPlanet";
 import ImageAnnotator from "../(classifications)/Annotating/Annotator";
 
@@ -111,7 +111,7 @@ export function StarterLidar({ anomalyid }: SelectedAnomProps) {
       }, [session, supabase]);
 
     if (!hasMission3000010) {
-    return <CloudspottingOnMars anomalyId={anomaly?.id.toString() || "8423850802"} />;
+    return <CloudspottingOnMarsTutorial anomalyId={anomaly?.id.toString() || "8423850802"} />;
     };
 
     if (loading) {

diff --git a/components/Projects/Lidar/cloudspottingOnMars.tsx b/components/Projects/Lidar/cloudspottingOnMars.tsx
@@ -9,7 +9,7 @@ interface LidarProps {
     anomalyId: string;
 };
 
-export const CloudspottingOnMars: React.FC<LidarProps> = ({
+export const CloudspottingOnMarsTutorial: React.FC<LidarProps> = ({
     anomalyId
 }) => {
     const supabase = useSupabaseClient();

diff --git a/components/Structures/Missions/Astronomers/DailyMinorPlanet/DailyMinorPlanet.tsx b/components/Structures/Missions/Astronomers/DailyMinorPlanet/DailyMinorPlanet.tsx
@@ -1,11 +1,13 @@
 import { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
-import { BarChartBigIcon, GlassWater, Guitar, PenBoxIcon, RadioIcon, SpeechIcon, TelescopeIcon, VoteIcon } from "lucide-react";
+import { BarChartBigIcon, GlassWater, Guitar, HelpCircle, PenBoxIcon, RadioIcon, SpeechIcon, TelescopeIcon, VoteIcon } from "lucide-react";
 import MissionShell from "../../BasePlate";
-import { DailyMinorPlanet } from "@/components/Projects/Telescopes/DailyMinorPlanet";
+import { DailyMinorPlanet, StarterDailyMinorPlanet } from "@/components/Projects/Telescopes/DailyMinorPlanet";
 import VoteDMPClassifications from "./DMPVote";
 import DMPGenerator from "./AsteroidMaker";
 
+import { Mission } from "@/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars";
+
 const DailyMinorPlanetMissions = () => {
   const supabase = useSupabaseClient();
   const session = useSession();
@@ -116,6 +118,21 @@ const DailyMinorPlanetMissions = () => {
     // },
   ]);
 
+  const tutorialMission: Mission = {
+    id: 1000,
+    chapter: 1,
+    title: "Welcome to Daily Minor Planet",
+    description: 
+      "This mission will guide you through the basics of hunting and discovering asteroids",
+    icon: HelpCircle,
+    points: 0,
+    color: 'text-yellow-500',
+    completedCount: 0,
+    internalComponent: () => {
+      return <StarterDailyMinorPlanet anomalyid={90670192} />;
+    }
+  };
+
   const [experiencePoints, setExperiencePoints] = useState(0);
   const [level, setLevel] = useState(1);
   const [currentChapter, setCurrentChapter] = useState(1);
@@ -236,6 +253,7 @@ const DailyMinorPlanetMissions = () => {
       maxUnlockedChapter={maxUnlockedChapter}
       onPreviousChapter={handlePreviousChapter}
       onNextChapter={handleNextChapter}
+      tutorialMission={tutorialMission}
     />
   );
 };

diff --git a/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters.tsx b/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters.tsx
@@ -1,16 +1,18 @@
 import { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
-import { TelescopeIcon, RadioIcon, SpeakerIcon, DiscAlbum, PersonStandingIcon, Paintbrush2 } from "lucide-react";
+import { TelescopeIcon, RadioIcon, SpeakerIcon, DiscAlbum, PersonStandingIcon, Paintbrush2, HelpCircle } from "lucide-react";
 import PlanetTypeCommentForm from "./PlanetType";
-import { StarterTelescopeTess } from "@/components/Projects/Telescopes/Transiting";
+import { FirstTelescopeClassification, StarterTelescopeTess } from "@/components/Projects/Telescopes/Transiting";
 import VotePlanetClassifictions from "./PHVote";
 import PHClassificationGenerator from "./PlanetMaker";
 import PlanetTemperatureForm from "./PlanetTemperature";
+import { Mission } from "@/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars";
 
 interface MissionStep {
   id: number;
   title: string;
   description: string;
+  points?: number;
   icon: React.ElementType;
   action: () => void;
   completedCount: number;
@@ -208,11 +210,46 @@ const PlanetHuntersSteps = () => {
               {selectedMission.id === 4 && <VotePlanetClassifictions />}
               {selectedMission.id === 5 && <PlanetTemperatureForm />}
               {selectedMission.id === 6 && <PHClassificationGenerator />}
+              {selectedMission.id === 1000 && <FirstTelescopeClassification anomalyid={"6"} />}
             </center>
           </div>
         </div>
       </div>
     );
+  };
+
+  const tutorialMission: MissionStep = {
+    id: 1000,
+    chapter: 1,
+    title: "Welcome to Planet Hunters",
+    description: 'Learn how to discover planet candidates by following this guide',
+    completedCount: 0,
+    points: 0,
+    icon: HelpCircle,
+    action: () => {},
+    color: 'text-yellow-500',
+  };  
+
+  const renderMission = (mission: MissionStep) => {
+    const completedCount = mission.completedCount ?? 0;
+
+    return (
+      <div
+        key={mission.id}
+        className="flex items-center p-6 rounded-2xl"
+        onClick={() => setSelectedMission(mission)}
+      >
+        <mission.icon className={`w-10 h-10 ${mission.color}`} />
+        <div className="ml-4">
+          <h2 className={`text-lg font-bold ${mission.color}`}>{mission.title}</h2>
+          <p className={`text-sm ${mission.color}`}>{mission.description}</p>
+        </div>
+        <div className="ml-auto text-right">
+          <p className="text-xs">Completed: {completedCount}</p>
+          <p className="text-xl font-bold">{completedCount}</p>
+        </div>
+      </div>
+    )
   }
 
   const filteredSteps = steps.filter((step) => step.chapter === currentChapter);
@@ -294,6 +331,10 @@ const PlanetHuntersSteps = () => {
           </div>
         ))}
       </div>
+
+      <div className="mt-6">
+        {renderMission(tutorialMission)}
+      </div>
     </div>
   );
 };

diff --git a/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars.tsx b/components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "../../../BasePlate";
-import { CloudCogIcon, FolderCog, PaintBucket, Vote } from "lucide-react";
-import { AI4MWrapper, AiForMarsProject } from "@/components/Projects/Auto/AI4Mars";
+import { CloudCogIcon, FolderCog, HelpCircle, PaintBucket, Vote } from "lucide-react";
+import { AI4MWrapper, AiForMarsProject, StarterAiForMars } from "@/components/Projects/Auto/AI4Mars";
 import VoteAI4MClassifications from "./AI4MVote";
 
 interface Mission {
@@ -151,6 +151,21 @@ const AI4M = () => {
         ];
     };
 
+    const tutorialMission: Mission = {
+        id: 1000,
+        chapter: 1,
+        title: "Welcome to AI For Mars",
+        description: 
+            "This mission will get you up to speed with how your rovers should be trained and how we can find anomalies from their photos",
+        icon: HelpCircle,
+        points: 0,
+        completedCount: 0,
+        internalComponent: () => {
+            return <StarterAiForMars anomalyid={69592674} />
+        },
+        color: 'text-yellow-500',
+    };
+
     useEffect(() => {
         if (!session) {
             return;
@@ -221,6 +236,7 @@ const AI4M = () => {
             maxUnlockedChapter={maxUnlockedChapter}
             onPreviousChapter={handlePreviousChapter}
             onNextChapter={handleNextChapter}
+            tutorialMission={tutorialMission}
         />
     );
 };

diff --git a/components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour.tsx b/components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "../../../BasePlate";
-import { CloudCogIcon, FolderCog, PaintBucket, Vote } from "lucide-react";
+import { CloudCogIcon, FolderCog, HelpCircle, PaintBucket, Vote } from "lucide-react";
 import VoteP4Classifications from "./P4Vote";
-import { P4Wrapper } from "@/components/Projects/Satellite/PlanetFour";
+import { P4Wrapper, StarterPlanetFour } from "@/components/Projects/Satellite/PlanetFour";
 
 interface Mission {
     id: number;
@@ -151,6 +151,21 @@ const PlanetFour = () => {
         ];
     };
 
+    const tutorialMission: Mission = {
+        id: 1000,
+        chapter: 1,
+        title: "Welcome to Planet Four",
+        description:
+            "This mission will guide you through the basics of documenting & tracking anomalous behaviour on planetary surfaces",
+        icon: HelpCircle,
+        points: 0,
+        completedCount: 0,
+        internalComponent: () => (
+            <StarterPlanetFour anomalyid={46366425} />
+        ),
+        color: 'text-yellow-500',
+    };
+
     useEffect(() => {
         if (!session) {
             return;
@@ -220,6 +235,7 @@ const PlanetFour = () => {
             maxUnlockedChapter={maxUnlockedChapter}
             onPreviousChapter={handlePreviousChapter}
             onNextChapter={handleNextChapter}
+            tutorialMission={tutorialMission}
         />
     );
 };

diff --git a/components/Structures/Missions/Biologists/Plankton/PlanktonPortal.tsx b/components/Structures/Missions/Biologists/Plankton/PlanktonPortal.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "../../BasePlate";
-import { FishIcon, PartyPopper, VoicemailIcon } from "lucide-react";
-import { PlanktonPortalFrame } from "@/components/Projects/Zoodex/planktonPortal";
+import { FishIcon, HelpCircle, PartyPopper, VoicemailIcon } from "lucide-react";
+import { PlanktonPortalFrame, PlanktonPortalTutorial } from "@/components/Projects/Zoodex/planktonPortal";
 import VotePPClassifications from "./PPVote";
 import PlanktonDiscoveryStats from "./PlanktonScore";
 
@@ -75,6 +75,21 @@ const PlanktonPortal = () => {
     ];
   }, []);
 
+  const tutorialMission: Mission = {
+    id: 1000,
+    chapter: 1,
+    title: "Welcome to Plankton Portal",
+    description: 
+      'This mission will get you started with tracking and taking care of different plankton species',
+    icon: HelpCircle,
+    points: 0,
+    completedCount: 0,
+    internalComponent: () => (
+      <PlanktonPortalTutorial anomalyId="36896413" />
+    ),
+    color: 'text-yellow-500',
+  };
+
   const fetchMissionPoints = useCallback(
     async (session: any, supabase: any): Promise<MissionPoints> => {
       const { data: classifications } = await supabase
@@ -146,6 +161,7 @@ const PlanktonPortal = () => {
       onNextChapter={() =>
         setCurrentChapter((prev) => Math.min(prev + 1, maxUnlockedChapter))
       }
+      tutorialMission={tutorialMission}
     />
   );
 };

diff --git a/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars.tsx b/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars.tsx
@@ -5,8 +5,9 @@ import { CloudCogIcon, FolderCog, HelpCircle, PaintBucket, Vote } from "lucide-r
 import { CloudspottingWrapper, StarterLidar } from "@/components/Projects/Lidar/Clouds";
 import VoteCoMClassifications from "./CoMVote";
 import CloudClassificationGenerator from "./CloudMaker";
+import { CloudspottingOnMarsTutorial } from "@/components/Projects/Lidar/cloudspottingOnMars";
 
-interface Mission {
+export interface Mission {
     id: number;
     chapter: number;
     title: string;
@@ -92,10 +93,7 @@ const CloudspottingOnMars = () => {
         points: 0,
         completedCount: 0,
         internalComponent: () => (
-            <div>
-                <p>Welcome to your first mission! Here's how you can classify Martian clouds and participate in the game.</p>
-                <p>This tutorial will walk you through the basics of the classification system and introduce you to your first tools.</p>
-            </div>
+            <CloudspottingOnMarsTutorial anomalyId="8423850802" />
         ),
         color: "text-yellow-500",
     };

diff --git a/components/Structures/Missions/Meteorologists/JVH/JovianVortexHunters.tsx b/components/Structures/Missions/Meteorologists/JVH/JovianVortexHunters.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import MissionShell from "../../BasePlate";
-import { CloudCogIcon, CloudHail, ShovelIcon } from "lucide-react";
-import { LidarJVHSatellite } from "@/components/Projects/Lidar/JovianVortexHunter";
+import { CloudCogIcon, CloudHail, HelpCircle, ShovelIcon } from "lucide-react";
+import { LidarJVHSatellite, StarterJovianVortexHunter } from "@/components/Projects/Lidar/JovianVortexHunter";
 import VoteJVH from "./JVHVote";
 import CloudClassifier from "@/components/Data/Generator/Meteorologists/JVH/cloud-classifier";
 import JVHCloudClassificationGenerator from "./GaseousPlanetCloudMaker";
@@ -182,6 +182,21 @@ const JovianVortexHunters = () => {
         updateMissionData();
     }, [session, supabase]);
 
+    const tutorialMission: Mission = {
+        id: 1000,
+        chapter: 1,
+        title: "Welcome to Jovian Vortex Hunters",
+        description: 
+            'This mission gets you started with classifying and tracking storms on gaseous planets',
+        icon: HelpCircle,
+        points: 0,
+        completedCount: 0,
+        internalComponent: () => (
+            <StarterJovianVortexHunter anomalyid={77288648} />
+        ),
+        color: 'text-yellow-500',
+    };
+
     const maxUnlockedChapter = Math.max(
         Math.floor(experiencePoints / 9) + 1,
         Math.max(...missions.map((mission) => mission.chapter))
@@ -204,6 +219,7 @@ const JovianVortexHunters = () => {
             maxUnlockedChapter={maxUnlockedChapter}
             onPreviousChapter={handlePreviousChapter}
             onNextChapter={handleNextChapter}
+            tutorialMission={tutorialMission}
         />
     );
 };