🍓🪶 ↝ [GP-16 GP-14 SGV2-141 SGV2-186]: Merge pull request #153 from Signal-K/GP-16-New-globe-component-interactive

🥬🍓 ↝ [GP-16 GP-14 SGV2-141 SGV2-186]: Interactive globe?

Author: Gizmotronn

.gitignore

@@ -6,6 +6,11 @@
 .pnp.js
 .env
 
+citizen
+/citizen
+supabase
+/supabase
+
 # testing
 /coverage
 .env

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/Construction/GlobeClickable.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { Sprite, SpriteMaterial, TextureLoader } from "three";
+import { useFrame } from "@react-three/fiber";
+
+interface Landmass {
+  lat: number;
+  lng: number;
+  imageURL: string;
+  onClickFunction: () => void;
+}
+
+interface ClickableImagesProps {
+  landmasses: Landmass[];
+}
+
+function ClickableImages({ landmasses }: ClickableImagesProps) {
+  const groupRef = useRef<THREE.Group | null>(null);
+
+  useEffect(() => {
+    if (groupRef.current) {
+      landmasses.forEach((landmass) => {
+        const { lat, lng, imageURL, onClickFunction } = landmass;
+
+        // Load texture
+        const textureLoader = new TextureLoader();
+        const texture = textureLoader.load(imageURL);
+
+        // Create a sprite with the texture
+        const spriteMaterial = new SpriteMaterial({ map: texture });
+        const sprite = new Sprite(spriteMaterial);
+
+        // Set the size of the sprite
+        const size = 8; // Adjust size as needed (e.g. 8 for Tailwind scale)
+        sprite.scale.set(size, size, 1);
+
+        // Convert lat/lng to 3D coordinates
+        const radius = 100; // Adjust radius as needed
+        const phi = (90 - lat) * (Math.PI / 180);
+        const theta = lng * (Math.PI / 180);
+        sprite.position.set(
+          radius * Math.sin(phi) * Math.cos(theta),
+          radius * Math.cos(phi),
+          radius * Math.sin(phi) * Math.sin(theta)
+        );
+
+        // Create a click handler for the sprite
+        const handleClick = (event: any) => {
+          event.stopPropagation();
+          onClickFunction();
+        };
+
+        // Add event listener to the sprite for the 'click' event
+        sprite.addEventListener('click', handleClick);
+
+        // Add the sprite to the group
+        groupRef.current.add(sprite);
+      });
+    }
+  }, [landmasses]);
+
+  // Use useFrame hook to continuously update the scene if needed
+  useFrame(() => {
+    // Add any animation logic here if required
+  });
+
+  return <group ref={groupRef} />;
+}
+
+export default ClickableImages;

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>