Skip to content

Commit

Permalink
🩳🤘🏻 ↝ Well this was a waste of time
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gizmotronn
Gizmotronn committed Nov 29, 2023
1 parent bb18774 commit d8ccec0
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 127 deletions.
2 changes: 1 addition & 1 deletion components/Content/Planets/GalleryList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default function PlanetGallery() {

export const Garden: React.FC = () => {
return (
<div style={{ backgroundImage: `url('/bg.jpg')` }} className="bg-cover bg-center h-screen flex items-center justify-center relative">
<div style={{ backgroundImage: `url('/garden.png')` }} className="bg-cover bg-center h-screen flex items-center justify-center relative">
<PlanetGallery />
</div>
);
Expand Down
272 changes: 159 additions & 113 deletions components/Content/Planets/IndividualPlanet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,124 +6,170 @@ import { LayoutNoNav } from "../../Section/Layout";
import CardForum from "../DiscussCard";

enum SidebarLink {
Feed,
Demo,
Data,
Visit,
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);
}
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);
};
}, []);

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);
}
useEffect(() => {
setShowSidebar(screenWidth >= 800);
}, [screenWidth]);

useEffect(() => {
if (planetId) {
getPlanetData();
fetchPostsForPlanet(id);
}
});

if (!planetData) {
return <div>Loading...</div>;
};
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>
))}

const { content, avatar_url, cover } = planetData;
const rings = [2, 3, 4];

return (
<LayoutNoNav>
<div style={{ backgroundImage: `url('/bg.jpg')` }} className="bg-cover bg-center h-screen flex items-center justify-center relative">
<div className="mb-7 flex items-center justify-center h-screen relative">
{rings.map((radius, index) => (
<div
key={index}
className="absolute border-white border-solid border-2 rounded-full"
style={{
width: `${(radius * 24) / 100 * screenWidth}px`,
height: `${(radius * 24) / 100 * screenWidth}px`,
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
}}
></div>
))}
<img
src={avatar_url}
alt="Planet Image"
className="w-4/12 h-4/12 object-contain z-10"
/>
</div>
{planetPosts?.length > 0 &&
planetPosts.map((post) => (
<>
<CardForum key={post.id} {...post} />
</>
))
}
</div>
</LayoutNoNav>
);
};
{/* Planet Image */}
<img
src={avatar_url}
alt="Planet Image"
className={`w-4/12 h-4/12 sm:w-4/12 sm:h-4/12 object-contain z-20`}
style={{
zIndex: 20,
}}
/>
</div>
</div>
</LayoutNoNav>
);
}
2 changes: 1 addition & 1 deletion components/Gameplay/Garden.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ interface GardenProps {

const Garden: React.FC<GardenProps> = ({ anomalies }) => {
return (
<div style={{ backgroundImage: `url('/bg.jpg')` }} className="bg-cover bg-center h-screen w-screen flex items-center justify-center relative">
<div style={{ backgroundImage: `url('/garden.png')` }} className="bg-cover bg-center h-screen w-screen flex items-center justify-center relative">
{/* <button className="p-2 bg-blue-500 text-white">Add Anomaly</button> */}
{/* <PlanetGalleryIndexComp /> */}
{anomalies.map((anomaly) => (
Expand Down
22 changes: 10 additions & 12 deletions components/Section/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export const LayoutNoNav: React.FC<DashboardLayoutProps> = ({ children }) => {
const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
// Check if window is defined before accessing it
if (typeof window !== "undefined") {
const checkIsMobile = () => {
setIsMobile(window.innerWidth <= 768);
Expand All @@ -60,16 +59,15 @@ export const LayoutNoNav: React.FC<DashboardLayoutProps> = ({ children }) => {
}, []);

return (
<>
<div className="flex relative items-start">
<Sidebar />
<main className="h-max pb-10 grow">{children}</main>
{isMobile && (
<div className="w-full md:hidden fixed bottom-0 left-0 z-50">
<Bottombar />
</div>
)}
</div>
</>
<div className="flex relative items-start h-screen overflow-hidden">
<main className="h-max pb-10 grow overflow-y-auto">
{children}
</main>
{isMobile && (
<div className="w-full md:hidden fixed bottom-0 left-0 z-50">
<Bottombar />
</div>
)}
</div>
);
};
Binary file added public/Galaxy/Purple Planet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit d8ccec0

Please sign in to comment.