️👒🧲 ↝ [SSG-114 SSC-82]: Adding tutorial mission to Mission Shell and …

…reverting votes table changes
Signal-K · Jan 31, 2025 · b1362c1 · b1362c1
1 parent 6413f5b
commit b1362c1
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 16 deletions.
diff --git a/components/Structures/Missions/BasePlate.tsx b/components/Structures/Missions/BasePlate.tsx
@@ -27,6 +27,7 @@ interface MissionShellProps {
   maxUnlockedChapter: number;
   onPreviousChapter: () => void;
   onNextChapter: () => void;
+  tutorialMission?: MissionConfig;
 };
 
 const MissionShell = ({
@@ -37,6 +38,7 @@ const MissionShell = ({
   maxUnlockedChapter,
   onPreviousChapter,
   onNextChapter,
+  tutorialMission, 
 }: MissionShellProps) => {
   const supabase = useSupabaseClient();
   const session = useSession();
@@ -79,7 +81,7 @@ const MissionShell = ({
     return () => {
       ignore = true;
     };
-  }, [session, refresh]);  
+  }, [session, refresh]);
 
   const renderMission = (mission: MissionConfig) => {
     const completedCount = mission.completedCount ?? 0;
@@ -168,6 +170,14 @@ const MissionShell = ({
           )}
         </>
       )}
+
+      {/* Display tutorial mission when Chapter 1 is selected */}
+      {currentChapter === 1 && tutorialMission && !selectedMission && (
+  <div className="mt-6">
+    {renderMission(tutorialMission)}
+  </div>
+)}
+
       <AnimatePresence>
         {selectedMission && (
           <motion.div

diff --git a/components/Structures/Missions/Biologists/StationModal.tsx b/components/Structures/Missions/Biologists/StationModal.tsx
@@ -1,9 +1,11 @@
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Sun, Trees } from "lucide-react";
+import { Bird, Fish, PawPrint, Sun, Trees } from "lucide-react";
 import { BurrowingOwl } from "@/components/Projects/Zoodex/burrowingOwls";
 import { BiomePattern } from "./BiomePattern";
 import { iconMap } from "./StationCard";
+import { PlanktonPortalFrame } from "@/components/Projects/Zoodex/planktonPortal";
+import { ZoodexIguanas } from "@/components/Projects/Zoodex/iguanasFromAbove";
 
 interface Animal {
   name: string;
@@ -28,28 +30,30 @@ const fetchProjects = (): Project[] => {
       station: 3104001,
       biome: "Desert",
       title: "Burrowing Owls",
-      icon: Sun,
+      icon: Bird,
       completedCount: 0,
       internalComponent: () => <BurrowingOwl />,
       color: "text-green-400",
     },
     {
       id: 2,
-      station: 3104002,
-      biome: "Forest",
-      title: "Trees Conservation",
-      icon: Trees,
+      station: 3104001,
+      biome: "Desert",
+      title: "Iguanas from Above",
+      icon: PawPrint,
       completedCount: 5,
+      internalComponent: () => <ZoodexIguanas />,
       color: "text-green-700",
     },
     {
       id: 3,
-      station: 3104003,
+      station: 3104002,
       biome: "Ocean",
-      title: "Coral Reef Protection",
-      icon: Sun,
-      completedCount: 3,
+      title: "Plankton Portal",
+      icon: Fish,
+      completedCount: 0,
       color: "text-blue-400",
+      internalComponent: () => <PlanktonPortalFrame />,
     },
   ];
 };

diff --git a/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars.tsx b/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars.tsx
@@ -1,7 +1,7 @@
 import { 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 { CloudspottingWrapper, StarterLidar } from "@/components/Projects/Lidar/Clouds";
 import VoteCoMClassifications from "./CoMVote";
 import CloudClassificationGenerator from "./CloudMaker";
@@ -83,6 +83,23 @@ const CloudspottingOnMars = () => {
         ];
     };
 
+    const tutorialMission: Mission = {
+        id: 1000,
+        chapter: 1,
+        title: "Welcome to Cloudspotting on Mars",
+        description: "This mission will guide you through the basics of cloud classification. Let's get started!",
+        icon: HelpCircle,
+        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>
+        ),
+        color: "text-yellow-500",
+    };
+
     useEffect(() => {
         if (!session) {
             return;
@@ -160,6 +177,7 @@ const CloudspottingOnMars = () => {
             maxUnlockedChapter={maxUnlockedChapter}
             onPreviousChapter={handlePreviousChapter}
             onNextChapter={handleNextChapter}
+            tutorialMission={tutorialMission}
         />
     );
 };

diff --git a/content/Posts/PostSingle.tsx b/content/Posts/PostSingle.tsx
@@ -88,10 +88,31 @@ export function PostCardSingle({
     }
   };
 
-  const handleVoteClick = () => {
+  const handleVoteClick = async () => {
+    if (!session?.user?.id) return;  
+
+    try {
+      const { error } = await supabase.from("votes").insert([
+        {
+          user_id: session.user.id,
+          classification_id: classificationId, 
+          anomaly_id: anomalyId,
+        },
+      ]);
+
+      if (error) {
+        console.error("Error inserting vote:", error);
+        return;
+      };
+
+      setVoteCount((prev) => prev + 1);
+    } catch (error) {
+      console.error("Error handling vote:", error);
+    }
+
     if (onVote) onVote();
-    setVoteCount((prev) => prev + 1);
   };
+
 
   const handleAddComment = async () => {
     if (!newComment.trim()) return;
@@ -224,9 +245,9 @@ export function PostCardSingle({
       await Promise.all(imagePromises);
 
       const canvas = await html2canvas(shareCardRef.current, {
-        useCORS: true, // Enable CORS for external images
+        useCORS: true, 
         scrollX: 0,
-        scrollY: -window.scrollY, // Capture from top of the page
+        scrollY: -window.scrollY, 
       });
 
       canvas.toBlob(