😣🙇🏽 ↝ It's called BURIED ALIVE! It's about 6 guys trapped by the viet…

…namese...15/11/86 [ SGV2-6 ]
Signal-K · Mar 12, 2024 · ea91c2b · ea91c2b
1 parent 787bf5a
commit ea91c2b
Show file tree

Hide file tree

Showing 9 changed files with 220 additions and 67 deletions.
diff --git a/@/components/garden-dashboard.tsx b/@/components/garden-dashboard.tsx
@@ -1,61 +1,20 @@
 import Link from "next/link"
 import { Button } from "./ui/button"
-import { CardTitle, CardHeader, CardContent, Card } from "./ui/card";
-import { QuickLook } from "../../components/quick-look";
-import OwnedItemsList from "../../components/Content/Inventory/UserOwnedItems";
-import { MenuIcon } from "lucide-react";
-import { DashboardLogs } from "../../components/dashboard-logs";
-
-// import { Card, CardHeader, CardContent, CardTitle } from "./ui/card";
-// import { Button } from "./ui/button";
-// import { QuickLook } from "../../components/quick-look";
-// import OwnedItemsList from "../../components/Content/Inventory/UserOwnedItems";
-// import { UserIcon, Package2Icon, MenuIcon, ChevronDownIcon } from "./icons";
+import { DashboardLogs, InventoryBlock } from "../../components/dashboard-logs";
 
 export function GardenDashboard() {
   return (
     <div className="flex-col justify-center">
-                    {/* <style jsx global>
-                {`
-                  body {
-                    background: url('/assets/Onboarding/Bg.png') center/cover;
-                  }
-                  
-                  @media only screen and (max-width: 767px) {
-                    .planet-heading {
-                      color: white;
-                      font-size: 24px;
-                      text-align: center;
-                      margin-bottom: 10px;
-                    }
-                  }
-                `}
-              </style> */}
       <div className="flex-1 flex flex-col items-center justify-center text-center">
         <div className="grid gap-4 p-4">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-              <CardTitle className="text-sm font-medium"></CardTitle>
-              <MenuIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
-            </CardHeader>
-            <CardContent>
-                {/* <OwnedItemsList /> */}
-              </CardContent>
-            {/* <CardContent>
-              <ul className="grid gap-2 text-sm">
-                <li>🌻 Seedling</li>
-                <li>🌻 Sprout</li>
-                <li>🌻 Bloom</li>
-              </ul>
-            </CardContent> */}
-          </Card>
         </div>
         <div className="grid gap-4 p-4">
           <Button className="w-full">Go home</Button>
         </div>
         {/* <QuickLook /> */}
-        <DashboardLogs />
+        {/* <DashboardLogs /> */}
+        <InventoryBlock />
       </div>
     </div>
-  )
-}
+  );
+};
diff --git a/@/components/ui/card.tsx b/@/components/ui/card.tsx
@@ -73,4 +73,4 @@ const CardFooter = React.forwardRef<
 ))
 CardFooter.displayName = "CardFooter"
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/components/Content/Inventory/UserOwnedItems.tsx b/components/Content/Inventory/UserOwnedItems.tsx
@@ -69,7 +69,7 @@ const OwnedItemsList: React.FC = () => {
           return (
             <div
               key={item.id}
-              className="absolute flex flex-col items-center justify-center"
+              className="absolute flex flex-col items-center justify-center -mx-10 pb-3"
               style={{ top: `calc(50% - ${y}px)`, left: `calc(50% + ${x}px)` }}
             >
               <div className="w-20 h-20 rounded-full overflow-hidden mb-2">

diff --git a/components/Content/Planets/Base/IndividualBasePlanet.tsx b/components/Content/Planets/Base/IndividualBasePlanet.tsx
@@ -5,7 +5,7 @@ import ContentPlaceholder, { ActivateButton } from "../PlanetData/ContentPlaceho
 import Link from "next/link";
 import { LightkurveBaseGraph } from "../PlanetData/ContentPlaceholder";
 
-export function IndividualBasePlanetDesktop({ id }: { id: string }) {
+export function IndividualBasePlanetDesktop({ id }: { id: string }) { 
   const router = useRouter();
 
     const supabase = useSupabaseClient();

diff --git a/components/Content/Planets/GalleryList.tsx b/components/Content/Planets/GalleryList.tsx
@@ -105,7 +105,85 @@ export default function PlanetGallery() {
       ))}
     </>
   );
-}
+};
+
+const PlanetGalleryWithSectors: React.FC = () => {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+  const [planets, setPlanets] = useState<Planet[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    getPlanets();
+  }, [session]);
+
+  const getPlanets = async (): Promise<void> => {
+    try {
+      let query = supabase
+        .from('basePlanets')
+        .select('*')
+        .order('created_at', { ascending: false })
+        .limit(200);
+
+      const { data, error } = await query;
+
+      if (data != null) {
+        setPlanets(data);
+      }
+
+      if (error) {
+        throw error;
+      }
+
+      setLoading(false);
+    } catch (error: any) {
+      alert(error.message);
+    }
+  };
+
+  if (!session) {
+    return <Login />;
+  }
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="grid grid-cols-3 gap-4">
+      {planets.map((planet) => (
+        <Link legacyBehavior key={planet.id} href={`/planets/${planet.id}`}>
+          <a className="sector-link">
+            <div className="sector-square" style={{ backgroundImage: `url(${planet.avatar_url})` }} />
+          </a>
+        </Link>
+      ))}
+      <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;
+          background-size: cover;
+          background-position: center;
+        }
+      `}</style>
+    </div>
+  );
+};
+
 
 export function ArchivedPlanetGallery() {
   const supabase = useSupabaseClient();
@@ -172,14 +250,38 @@ export function ArchivedPlanetGallery() {
   );
 }
 
-export const Garden: React.FC = () => {
+interface GardenProps {
+  onClose: () => void;
+}
+
+export const Garden: React.FC<GardenProps> = ({ onClose }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Open the overlay when it mounts
+  useEffect(() => {
+    setIsOpen(true);
+  }, []);
+
+  // Close the overlay when the close button is clicked
+  const handleClose = () => {
+    setIsOpen(false);
+    setTimeout(() => onClose(), 300); // Call onClose after the animation completes (300ms)
+  };
+
   return (
-    <>
-      <div style={{ backgroundImage: `url('/garden.png')` }} className="bg-cover bg-center h-screen flex items-center justify-center relative">
-        {/* <GardenSidebar /> */}
-        <PlanetGallery />
+    <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
+            onClick={handleClose}
+            className="absolute top-4 right-4 px-4 py-2 bg-gray-200 text-gray-800 rounded"
+          >
+            Close
+          </button>
+          <PlanetGalleryWithSectors />
+        </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/components/Overlays/1-Feed.tsx b/components/Overlays/1-Feed.tsx
@@ -1,17 +1,33 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { GardenDashboard } from '../../@/components/garden-dashboard';
 
 interface FeedOverlayProps {
   onClose: () => void;
 }
 
 const FeedOverlay: React.FC<FeedOverlayProps> = ({ onClose }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Open the overlay when it mounts
+  useEffect(() => {
+    setIsOpen(true);
+  }, []);
+
+  // Close the overlay when the close button is clicked
+  const handleClose = () => {
+    setIsOpen(false);
+    setTimeout(() => onClose(), 300); // Call onClose after the animation completes (300ms)
+  };
+
   return (
-    <div className="fixed inset-x-0 bottom-0 flex justify-center bg-black bg-opacity-50">
-      <div className="bg-white rounded-t-3xl w-full sm:max-w-screen-lg sm:w-full max-h-60vh overflow-y-auto shadow-lg transform transition-all duration-300">
+    <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-gradient-to-b from-gray-100 via-gray-200 to-blue-100 w-full sm:max-w-screen-lg sm:w-full max-h-60vh overflow-y-auto shadow-lg relative rounded-t-3xl">
         <div className="p-4">
           <h2 className="text-2xl font-bold">Feed Overlay</h2>
-          <button onClick={onClose} className="mt-2 px-4 py-2 bg-gray-200 text-gray-800 rounded">
+          <button
+            onClick={handleClose}
+            className="mt-2 px-4 py-2 bg-gray-200 text-gray-800 rounded"
+          >
             Close
           </button>
           <GardenDashboard />
@@ -21,4 +37,4 @@ const FeedOverlay: React.FC<FeedOverlayProps> = ({ onClose }) => {
   );
 };
 
-export default FeedOverlay;
+export default FeedOverlay;
diff --git a/components/dashboard-logs.tsx b/components/dashboard-logs.tsx
@@ -1,6 +1,23 @@
+import { ShoppingBagIcon } from "@heroicons/react/24/outline";
 import { CardTitle, CardHeader, CardContent, Card } from "../@/components/ui/card";
 import OwnedItemsList from "./Content/Inventory/UserOwnedItems";
 
+export function InventoryBlock() {
+  return (
+    <Card>
+        <CardHeader className="flex flex-row items-center gap-4">
+          <ShoppingBagIcon className="w-8 h-8" />
+          <CardTitle>Inventory</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-4 mx-20 mb-6 -mt-12">
+            <OwnedItemsList />
+          </div>
+        </CardContent>
+      </Card>
+  );
+};
+
 export function DashboardLogs() {
   return (
     <div className="grid gap-6 md:grid-cols-3 max-w-7xl w-full mx-auto">

diff --git a/pages/garden.tsx b/pages/garden.tsx
@@ -8,7 +8,9 @@ export default function GardenPage() {
     return (
         <LayoutNoNav>
             {/* <Navbar /> */}
-            <Garden />
+            <Garden onClose={function (): void {
+                throw new Error("Function not implemented.");
+            } } />
         </LayoutNoNav>
     )
 }