Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🦤🔋 ↝ Few changes & fixes #83

Merged
merged 2 commits into from
Nov 30, 2023
Merged

🦤🔋 ↝ Few changes & fixes #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8ccec0
🩳🤘🏻 ↝ Well this was a waste of time
Gizmotronn Oct 19, 2023
9e626ac
🍁🎳 ↝ Working assets, correct resolutions for mobile
Gizmotronn Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .DS_Store
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion components/Content/Planets/GalleryList.tsx
View file
Open in desktop
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
Open in desktop
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-2/12 h-2/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
Open in desktop
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
Open in desktop
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 modified public/Galaxy/Kepler-22.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/Galaxy/Kepler22.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/Galaxy/Kepler69.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/Galaxy/Purple Planet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading