🎩🍟 ↝ [SSC-84 SSG-122 SSG-119]: Fixing some classification/annotation …

…bugs and a bit of brainstorming

components/Layout/Navbar.tsx

@@ -5,9 +5,9 @@ import Link from "next/link";
 import { useActivePlanet } from "@/context/ActivePlanet";
 
 export default function Navbar() {
-  const {activePlanet } = useActivePlanet();
-
+  const { activePlanet } = useActivePlanet();
   const [menuOpen, setMenuOpen] = useState(false);
+  const [settlementsOpen, setSettlementsOpen] = useState(false);
 
   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">
@@ -20,23 +20,111 @@ export default function Navbar() {
                   src="/planet.svg"
                   alt="Logo"
                   className="h-8 w-8"
-                  style={{ marginLeft: "4px" }} 
+                  style={{ marginLeft: "4px" }}
                 />
               </a>
             </Link>
-            <Link legacyBehavior href="/">
-              <div className="text-lg font-bold text-white hidden sm:block">
-                Star Sailors: {activePlanet?.content || "..."}
-              </div>
-            </Link>
+            <div className="relative">
+              <Menu as="div" className="relative inline-block text-left">
+                <div>
+                  <Menu.Button
+                    className="text-lg font-bold text-white hidden sm:flex items-center space-x-2 p-2 bg-[#5FCBC3]/60 rounded-lg hover:bg-[#5FCBC3]/80 transition"
+                    onClick={() => setSettlementsOpen((prev) => !prev)}
+                  >
+                    <span>Star Sailors: {activePlanet?.content || "..."}</span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      strokeWidth={1.5}
+                      stroke="currentColor"
+                      className="w-5 h-5"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M19.5 9l-7.5 7.5L4.5 9"
+                      />
+                    </svg>
+                  </Menu.Button>
+                </div>
+                <Transition
+                  show={settlementsOpen}
+                  enter="transition ease-out duration-100"
+                  enterFrom="transform opacity-0 scale-95"
+                  enterTo="transform opacity-100 scale-100"
+                  leave="transition ease-in duration-75"
+                  leaveFrom="transform opacity-100 scale-100"
+                  leaveTo="transform opacity-0 scale-95"
+                >
+                  <Menu.Items
+                    static
+                    className="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                  >
+                    <Link legacyBehavior href="/">
+                      <Menu.Item>
+                        {({ active }) => (
+                          <a
+                            className={`block px-4 py-2 text-sm text-gray-700 ${
+                              active ? "bg-gray-100" : ""
+                            }`}
+                          >
+                            My Settlements
+                          </a>
+                        )}
+                      </Menu.Item>
+                    </Link>
+                    <Link legacyBehavior href="/scenes/desert">
+                      <Menu.Item>
+                        {({ active }) => (
+                          <a
+                            className={`block px-4 py-2 text-sm text-gray-700 ${
+                              active ? "bg-gray-100" : ""
+                            }`}
+                          >
+                            Desert Base
+                          </a>
+                        )}
+                      </Menu.Item>
+                    </Link>
+                    <Link legacyBehavior href="/scenes/ocean">
+                      <Menu.Item>
+                        {({ active }) => (
+                          <a
+                            className={`block px-4 py-2 text-sm text-gray-700 ${
+                              active ? "bg-gray-100" : ""
+                            }`}
+                          >
+                            Ocean Base
+                          </a>
+                        )}
+                      </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>
+            </div>
           </div>
 
           <Menu as="div" className="relative">
             <div>
               <Menu.Button
                 className="flex items-center justify-center w-10 h-10 rounded-full overflow-hidden bg-[#5FCBC3]/60 hover:bg-[#5FCBC3]/80 transition"
                 onClick={() => setMenuOpen((prev) => !prev)}
-                style={{ marginRight: "4px" }} 
+                style={{ marginRight: "4px" }}
               >
                 <Avatar />
               </Menu.Button>
@@ -58,7 +146,6 @@ export default function Navbar() {
                   <Menu.Item>
                     {({ active }) => (
                       <a
-                        href="#profile"
                         className={`block px-4 py-2 text-sm text-gray-700 ${
                           active ? "bg-gray-100" : ""
                         }`}
@@ -71,7 +158,6 @@ export default function Navbar() {
                 <Menu.Item>
                   {({ active }) => (
                     <a
-                      href="#settings"
                       className={`block px-4 py-2 text-sm text-gray-700 ${
                         active ? "bg-gray-100" : ""
                       }`}
@@ -83,7 +169,6 @@ export default function Navbar() {
                 <Menu.Item>
                   {({ active }) => (
                     <a
-                      href="#logout"
                       className={`block px-4 py-2 text-sm text-gray-700 ${
                         active ? "bg-gray-100" : ""
                       }`}

components/Projects/(classifications)/Annotating/Annotator.tsx

@@ -88,7 +88,7 @@ export default function ImageAnnotator({
       } else if (data) {
         const url = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/media/${data.path}`;
         setUploads((prev) => [...prev, url]);
-        setIsFormVisible(true); // Show the form after a successful upload
+        setIsFormVisible(true);
       }
     } catch (err) {
       console.error('Unexpected error during canvas upload:', err);
@@ -97,17 +97,38 @@ export default function ImageAnnotator({
     }
   };
 
+  const renderCanvas = () => {
+    if (!canvasRef.current || !imageRef.current) return;
+    const ctx = canvasRef.current.getContext('2d');
+    if (ctx) {
+      ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+      ctx.drawImage(imageRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height);
+    };
+  };  
+
+  useEffect(() => {
+    if (!initialImageUrl) return;
+
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      imageRef.current = img;
+      setSelectedImage(initialImageUrl);
+      renderCanvas();
+    };
+    img.src = initialImageUrl;
+  }, [initialImageUrl]);  
+
   useEffect(() => {
-    if (initialImageUrl) {
-      const img = new Image();
-      img.crossOrigin = 'anonymous';
-      img.onload = () => {
-        setSelectedImage(initialImageUrl);
-        imageRef.current = img;
-      };
-      img.src = initialImageUrl;
+    if (imageRef.current && canvasRef.current) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        renderCanvas(); 
+      }
     }
-  }, [initialImageUrl]);
+  }, [selectedImage]);
 
   useEffect(() => {
     const options = drawings.reduce((acc, drawing) => {

components/Projects/Auto/AI4Mars.tsx

@@ -288,7 +288,6 @@ export function AiForMarsProject({
                             /> */}
                         </>
                     )}
-                    <p>Selected Anomaly ID: {anomalyid}</p>
                     <button
                         onClick={startTutorial}
                         className="mt-4 px-4 py-2 bg-[#85DDA2] text-[#2C3A4A] rounded-md shadow-md"
@@ -308,7 +307,7 @@ export function AI4MWrapper() {
         <div className="space-y-8">
             {!selectedAnomaly && (
                 <PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
-            )}
+            )} 
             {selectedAnomaly && 
                 <AiForMarsProject anomalyid={selectedAnomaly}
             />}

components/Projects/Lidar/JovianVortexHunter.tsx

@@ -7,6 +7,8 @@ import { Props } from "@/types/Anomalies";
 
 import { Anomaly } from "../Telescopes/Transiting";
 import { useActivePlanet } from "@/context/ActivePlanet";
+import { PreferredGaseousClassifications } from "@/components/Structures/Missions/PickPlanet";
+import ImageAnnotator from "../(classifications)/Annotating/Annotator";
 
 const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL; 
 
@@ -138,7 +140,11 @@ export function StarterJovianVortexHunter({
     );
 };
 
-export function LidarJVHSatellite() {
+interface SelectedAnomProps {
+    anomalyid?: number;
+}
+
+export function LidarJVHSatellite({ anomalyid }: SelectedAnomProps) {
     const supabase = useSupabaseClient();
     const session = useSession();
 
@@ -235,13 +241,24 @@ export function LidarJVHSatellite() {
                         {imageUrl && <img src={imageUrl} alt="Vortex" className="w-64 h-64 contained" />}
                     </div>
                     {imageUrl && (
-                        <ClassificationForm
+                        <>
+                        <ImageAnnotator
                             anomalyId={anomaly.id.toString()}
                             anomalyType="lidar-jovianVortexHunter"
                             missionNumber={200000072}
                             assetMentioned={imageUrl}
                             structureItemId={3105}
+                            initialImageUrl={imageUrl}
+                            annotationType="AI4M"//JVH"
                         />
+                        {/* <ClassificationForm
+                            anomalyId={anomaly.id.toString()}
+                            anomalyType="lidar-jovianVortexHunter"
+                            missionNumber={200000072}
+                            assetMentioned={imageUrl}
+                            structureItemId={3105}
+                        /> */}
+                        </>
                     )}
                 </>
             )}
@@ -253,4 +270,19 @@ export function LidarJVHSatellite() {
             {content}
         </div>
     );
+};
+
+export function JVHWrapper() {
+    const [selectedAnomaly, setSelectedAnomaly] = useState<number | null>(null);
+
+    return (
+        <div className="space-y-8">
+            {!selectedAnomaly && (
+                <PreferredGaseousClassifications onSelectAnomaly={setSelectedAnomaly} />
+            )}
+            {selectedAnomaly && 
+                <LidarJVHSatellite anomalyid={selectedAnomaly} />
+            }
+        </div>
+    );
 };

components/Projects/Telescopes/Transiting.tsx

@@ -134,7 +134,7 @@ export function StarterTelescopeTess({ anomalyid }: SelectedAnomProps) {
                 )} */}
                 {selectedAnomaly && (
                     <ImageAnnotator
-                        otherAssets={imageUrls}
+                        // otherAssets={imageUrls}
                         anomalyType='planet'
                         missionNumber={1372001}
                         structureItemId={3103}

components/Structures/Build/EditMode.tsx

@@ -34,14 +34,14 @@ export function UnownedSurfaceStructures() {
         };
 
         try {
-            const { data: researchedStructures, error: researchError } = await supabase
-                .from('researched')
-                .select('tech_type')
-                .eq('user_id', session.user.id);
+            // const { data: researchedStructures, error: researchError } = await supabase
+            //     .from('researched')
+            //     .select('tech_type')
+            //     .eq('user_id', session.user.id);
 
-            if (researchError) throw researchError;
+            // if (researchError) throw researchError;
 
-            const researchedIds = researchedStructures.map((item: { tech_type: string }) => Number(item.tech_type));
+            // const researchedIds = researchedStructures.map((item: { tech_type: string }) => Number(item.tech_type));
 
             const { data: userInventory, error: inventoryError } = await supabase
                 .from('inventory')
@@ -57,7 +57,7 @@ export function UnownedSurfaceStructures() {
             const inventoryItems: InventoryItem[] = await response.json();
 
             const surfaceStructures = inventoryItems.filter(item =>
-                item.ItemCategory === 'Structure' && item.locationType === 'Surface' && researchedIds.includes(item.id)
+                item.ItemCategory === 'Structure' && item.locationType === 'Surface' // && researchedIds.includes(item.id)
             );
 
             const unowned = surfaceStructures.filter(structure => !ownedItems.includes(structure.id));

components/Structures/Missions/Astronomers/DailyMinorPlanet/DailyMinorPlanet.tsx

@@ -6,7 +6,17 @@ import { DailyMinorPlanet, StarterDailyMinorPlanet } from "@/components/Projects
 import VoteDMPClassifications from "./DMPVote";
 import DMPGenerator from "./AsteroidMaker";
 
-import { Mission } from "@/components/Structures/Missions/Meteorologists/Cloudspotting/CloudspottingOnMars";
+interface Mission {
+  id: number;
+  chapter: number;
+  title: string;
+  description: string;
+  icon: React.ElementType;
+  points?: number;
+  completedCount?: number;
+  internalComponent: React.ElementType | (() => JSX.Element);
+  color: string;
+};
 
 const DailyMinorPlanetMissions = () => {
   const supabase = useSupabaseClient();
@@ -125,9 +135,8 @@ const DailyMinorPlanetMissions = () => {
     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} />;
     }

components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour.tsx

@@ -12,7 +12,7 @@ interface Mission {
     description: string;
     icon: React.ElementType;
     points: number;
-    completedCount: number;
+    completedCount?: number;
     internalComponent?: React.ElementType | (() => JSX.Element);
     color: string;
 };
@@ -159,7 +159,6 @@ const PlanetFour = () => {
             "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} />
         ),

components/Structures/Missions/BasePlate.tsx

@@ -12,7 +12,7 @@ interface MissionConfig {
   title: string;
   description: string;
   icon: React.ElementType;
-  points: number;
+  points?: number;
   internalComponent?: React.ElementType;
   color: string;
   action?: () => void;