🍑🪜 ↝ [SGV2-20 SGV2-21]: A component to view your existing rovers (not quite working yet, however)

Author: Gizmotronn

components/Gameplay/Automatons/BuildRover.tsx

@@ -86,4 +86,75 @@ export default function BuildFirstRover() {
             )}
         </div>
     );
-}
+};
+
+export function ViewRovers() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [userRovers, setUserRovers] = useState<any[]>([]);
+
+    useEffect(() => {
+        getRovers();
+    }, [session]);
+
+    async function getRovers() {
+        try {
+            if (!session || !session.user || !session.user.id) {
+                console.log("User session not available");
+                return;
+            }
+    
+            const { data: userRovers, error: userRoversError } = await supabase
+                .from("inventoryUSERS")
+                .select("*")
+                .eq("owner", session.user.id)
+                .eq("item", 23 || 24); // Adjust this condition as needed
+    
+            if (userRoversError) {
+                throw userRoversError;
+            }
+    
+            if (userRovers && userRovers.length > 0) {
+                // Extract item IDs from userRovers
+                const itemIds = userRovers.map(rover => rover.item);
+    
+                // Fetch details of items from inventoryITEMS table
+                const { data: items, error: itemsError } = await supabase
+                    .from("inventoryITEMS")
+                    .select("*")
+                    .in("id", itemIds);
+    
+                if (itemsError) {
+                    throw itemsError;
+                }
+    
+                // Merge item details with userRovers
+                const mergedRovers = userRovers.map(rover => {
+                    const item = items.find(item => item.id === rover.item);
+                    return { ...rover, item };
+                });
+    
+                setUserRovers(mergedRovers);
+                console.log('Test', mergedRovers);
+            } else {
+                setUserRovers([]);
+            }
+        } catch (error) {
+            console.error("Error fetching rovers:", error.message);
+        }
+    };
+    
+
+    return (
+        <div className="grid grid-cols-3 gap-4">
+            {userRovers.map(rover => (
+                <div key={rover.id} className="border p-4">
+                    <img src={rover.icon_url} alt={rover.name} className="h-24 mx-auto mb-2" />
+                    <p>ID: {rover.id}</p>
+                    <p>Name: {rover.name}</p>
+                </div>
+            ))}
+        </div>
+    );
+};

components/Gameplay/mission-list.tsx

@@ -61,7 +61,7 @@ export function MissionList() {
     <>
       <CardHeader>
         <CardTitle>To-Do List</CardTitle>
-        <CardDescription>Manage your daily tasks</CardDescription>
+        <CardDescription>Missions to become a Star Sailor</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4 overflow-y-auto max-h-[480px] pr-4">
         {missions.map((mission, index) => (

pages/tests/onboarding.tsx

@@ -1,4 +1,4 @@
-import BuildFirstRover from "../../components/Gameplay/Automatons/BuildRover";
+import BuildFirstRover, { ViewRovers } from "../../components/Gameplay/Automatons/BuildRover";
 import { PickYourPlanet } from "../../components/Gameplay/Chapter 1/onboarding";
 import { MissionList } from "../../components/Gameplay/mission-list";
 import Layout from "../../components/_Core/Section/Layout";
@@ -26,6 +26,7 @@ export default function OnboardingTest() {
         </style>
             <PickYourPlanet />
             <BuildFirstRover />
+            <ViewRovers />
             <MissionList />
         </>
     );