🦚🧯 ↝ [SGV2-10 SGV2-14 SGV2-141]: Removing initialClassification from working tree

.github/work/workflows/pages.yml

@@ -0,0 +1,93 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: 'initialClassification'
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/work/workflows/preview.yml

@@ -0,0 +1,21 @@
+name: Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches-ignore:
+      - main
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

components/Authentication/LoginModal.tsx

@@ -1,7 +1,6 @@
 import { ReactNode, useEffect } from 'react';
 // import { useHistory } from 'react-router-dom';
 import Link from 'next/link';
-import Layout from '../_Core/Section/Layout';
 import { Auth, ThemeSupa } from '@supabase/auth-ui-react';
 import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
 import { useRouter } from 'next/router';

components/Content/Archive/ArchivedInventory.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
-import Layout from "../../_Core/Section/Layout";
+import { SpareLayout } from "../../_Core/Section/Layout";
 import OwnedPlanetsList from "./UserOwnedPlanets"; // Potentially this should be in a lists component dir
 import OwnedItemsList from "../Inventory/UserOwnedItems";
 import MySpaceships from "../../Gameplay/Vehicles/MySpaceships";
@@ -10,11 +10,11 @@ export default function V1Inventory() { // Inventory items for v1 of public sche
     const session = useSession();
 
     return (
-        <Layout>
+        <SpareLayout>
             <OwnedPlanetsList />
             <OwnedItemsList />
             <MySpaceships />
-        </Layout>
+        </SpareLayout>
     );
 };
 

components/Content/Inventory/UserOwnedItems.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import Link from "next/link";
 
-const OwnedItemsList: React.FC = () => {
+const OwnedItemsList: React.FC = () => { 
     const supabase = useSupabaseClient();
     const session = useSession();
 
@@ -94,61 +94,88 @@ interface InventoryItem {
 
 export const ItemsVerticalList: React.FC = () => {
   const session = useSession();
-  const [itemDetails, setItemDetails] = useState<InventoryItem[]>([]);
   const supabase = useSupabaseClient();
+  const [ownedItems, setOwnedItems] = useState([]);
+  const [itemDetails, setItemDetails] = useState([]);
+  const [isLoading, setIsLoading] = useState(true); // Loading state
 
   useEffect(() => {
-    const fetchOwnedItems = async () => {
+    if (!session || !supabase) {
+      return;
+    }
+
+    const fetchOwnedItemsAndDetails = async () => {
       try {
-        if (!session) return;
+        setIsLoading(true);
+        const userId = session.user.id;
 
-        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);
+          .from("inventoryUSERS")
+          .select("*")
+          .eq("owner", userId)
+          .gt("id", 20)
+          .limit(6)
+          .order("id", { ascending: false });
 
         if (ownedItemsError) {
           throw ownedItemsError;
         }
 
         if (ownedItemsData) {
+          setOwnedItems(ownedItemsData);
+
+          // Extract item IDs from owned items
           const itemIds = ownedItemsData.map(item => item.item);
-          // Fetch details of owned items
+
+          // Fetch details of owned items based on item IDs
           const { data: itemDetailsData, error: itemDetailsError } = await supabase
-            .from('inventoryITEMS')
-            .select('*')
-            .in('id', itemIds);
+            .from("inventoryITEMS")
+            .select("*")
+            .in("id", itemIds);
 
           if (itemDetailsError) {
             throw itemDetailsError;
           }
 
-          if (itemDetailsData) {
-            setItemDetails(itemDetailsData);
-          }
+          setItemDetails(itemDetailsData);
         }
       } catch (error) {
-        console.error('Error fetching owned items:', error.message);
+        console.error("Error fetching owned items and details:", error);
+      } finally {
+        setIsLoading(false);
       }
     };
 
-    fetchOwnedItems();
-  }, [session]);
+    fetchOwnedItemsAndDetails();
+  }, [session, supabase]);
+
+  // Combine owned items with their details
+  const combinedItems = ownedItems.map(ownedItem => {
+    const itemDetail = itemDetails.find(detail => detail.id === ownedItem.item);
+    return {
+      ...ownedItem,
+      ...itemDetail,
+    };
+  });
+
+  // If the component is loading, you can display a loading indicator or message
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
 
+  // Render the list of items
   return (
     <div className="w-full">
-      {itemDetails.map(item => (
+      {combinedItems.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>
+          <p className="text-sm">{item.quantity}</p>
         </div>
       ))}
     </div>
@@ -224,7 +251,7 @@ export const SectorStructureOwned: React.FC<{ sectorid: string }> = ({ sectorid
                     <img src={item.icon_url} alt={item.name} className="w-full h-auto" />
                     </div>
                     <p className="text-gray-600">Quantity: {ownedItem?.quantity}</p>
-                    <p className="text-gray-600">On planet: {ownedItem?.sector}</p>
+                    <p className="text-gray-600">On sector (id): {ownedItem?.sector}</p>
                 </li>
                 );
             })}

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;