👘🧗🏻‍♂️ ↝ Running into a few issues, but planet sectors are now being …

…consoled

components/Content/Planets/FRuckoff.tsx

@@ -0,0 +1,175 @@
+import { useRouter } from "next/router";
+import React, { useState, useEffect, useRef } from "react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import { UserContext } from "../../../context/UserContext";
+import { LayoutNoNav } from "../../Section/Layout";
+import CardForum from "../DiscussCard";
+
+enum SidebarLink {
+  Feed,
+  Demo,
+  Data,
+  Visit,
+}
+
+export default function IndividualPlanet({ id }: { id: string }) {
+  const router = useRouter();
+
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [planetData, setPlanetData] = useState(null);
+  const [planetPosts, setPlanetPosts] = useState([]);
+  const { id: planetId } = router.query;
+
+  const [activeLink, setActiveLink] = useState(SidebarLink.Data);
+  const [screenWidth, setScreenWidth] = useState<number>(0);
+  const [showSidebar, setShowSidebar] = useState<boolean>(true);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    setShowSidebar(screenWidth >= 800);
+  }, [screenWidth]);
+
+  useEffect(() => {
+    if (planetId) {
+      getPlanetData();
+      fetchPostsForPlanet(id);
+    }
+  });
+
+  const getPlanetData = async () => {
+    try {
+      const { data, error } = await supabase
+        .from("planetsss")
+        .select("*")
+        .eq("id", planetId)
+        .single();
+
+      if (data) {
+        setPlanetData(data);
+      }
+
+      if (error) {
+        throw error;
+      }
+    } catch (error: any) {
+      console.error(error.message);
+    }
+  };
+
+  async function fetchPostsForPlanet(planetId) {
+    try {
+      const { data: postsData, error: postsError } = await supabase
+        .from("posts_duplicates")
+        .select(
+          "id, content, created_at, media, profiles(id, avatar_url, username)"
+        )
+        .eq("planets2", planetId)
+        .order("created_at", { ascending: false });
+
+      if (postsData) {
+        setPlanetPosts(postsData);
+      }
+
+      if (postsError) {
+        throw postsError;
+      }
+    } catch (error: any) {
+      console.error("Error fetching posts:", error.message);
+    }
+  }
+
+  if (!planetData) {
+    return <div>Loading...</div>;
+  }
+
+  const { content, avatar_url, cover } = planetData;
+  const rings = [2, 3, 4];
+  const planetSizeMobile = 8; // 8% of the screen size
+  const planetSizeDesktop = 14; // 14% of the screen size
+  const ringSizeFactor = 2; // Start rings around 2 times the size of the planet image
+  const ringCount = 3; // Number of rings
+
+  return (
+    <LayoutNoNav>
+      <div className="h-screen relative">
+        {/* Background Styles */}
+        <style jsx global>
+          {`
+        body {
+          background: linear-gradient(
+            to bottom,
+            #1d2948,
+            #1d2948 25%,
+            #141d33 32%,
+            #0f1628
+          );
+        }
+        @media only screen and (max-width: 767px) {
+          body {
+            background: url('/garden.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="bg-cover bg-center h-screen flex items-center justify-center relative">
+          <div className="underline"></div>
+          {/* {planetPosts?.length > 0 &&
+          planetPosts.map((post) => (
+            <CardForum key={post.id} {...post} />
+          ))} */}
+
+          {/* Rings */}
+          {[...Array(ringCount)].map((_, index) => (
+            <div
+              key={index}
+              className="absolute border-white border-solid border-2 rounded-full"
+              style={{
+                width: `${
+                  ((planetSizeDesktop * ringSizeFactor * (index + 1)) / 100) *
+                  screenWidth
+                }px`,
+                height: `${
+                  ((planetSizeDesktop * ringSizeFactor * (index + 1)) / 100) *
+                  screenWidth
+                }px`,
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                zIndex: 10,
+              }}
+            ></div>
+          ))}
+
+          {/* Planet Image */}
+          <img
+            src={avatar_url}
+            alt="Planet Image"
+            className={`w-2/12 h-2/12 sm:w-4/12 sm:h-4/12 object-contain z-20`}
+            style={{
+              zIndex: 20,
+            }}
+          />
+        </div>
+      </div>
+    </LayoutNoNav>
+  );
+}

components/Content/Planets/IndividualPlanet.tsx

@@ -5,6 +5,7 @@ import { UserContext } from "../../../context/UserContext";
 import { LayoutNoNav } from "../../Section/Layout";
 import CardForum from "../DiscussCard";
 import { RoverGallerySingle } from "../RoverData/RandomImage";
+import PlanetSector from "./PlanetSector";
 
 enum SidebarLink {
   Feed,
@@ -49,7 +50,8 @@ export default function IndividualPlanet({ id }: { id: string }) {
     if (planetId) {
       getPlanetData();
       fetchPostsForPlanet(id);
-      fetchSectorsForPlanet(inventoryPlanetId);
+      // fetchSectorsForPlanet(inventoryPlanetId);
+      fetchSectorsForPlanetTest();
       checkUserInventory();
     }
   });
@@ -129,7 +131,7 @@ export default function IndividualPlanet({ id }: { id: string }) {
       const { data, error } = await supabase
       .from('planetsssSECTORS')
       .select('*')
-      .eq('planetId', planetId);
+      .eq('planetId', inventoryPlanetId);
 
     if (error) {
       console.error('Error fetching sectors data:', error.message);
@@ -142,6 +144,24 @@ export default function IndividualPlanet({ id }: { id: string }) {
     };
   };
 
+  async function fetchSectorsForPlanetTest() {
+    try {
+      const { data, error } = await supabase
+      .from('planetsssSECTORS')
+      .select('*')
+
+    if (error) {
+      console.error('Error fetching sectors data:', error.message);
+      return;
+    };
+
+    setSectors(data);
+    console.log(data);
+    } catch (error) {
+      console.error(error);
+    };
+  };
+
   const rings = [2, 3, 4];
   const planetSizeMobile = 8; // 8% of the screen size
   const planetSizeDesktop = 14; // 14% of the screen size
@@ -215,11 +235,12 @@ export default function IndividualPlanet({ id }: { id: string }) {
               zIndex: 20,
             }}
           />
-          {hasPlanetInInventory && (<>
+        </div>
+        {hasPlanetInInventory && (<>
             <p>{inventoryPlanetId}</p>
             <RoverGallerySingle inventoryPlanetId={inventoryPlanetId} />
+             {/* <PlanetSector sectors={sectors} />  */}
           </>)}
-        </div>
       </div>
     </LayoutNoNav>
   );

components/Content/Planets/PlanetSector.tsx

@@ -7,4 +7,19 @@ interface Sector {
 
 interface PlanetSectorsProps {
     sectors: Sector[];
-}
+}
+
+const PlanetSector: React.FC<PlanetSectorsProps> = ({ sectors }) => {
+    return (
+        <div className="sector-container">
+            {sectors.map((sector, index) => (
+                <div key={index} className="sector">
+                    <div className="sector-number">{index + 1}</div>
+                    <div className="sector-metadata">{sector.metadata}</div>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default PlanetSector;

package.json

@@ -56,7 +56,8 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.48.2",
     "tailwind-merge": "^2.0.0",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.4",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@capacitor/cli": "^5.5.1",

yarn.lock

@@ -5724,6 +5724,11 @@ tailwind-merge@^2.0.0:
   dependencies:
     "@babel/runtime" "^7.23.1"
 
+tailwindcss-animate@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
+  integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
+
 tailwindcss@^3.2.4:
   version "3.3.5"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz"