🛁🧭 ↝ ↝ [SSG-143 SSG-144 SSG-145]: Bug fixes & fixing responsiveness/s…

…izing issue with annotation missions
Signal-K · Feb 18, 2025 · baeedd1 · baeedd1
1 parent 82c09ac
commit baeedd1
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 118 deletions.
diff --git a/.github/workflows/vercel-staging.yml b/.github/workflows/vercel-staging.yml
@@ -8,7 +8,6 @@ on:
   push:
     branches:
       - development
-      - SSG-141
 
 jobs:
   Deploy-Staging:
@@ -27,4 +26,4 @@ jobs:
         run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
 
       - name: Deploy Project Artifacts to Vercel Staging
-        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_ORG_ID }} --project=${{ secrets.VERCEL_PROJECT_ID }} --env=preview
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_ORG_ID }} --project=${{ secrets.VERCEL_PROJECT_ID }} --env=preview
diff --git a/app/auth/landing.tsx b/app/auth/landing.tsx
@@ -115,7 +115,7 @@ export default function LandingSS() {
                 Discover the world around you and contribute to real scientific research in Star Sailors
               </p>
               <div className="flex flex-wrap gap-6">
-                <Link href="https://starsailors.space/auth">
+                <Link href="/auth">
                     <Button
                         size="lg"
                         className="bg-blue-300 text-white hover:bg-aqua-400 hover:translate-y-[-2px] hover:translate-x-[2px] text-lg px-8 py-6 rounded-md border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all hover:shadow-none"

diff --git a/components/Layout/Navbar.tsx b/components/Layout/Navbar.tsx
@@ -3,13 +3,27 @@ import { Menu, Transition } from "@headlessui/react";
 import { Avatar } from "../Account/Avatar";
 import Link from "next/link";
 import { useActivePlanet } from "@/context/ActivePlanet";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 
 export default function Navbar() {
+  const supabase = useSupabaseClient();
+
   const { activePlanet } = useActivePlanet();
 
   const [menuOpen, setMenuOpen] = useState(false);
   const [settlementsOpen, setSettlementsOpen] = useState(false);
 
+  // Sign out function
+  const signOut = async () => {
+    const { error } = await supabase.auth.signOut();
+    if (error) {
+      console.error("Error signing out:", error.message);
+    } else {
+      // Handle post-sign-out logic (e.g., redirect or notify user)
+      console.log("User signed out successfully");
+    }
+  };
+
   return (
     <div className="fixed top-0 left-0 w-full z-50 backdrop-blur-lg bg-white/30 border-b border-white/20 shadow-lg">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -104,19 +118,6 @@ export default function Navbar() {
                         )}
                       </Menu.Item>
                     </Link>
-                    {/* <Link legacyBehavior href="/scenes/space">
-                      <Menu.Item>
-                        {({ active }) => (
-                          <a
-                            className={`block px-4 py-2 text-sm text-gray-700 ${
-                              active ? "bg-gray-100" : ""
-                            }`}
-                          >
-                            Space Base
-                          </a>
-                        )}
-                      </Menu.Item>
-                    </Link> */}
                   </Menu.Items>
                 </Transition>
               </Menu>
@@ -179,6 +180,7 @@ export default function Navbar() {
                         active ? "bg-gray-100" : ""
                       }`}
                       role="menuitem"
+                      onClick={signOut}  // Trigger the sign-out on click
                     >
                       Logout
                     </a>

diff --git a/components/Projects/Auto/AI4Mars.tsx b/components/Projects/Auto/AI4Mars.tsx
@@ -218,33 +218,6 @@ export function AiForMarsProject({
     };
 
     useEffect(() => {
-        // async function fetchAnomaly() {
-        //     if (!session) {
-        //         setLoading(false);
-        //         return;
-        //     };
-
-        //     try {
-        //         const { data: anomalyData, error: anomalyError } = await supabase
-        //             .from("anomalies")
-        //             .select("*")
-        //             .eq("anomalySet", "automaton-aiForMars");
-
-        //         if (anomalyError) throw anomalyError;
-
-        //         const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)] as Anomaly;
-        //         setAnomaly(randomAnomaly);
-        //         setImageUrl(
-        //             `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/telescope/automaton-aiForMars/${randomAnomaly.id}.jpeg`
-        //         );
-        //     } catch (error: any) {
-        //         console.error("Error fetching anomaly", error.message);
-        //         setAnomaly(null);
-        //     } finally {
-        //         setLoading(false);
-        //     }
-        // }
-
         fetchAnomaly();
     }, [session, supabase]);
 
@@ -267,23 +240,25 @@ export function AiForMarsProject({
     const startTutorial = () => setShowTutorial(true);
 
     return (
-        <div className="flex flex-col items-start gap-4 pb-4 relative w-full overflow-y-auto max-h-[90vh] rounded-lg">
+        <div className="flex flex-col items-start gap-4 pb-4 relative w-full overflow-y-auto max-h-[90vh] rounded-lg overflow-x-hidden">
             {!hasMission20000006 ? (
                 <StarterAiForMars anomalyid={anomaly.id || 69592674} />
             ) : (
                 <>
                     {imageUrl && (
                         <>
-                            <ImageAnnotator
-                                initialImageUrl={imageUrl}
-                                anomalyId={anomaly.id.toString()}
-                                anomalyType="automaton-aiForMars"
-                                missionNumber={200000062}
-                                assetMentioned={imageUrl}
-                                structureItemId={3102} 
-                                annotationType="AI4M"
-                                parentPlanetLocation={anomalyid?.toString()}
-                            />
+                            <div className="w-full overflow-x-auto">
+                                <ImageAnnotator
+                                    initialImageUrl={imageUrl}
+                                    anomalyId={anomaly.id.toString()}
+                                    anomalyType="automaton-aiForMars"
+                                    missionNumber={200000062}
+                                    assetMentioned={imageUrl}
+                                    structureItemId={3102} 
+                                    annotationType="AI4M"
+                                    parentPlanetLocation={anomalyid?.toString()}
+                                />
+                            </div>
                             {/* <ClassificationForm
                                 
                             /> */}
@@ -314,4 +289,4 @@ export function AI4MWrapper() {
             />}
         </div>
     );
-};
+};
diff --git a/components/Structures/IndividualStructure.tsx b/components/Structures/IndividualStructure.tsx
@@ -219,7 +219,7 @@ const IndividualStructure: React.FC<IndividualStructureProps> = ({
 {activeComponent && (
   <DialogContent
     className={`p-4 rounded-3xl text-white mx-auto 
-      w-[90%] h-[90%] max-w-full max-h-[95%] fixed top-1/2 left-1/2 
+      w-[95%] h-[95%] max-w-full max-h-[95%] fixed top-1/2 left-1/2 
       transform -translate-x-1/2 -translate-y-1/2 
       overflow-y-auto bg-[#1D2833]/90`}
   >

diff --git a/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters.tsx b/components/Structures/Missions/Astronomers/PlanetHunters/PlanetHunters.tsx
@@ -251,81 +251,54 @@ const PlanetHuntersSteps = () => {
   const maxChapter = Math.max(...steps.map(step => step.chapter));
 
   return (
-    <div className="flex flex-col items-center width-[100%] text-white rounded-2xl p-6">
-      <div className="w-full mb-6">
-        <h1 className="text-xl font-bold mb-2">Chapter {currentChapter}</h1>
-        <div className="h-2 bg-gray-600 rounded-full w-full mb-4">
+    <div className="flex flex-col items-center w-full text-white rounded-2xl p-6 max-w-3xl mx-auto">
+      <div className="w-full mb-4">
+        <h1 className="text-xl font-bold mb-2 text-center">Chapter {currentChapter}</h1>
+        <div className="h-2 bg-gray-600 rounded-full w-full">
           <div
             className="h-full bg-[#5FCBC3] rounded-full"
-            style={{ width: `${(experiencePoints / (maxChapter * 9)) * 100}%` }}
+            style={{ width: `${(experiencePoints / (steps.length * 9)) * 100}%` }}
           />
         </div>
-        <p className="text-sm text-center">{`Level ${level} - ${experiencePoints} XP`}</p>
+        <p className="text-sm text-center mt-2">{`Level ${level} - ${experiencePoints} XP`}</p>
       </div>
 
-      <div className="flex justify-between w-full mb-6">
+      <div className="flex flex-col sm:flex-row justify-between w-full mb-4">
         <button
-          className="px-4 py-2 bg-gray-800 rounded-full"
+          className="px-4 py-2 bg-gray-800 rounded-full w-full sm:w-auto mb-2 sm:mb-0"
           onClick={() => setCurrentChapter(Math.max(currentChapter - 1, 1))}
           disabled={currentChapter === 1}
         >
           Previous Chapter
         </button>
         <button
-          className="px-4 py-2 bg-gray-800 rounded-full"
-          onClick={() => setCurrentChapter(Math.min(currentChapter + 1, maxChapter))}
-          disabled={currentChapter === maxChapter}
+          className="px-4 py-2 bg-gray-800 rounded-full w-full sm:w-auto"
+          onClick={() => setCurrentChapter(Math.min(currentChapter + 1, 2))}
+          disabled={currentChapter === 2}
         >
           Next Chapter
         </button>
       </div>
 
-      <div className="bg-gray-700 p-6 rounded-2xl w-full mb-6">
-        <div className="grid grid-cols-2 gap-4 w-full">
-          {filteredSteps.slice(0, 2).map((step) => (
-            <div
-              key={step.id}
-              className={`flex items-center p-6 rounded-2xl cursor-pointer ${
-                step.completedCount > 0 ? "bg-gray-700" : "bg-blue-500"
-              }`}
-              onClick={() => setSelectedMission(step)}
-            >
-              <step.icon className={`h-10 w-10 ${step.color}`} />
-              <div className="ml-4">
-                <h2 className={`text-lg font-bold ${step.color}`}>{step.title}</h2>
-                <p className={`text-sm ${step.color}`}>{step.description}</p>
+      <div className="bg-gray-700 p-6 rounded-2xl w-full">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          {steps
+            .filter((step) => step.chapter === currentChapter)
+            .map((step) => (
+              <div
+                key={step.id}
+                className="flex items-center p-4 rounded-2xl bg-gray-800 hover:bg-gray-700 cursor-pointer"
+                onClick={() => setSelectedMission(step)}
+              >
+                <step.icon className={`w-8 h-8 ${step.color}`} />
+                <div className="ml-4 flex-1">
+                  <h2 className={`text-lg font-bold ${step.color}`}>{step.title}</h2>
+                  <p className="text-sm">{step.description}</p>
+                </div>
               </div>
-              <div className="ml-auto text-right">
-                <p className="text-xs">Completed</p>
-                <p className="text-xl font-bold">{step.completedCount}</p>
-              </div>
-            </div>
-          ))}
+            ))}
         </div>
       </div>
-
-      <div className="grid gap-4 w-full mt-6">
-        {filteredSteps.slice(2).map((step) => (
-          <div
-            key={step.id}
-            className={`flex items-center p-6 rounded-2xl shadow-md cursor-pointer ${
-              step.completedCount > 0 ? "bg-gray-700" : "bg-blue-500"
-            }`}
-            onClick={() => setSelectedMission(step)}
-          >
-            <step.icon className={`h-10 w-10 ${step.color}`} />
-            <div className="ml-4">
-              <h2 className={`text-lg font-bold ${step.color}`}>{step.title}</h2>
-              <p className={`text-sm ${step.color}`}>{step.description}</p>
-            </div>
-            <div className="ml-auto text-right">
-              <p className="text-xs">Completed</p>
-              <p className="text-xl font-bold">{step.completedCount}</p>
-            </div>
-          </div>
-        ))}
-      </div>
-
       <div className="mt-6">
         {renderMission(tutorialMission)}
       </div>

diff --git a/components/Structures/Missions/BasePlate.tsx b/components/Structures/Missions/BasePlate.tsx
@@ -69,14 +69,14 @@ const MissionShell = ({
           setUsername(data.username);
           setFirstName(data?.full_name);
           setAvatarPreview(data?.avatar_url || "");
-        }
-      }
+        };
+      };
       setLoading(false);
-    }
+    };
 
     if (session?.user?.id) {
       getProfile();
-    }
+    };
 
     return () => {
       ignore = true;
@@ -183,11 +183,11 @@ const MissionShell = ({
           {currentChapter === 1 ? (
             <>
               <div className="bg-gray-700 p-6 rounded-2xl w-full mb-6">
-                <div className="grid grid-cols-2 gap-4 w-full">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
                   {missions.slice(0, 2).map((mission) => renderMission(mission))}
                 </div>
               </div>
-              <div className="grid gap-4 w-full mt-6 overflow-y-auto max-h-[calc(100vh-200px)]">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full mt-6 overflow-y-auto max-h-[calc(100vh-200px)]">
                 {missions.slice(2).map((mission) => renderMission(mission))}
               </div>
             </>
@@ -209,7 +209,7 @@ const MissionShell = ({
       <AnimatePresence>
         {selectedMission && (
           <motion.div
-            className="flex flex-col bg-[#1D2833] rounded-2xl p-6 w-full max-w-4xl mx-auto"
+            className="flex flex-col bg-[#1D2833] rounded-2xl p-6 w-full max-w-5xl mx-auto"
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             exit={{ opacity: 0, scale: 0.95 }}
@@ -219,7 +219,11 @@ const MissionShell = ({
               <Button onClick={() => setSelectedMission(null)}>Back</Button>
             </div>
             <div className="flex-1 overflow-y-auto max-h-[calc(100vh-150px)]">
-              {selectedMission.internalComponent && <selectedMission.internalComponent />}
+              {selectedMission.internalComponent && (
+                <div className="overflow-x-auto w-full">{/* Add this wrapper */}
+                  <selectedMission.internalComponent />
+                </div>
+              )}
             </div>
           </motion.div>
         )}