🌺🏄🏻‍♂️ ↝ [SSG-32 SSG-34 SSC-26]: Making some UI adjustments for exopl…

…anet scene

app/auth/LoginModal.tsx

@@ -9,6 +9,8 @@ import { MicroscopeIcon, CodeIcon, FilesIcon } from "lucide-react";
 import { Flexbox } from 'react-layout-kit';
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 
 interface AuthPageProps {
   children: ReactNode;
@@ -57,6 +59,8 @@ const Navbar = () => {
 };
 
 function SupabaseAuthWrapper({ children }: { children: ReactNode }) {
+  const supabase = useSupabaseClient();
+
     const { styles } = useStyles();
 
   return (
@@ -88,12 +92,52 @@ function SupabaseAuthWrapper({ children }: { children: ReactNode }) {
       >
         <strong className="font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r from-green-200 to-amber-300" style={{ fontSize: 'min(56px, 8vw)' }}>Star Sailors</strong>
         </Flexbox>
-        <p className="max-w-[600px] text-muted-foreground md:text-xl">Explore the cosmos & catalogue discoveries in different scientific disciplines</p>
+        <p className="max-w-[600px] text-muted-foreground text-blue-800 md:text-xl">Explore the cosmos & catalogue discoveries in different scientific disciplines</p>
           <div className="max-w-md w-full mx-auto py-5">
-            <div className="bg-gray-100 p-8 rounded-lg shadow-lg">
-              {children}
+            <Card>
+          <CardContent>
+          <div className="relative my-4">
+            <div className="absolute inset-0 flex items-center">
+              <Separator className="w-full" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
             </div>
           </div>
+          <Auth
+            supabaseClient={supabase}
+            providers={["google"]}
+            socialLayout="horizontal"
+            theme="light"
+          />
+
+          <div className="flex flex-col gap-3 mt-6">
+            <h3 className="text-lg font-semibold">Connect</h3>
+            <Link 
+              href="https://threads.net/droidology" 
+              className="flex items-center gap-2 p-2 rounded-md bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600 transition-colors"
+            >
+              <MicroscopeIcon className="h-5 w-5" />
+              Threads
+            </Link>
+            <Link 
+              href="https://github.com/signal-k" 
+              className="flex items-center gap-2 p-2 rounded-md bg-gradient-to-r from-gray-800 to-gray-900 text-white hover:from-gray-900 hover:to-black transition-colors"
+            >
+              <CodeIcon className="h-5 w-5" />
+              Github
+            </Link>
+            <Link 
+              href="https://github.com/signal-k/manuscript" 
+              className="flex items-center gap-2 p-2 rounded-md bg-gradient-to-r from-blue-500 to-cyan-500 text-white hover:from-blue-600 hover:to-cyan-600 transition-colors"
+            >
+              <FilesIcon className="h-5 w-5" />
+              Documentation
+            </Link>
+          </div>
+        </CardContent>
+        </Card>
+          </div>
         </div>
       </div>
     </div>

app/page.tsx

@@ -40,7 +40,7 @@ export default function Home() {
 
   useEffect(() => {
     console.log(session?.user.id);
-  })
+  });
 
   const planetViews: Record<number, JSX.Element> = {
     10: <MercuryView />,

app/scenes/earth/page.tsx

@@ -18,7 +18,7 @@ const EarthView: React.FC = () => {
     <div className="min-h-screen w-full flex flex-col">
     <img
       className="absolute inset-0 w-full h-full object-cover"
-      src="/assets/Backdrops/Mercury.png"
+      src="/assets/Backdrops/Earth.png"
     />
     <div className="relative min-h-screen">
         <EarthStructures />

app/tests/page.tsx

@@ -3,12 +3,14 @@
 import React, { useEffect, useState } from "react";
 import StarnetLayout from "@/components/Layout/Starnet";
 import { ExoplanetTransitHunter } from "@/components/Projects/Telescopes/ExoplanetC23";
+import SwitchPlanet from "@/components/(scenes)/travel/SolarSystem";
 
 export default function TestPage() {
     return (
         <StarnetLayout>
             <div className="1">
-                <ExoplanetTransitHunter />
+                {/* <ExoplanetTransitHunter /> */}
+                <SwitchPlanet />
             </div>
         </StarnetLayout>
     );

components/(scenes)/travel/SolarSystem.tsx

@@ -403,12 +403,14 @@ export default function SwitchPlanet() {
             <ul>
               {compatibleMissions.map((mission) => (
                 <li
-                  key={mission.id}
-                  className={`cursor-pointer hover:bg-gray-700 p-2 rounded ${
-                    selectedMission?.id === mission.id ? "bg-gray-600" : ""
-                  }`}
-                  onClick={() => handleMissionClick(mission)}
-                >
+                          key={mission.id}
+                          onClick={() => handleMissionClick(mission)}
+                          className={`cursor-pointer p-2 text-center rounded-lg transition-colors ${
+                            selectedMission?.id === mission.id
+                              ? "bg-[#4BB3A5]"
+                              : "bg-gray-700 hover:bg-gray-600"
+                          }`}
+                        >
                   {mission.name}
                 </li>
               ))}

components/Structures/Auto/AllAutomatons.tsx

@@ -3,11 +3,12 @@
 import React, { useState, useEffect } from "react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
+import { MiningComponentComponent } from "../Mining/Mining"; 
 
 interface InventoryItem {
     id: number;
     icon_url: string;
-}
+};
 
 export default function AllAutomatonsOnActivePlanet() {
     const supabase = useSupabaseClient();
@@ -17,6 +18,21 @@ export default function AllAutomatonsOnActivePlanet() {
     const [automatons, setAutomatons] = useState<{ id: number; iconUrl: string }[]>([]);
     const [inventoryItems, setInventoryItems] = useState<InventoryItem[]>([]);
     const [loading, setLoading] = useState(true);
+    const [isModalVisible, setIsModalVisible] = useState(false);
+
+    const handleAutomatonClick = () => {
+        setIsModalVisible(true);
+    };
+
+    const closeModal = () => {
+        setIsModalVisible(false);
+    };
+
+    const handleOverlayClick = (event: React.MouseEvent) => {
+        if (event.target === event.currentTarget) {
+            closeModal();
+        }
+    };
 
     useEffect(() => {
         const fetchInventoryItems = async () => {
@@ -30,7 +46,7 @@ export default function AllAutomatonsOnActivePlanet() {
         };
 
         fetchInventoryItems();
-    }, []);
+    }, []); 
 
     useEffect(() => {
         const fetchAutomatons = async () => {
@@ -44,7 +60,7 @@ export default function AllAutomatonsOnActivePlanet() {
                     .select("id, item")
                     .eq("anomaly", activePlanet.id)
                     .eq("owner", session.user.id)
-                    .eq("item", 23);
+                    .eq("item", 23); 
 
                 if (error) throw error;
 
@@ -70,7 +86,7 @@ export default function AllAutomatonsOnActivePlanet() {
 
     if (loading) {
         return <div>Loading...</div>;
-    }
+    };
 
     return (
         <div className="p-3">
@@ -80,11 +96,30 @@ export default function AllAutomatonsOnActivePlanet() {
                         <img 
                             src={automaton.iconUrl} 
                             alt={`Automaton ${automaton.id}`} 
-                            className="w-16 h-16 object-cover" 
+                            className="w-16 h-16 object-cover cursor-pointer" 
+                            onClick={handleAutomatonClick} 
                         />
                     </div>
                 ))}
             </div>
+
+            {isModalVisible && (
+                <div 
+                    className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
+                    onClick={handleOverlayClick}
+                >
+                    <div className="relative bg-white w-1/2 h-1/2 p-4 overflow-y-auto">
+                        <button
+                            className="absolute top-2 right-2 text-2xl font-bold"
+                            onClick={closeModal}
+                        >
+                            &times;
+                        </button>
+
+                        <MiningComponentComponent />
+                    </div>
+                </div>
+            )}
         </div>
     );
-}
+};

components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

constants/Structures/Properties.tsx

@@ -301,16 +301,16 @@ export const StructuresConfig: StructureConfig = {
         },
       ],
       buttons: [
-        {
-          icon: <CaravanIcon className="w-6 h-6 text-[#5e81ac]" />,
-          text: "Build a rocket",
-        },
+        // {
+        //   icon: <CaravanIcon className="w-6 h-6 text-[#5e81ac]" />,
+        //   text: "Build a rocket",
+        // },
         {
           icon: <PowerIcon className="w-6 h-6 text-[#5e81ac]" />,
           text: "Launch a rocket (travel)",
           // dynamicComponent: <LaunchpadStructure />,
           dynamicComponent: <SwitchPlanet />,
-          sizePercentage: 100,
+          sizePercentage: 60,
 
         },
       ]