🦆🤶🏻 ↝ Merge pull request #102 from Signal-K/SGV2-10-Onboarding-enviro…

…nment

🌚🦆 ↝ [SGV2-10 SGV2-2]: Improving layout for navigation & orientation

components/Content/Assets/PlanetCharacter.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+
+export const RoverCharacter: React.FC<{ position: { x: number; y: number } }> = ({ position }) => {
+  const [angle, setAngle] = useState<number>(0);
+  const [direction, setDirection] = useState<number>(1);
+
+  useEffect(() => {
+    const interval = setInterval(updateAnimation, 50);
+    return () => clearInterval(interval);
+  }, []);
+
+  const updateAnimation = () => {
+    const newAngle = angle + 1 * direction;
+    if (newAngle >= 10 || newAngle <= -10) {
+      setDirection(direction * -1);
+    }
+    setAngle(newAngle);
+  };
+
+  return (
+    <div className="absolute" style={{ left: `${position.x}px`, bottom: `${position.y}px` }}>
+      <Image
+        src="/assets/Inventory/Planets/rover.png"
+        alt="Character"
+        layout="fill"
+        objectFit="contain"
+        className="transform transition-transform duration-500"
+        style={{ transform: `rotate(${angle}deg)` }}
+      />
+    </div>
+  );
+};
+
+export const PlanetCharacter: React.FC<{ position: { x: number; y: number } }> = ({ position }) => {
+  const [angle, setAngle] = useState<number>(0);
+  const [direction, setDirection] = useState<number>(1);
+
+  useEffect(() => {
+    const interval = setInterval(updateAnimation, 50);
+    return () => clearInterval(interval);
+  }, []);
+
+  const updateAnimation = () => {
+    const newAngle = angle + 1 * direction;
+    if (newAngle >= 10 || newAngle <= -10) {
+      setDirection(direction * -1);
+    }
+    setAngle(newAngle);
+  };
+
+  return (
+    <div className="absolute" style={{ left: `${position.x}px`, bottom: `${position.y}px` }}>
+      <Image
+        src="/assets/Inventory/Planets/Mars.png"
+        alt="Character"
+        layout="fill"
+        objectFit="contain"
+        className="transform transition-transform duration-500"
+        style={{ transform: `rotate(${angle}deg)` }}
+      />
+    </div>
+  );
+};
+
+export default PlanetCharacter;

components/Content/Inventory/UserOwnedItems.tsx

@@ -81,10 +81,80 @@ const OwnedItemsList: React.FC = () => {
         })}
       </div>
     );    
-  };
+};
 
 export default OwnedItemsList;
 
+interface InventoryItem {
+  id: number;
+  name: string;
+  icon_url: string;
+  quantity: number;
+}
+
+export const ItemsVerticalList: React.FC = () => {
+  const session = useSession();
+  const [itemDetails, setItemDetails] = useState<InventoryItem[]>([]);
+  const supabase = useSupabaseClient();
+
+  useEffect(() => {
+    const fetchOwnedItems = async () => {
+      try {
+        if (!session) return;
+
+        const user = session.user.id;
+        // Fetch owned items from the database
+        const { data: ownedItemsData, error: ownedItemsError } = await supabase
+          .from('inventoryUSERS')
+          .select('*')
+          .eq('owner', user)
+          .gt('id', 20);
+
+        if (ownedItemsError) {
+          throw ownedItemsError;
+        }
+
+        if (ownedItemsData) {
+          const itemIds = ownedItemsData.map(item => item.item);
+          // Fetch details of owned items
+          const { data: itemDetailsData, error: itemDetailsError } = await supabase
+            .from('inventoryITEMS')
+            .select('*')
+            .in('id', itemIds);
+
+          if (itemDetailsError) {
+            throw itemDetailsError;
+          }
+
+          if (itemDetailsData) {
+            setItemDetails(itemDetailsData);
+          }
+        }
+      } catch (error) {
+        console.error('Error fetching owned items:', error.message);
+      }
+    };
+
+    fetchOwnedItems();
+  }, [session]);
+
+  return (
+    <div className="w-full">
+      {itemDetails.map(item => (
+        <div key={item.id} className="flex items-center justify-between mb-2">
+          <div className="flex items-center space-x-2">
+            <div className="w-10 h-10 rounded-full overflow-hidden">
+              <img src={item.icon_url} alt={item.name} className="w-full h-full object-cover" />
+            </div>
+            <p className="text-sm">{item.name}</p>
+          </div>
+          <p className="text-sm">x{item.quantity}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
 export const SectorStructureOwned: React.FC<{ sectorid: string }> = ({ sectorid }) => {
     const supabase = useSupabaseClient();
     const session = useSession();

components/Content/Planets/GalleryList.tsx

@@ -122,8 +122,8 @@ const PlanetGalleryWithSectors: React.FC = () => {
       let query = supabase
         .from('basePlanets')
         .select('*')
-        .order('created_at', { ascending: false })
-        .limit(200);
+        .order('created_at', { ascending: true })
+        .limit(3); // Set this to be owned planets
 
       const { data, error } = await query;
 
@@ -302,12 +302,12 @@ export const Garden: React.FC<GardenProps> = ({ onClose }) => {
     <div className={`fixed inset-x-0 bottom-0 flex justify-center transition-transform duration-300 ${isOpen ? 'translate-y-0' : 'translate-y-full'}`}>
       <div className="bg-cover bg-center w-full sm:max-w-screen-lg sm:w-full max-h-96vh overflow-y-auto shadow-lg relative rounded-t-3xl">
         <div style={{ backgroundImage: `url('/garden.png')` }} className="bg-cover bg-center h-96vh flex items-center justify-center relative rounded-t-3xl">
-          <button
+          {/* <button
             onClick={handleClose}
             className="absolute top-4 right-4 px-4 py-2 bg-gray-200 text-gray-800 rounded"
           >
             Close
-          </button>
+          </button> */}
           <PlanetGalleryWithSectors />
         </div>
       </div>

components/Content/Planets/Sectors/Grid.tsx

@@ -0,0 +1,67 @@
+import { useSupabaseClient } from "@supabase/auth-helpers-react";
+import Link from "next/link";
+import React, { useEffect, useState } from "react";
+
+export default function PublicSectorsGrid() {
+    const supabase = useSupabaseClient();
+
+    const [sectors, setSectors] = useState([]);
+
+    async function fetchSectors() {
+        try {
+            const { data, error } = await supabase
+                .from('basePlanetSectors')
+                .select('*')
+                .limit(10)
+
+            if (error) {
+                console.assert('Error fetching sector data: ', error.message);
+                return;
+            };
+
+            setSectors(data);
+        } catch (error) {
+            console.error(error);
+        };
+    };
+
+    useEffect(() => {
+        fetchSectors();
+    }, [])
+
+    return (
+        <div className="grid-container mb-24">
+            {sectors.map(( sector ) => (
+                <Link legacyBehavior key={sector.id} href={`/planets/sector/${sector.id}`}>
+                    <a className="sector-link">
+                        <div className="sector-square">
+                            {/* {sector.coverUrl && (
+                                <img src={sector.coverUrl} alt="Sector Cover" className="sector-cover" />
+                            )} */}
+                        </div>
+                        <style jsx>{`
+                            .grid-container {
+                            display: grid;
+                            grid-template-columns: repeat(5, 1fr);
+                            grid-auto-rows: 1fr;
+                            gap: 10px;
+                            margin-top: 20px;
+                            position: absolute;
+                            bottom: 20px;
+                            left: 50%;
+                            transform: translateX(-50%);
+                            z-index: 1;
+                            }
+
+                            .sector-square {
+                            width: 100px;
+                            height: 100px;
+                            border: 1px solid white;
+                            }
+                    `}</style>
+                    </a>
+                </Link>
+            ))}
+        </div>
+    );
+};

components/Content/Planets/Sectors/SectorSetup.tsx

@@ -29,7 +29,7 @@ export default function CreateBasePlanetSector() {
                 }
             } catch (error) {
                 console.error(error.message);
-            }
+            };
         };
 
         fetchUserPlanet();

components/Content/Populate/StructureCreate.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import axios from "axios";
 import Link from "next/link";
+import { LightkurveBaseGraph } from "../Planets/PlanetData/ContentPlaceholder";
 
 interface Structure {
     id: number;
@@ -162,9 +163,61 @@ interface PlacedStructuresProps {
 export const PlacedStructures = ({ sectorId }) => {
     const supabase = useSupabaseClient();
     const [placedStructures, setPlacedStructures] = useState([]);
+    const [usingStructure, setUsingStructure] = useState(null);
+
+    // Planet data
+    const [planetData, setPlanetData] = useState(null);
+
+    useEffect(() => {
+      if (sectorId) {
+        getPlanetData();
+      };
+    }, [sectorId]);
+
+    const getPlanetData = async () => {
+      try {
+        const { data, error } = await supabase
+            .from('basePlanetSectors')
+            .select('anomaly')
+            .eq("id", sectorId);
+
+        if (data) {
+            setPlanetId(data);
+        }
+
+        if (error) {
+            throw error;
+        }
+    } catch (error) {
+        console.error(error.message);
+    }
+      try {
+        const { data, error } = await supabase
+          .from("basePlanets")
+          .select("*")
+          .eq("id", planetId)
+          .single();
+
+        if (data) {
+          setPlanetData(data);
+        };
+
+        if (error) {
+          throw error;
+        };
+      } catch (error: any) {
+        console.error(error.message);
+      };
+    };
+
+    const [planetId, setPlanetId] = useState(null);
+    const handleClosePopup = () => {
+      setUsingStructure(null);
+    };
 
     useEffect(() => {
       const fetchPlacedStructures = async () => {
+        console.log('Planet id', planetId)
         try {
           // Fetch all structure items from inventoryITEMS table
           const { data: structureItems, error: structureItemsError } = await supabase
@@ -223,7 +276,35 @@ export const PlacedStructures = ({ sectorId }) => {
             {structure.present && (
               <Link legacyBehavior href="#" passHref>
               <a className="text-sm underline" onClick={() => handleStructureClick(structure.id)}>
-                View More
+              {structure.id === 22 && (
+        <div className="iframe-container">
+          {/* <iframe src={`/explore/${sectorId}`} title="Explore" className="iframe-class" /> */}
+        </div>
+      )}
+              {structure.id === 12 && (
+          <div className="iframe-container">
+                       <button
+                    className="justify-self-center self-start"
+                    onClick={() => setUsingStructure(14)}
+                  >View More
+                  </button>
+                  {usingStructure === 14 && (
+        <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50">
+          <div className="max-w-2xl w-full bg-white p-8 rounded-lg shadow-xl z-50">
+            {!planetData?.lightkurve && (
+              <><LightkurveBaseGraph planetId={{ planetId: planetId }} />
+            <button onClick={handleClosePopup}>Close</button></>
+            )}
+            {planetData?.lightkurve && (
+              <><img src={planetData?.lightkurve} />
+              <button onClick={handleClosePopup}>Close</button></>
+            )}
+          </div>
+        </div>
+      )}
+        </div>
+        )}
+                {/* View More */}
               </a>
             </Link>
             )}

components/Content/[id]/BasePlanetAllSectors.tsx

@@ -15,7 +15,7 @@ export default function BasePlanetSectors({ planetId }: { planetId: string }) {
     const getPlanetSectors = async () => {
         if (!planetId) {
             return null;
-        }
+        } 
 
         if (!session) {
             return null;

components/Content/[id]/IndividualBasePlanet.tsx

@@ -135,18 +135,16 @@ export function IndividualBasePlanetDesktop({ id }: { id: string }) {
                   .eq('owner', session?.user?.id);// session?.user?.id);
 
                 if (error) {
-                  console.assert('Error fetching sectors data:', error.message);
+                  console.assert('Error fetching sectors data: ', error.message);
                   return;
-                }
+                };
 
-                console.assert(session?.user?.id + 'Hello');
-                console.log(data);
-
+                // console.log(data);
                 setSectors(data);
               } catch (error) {
                 console.error(error);
-              }
-            }
+              };
+            };
 
       return (
         <div className="flex-col justify-center">