diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 47a57e45..00000000 Binary files a/.DS_Store and /dev/null differ diff --git a/.gitignore b/.gitignore index dae8c0c3..d2dd5f3e 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,11 @@ .pnp.js .env +citizen +/citizen +supabase +/supabase + # testing /coverage .env diff --git a/components/Content/Assets/PlanetCharacter.tsx b/components/Content/Assets/PlanetCharacter.tsx index ca40ec3a..5440d4db 100644 --- a/components/Content/Assets/PlanetCharacter.tsx +++ b/components/Content/Assets/PlanetCharacter.tsx @@ -1,63 +1,38 @@ import React, { useEffect, useState } from 'react'; import Image from 'next/image'; -export const RoverCharacter: React.FC<{ position: { x: number; y: number } }> = ({ position }) => { - const [angle, setAngle] = useState(0); - const [direction, setDirection] = useState(1); - - useEffect(() => { - const interval = setInterval(updateAnimation, 50); - return () => clearInterval(interval); - }, []); - - const updateAnimation = () => { - const newAngle = angle + 1 * direction; - if (newAngle >= 10 || newAngle <= -10) { - setDirection(direction * -1); - } - setAngle(newAngle); - }; - - return ( -
- Character -
- ); -}; - -export const PlanetCharacter: React.FC<{ position: { x: number; y: number } }> = ({ position }) => { - const [angle, setAngle] = useState(0); - const [direction, setDirection] = useState(1); - - useEffect(() => { - const interval = setInterval(updateAnimation, 50); - return () => clearInterval(interval); - }, []); - - const updateAnimation = () => { - const newAngle = angle + 1 * direction; - if (newAngle >= 10 || newAngle <= -10) { - setDirection(direction * -1); - } - setAngle(newAngle); - }; +const PlanetCharacter: React.FC = () => { + const [angle, setAngle] = useState(0); + // State to store animation direction (1 for right, -1 for left) + const [direction, setDirection] = useState(1); + + // Function to update animation angle and direction + const updateAnimation = () => { + // Increment angle based on direction + const newAngle = angle + 1 * direction; + // Change direction when angle reaches certain limits + if (newAngle >= 10 || newAngle <= -10) { + setDirection(direction * -1); + } + // Update angle + setAngle(newAngle); + }; + + // Update animation angle every 50 milliseconds + useEffect(() => { + const interval = setInterval(updateAnimation, 50); + return () => clearInterval(interval); // Cleanup interval on unmount + }, [angle, direction]); return ( -
+
Character
); diff --git a/pages/index.tsx b/pages/index.tsx index 59e4b322..a08680f1 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -22,11 +22,7 @@ import Navigation, { import { GardenDashboard } from "../components/garden-dashboard"; import FeedOverlay from "../components/Overlays/1-Feed"; import UponSignupModal from "../components/Modals/UponSignup"; -import { MinimalAccordion, OnboardingWindows } from "../components/Gameplay/onboarding"; -import PlanetCharacter, { RoverCharacter } from "../components/Content/Assets/PlanetCharacter"; -import { Garden } from "../components/Content/Planets/GalleryList"; -import Link from "next/link"; -import { AllSectors } from "../components/Content/Planets/Sectors/SectorSetup"; +import PlanetCharacter from "../components/Content/Assets/PlanetCharacter"; export const metadata: Metadata = { title: "Star Sailors", @@ -42,118 +38,137 @@ export function PublicLanding() { /> ); - // User data config const session = useSession(); - const supabase = useSupabaseClient(); - const [profile, setProfile] = useState(null); - useEffect(() => { - supabase.from("profiles") - .select() - .eq("id", session?.user?.id) - .then((result) => { - if (result.data) { - setProfile(result.data[0]); - }; - }); - }, [session, supabase]); - useEffect(() => { - if (profile) { - console.log(profile.location ?? "Location not available"); - }; - }, [profile]); - // Screen size parameters + // Component context + const [showFeedOverlay, setShowFeedOverlay] = useState(false); + const handleOpenFeedOverlay = () => { + setShowFeedOverlay(true); + }; + const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' }); const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' }); - // Character queries - const [characterPosition, setCharacterPosition] = useState<{ rover: { x: number; y: number }; planet: { x: number; y: number } }>(() => { - // Initial position for the characters - return { rover: { x: 0, y: 0 }, planet: { x: 0, y: 0 } }; - }); - - useEffect(() => { - // Calculate initial position for the characters after component mount - const calculatePosition = () => { - const minX = -window.innerWidth / 2 + 100; // Adjust 100 to your desired margin - const maxX = window.innerWidth / 2 - 100; // Adjust 100 to your desired margin - const minY = -window.innerHeight / 2 + 100; // Adjust 100 to your desired margin - const maxY = window.innerHeight / 2 - 100; // Adjust 100 to your desired margin - - const randomX = Math.floor(Math.random() * (maxX - minX + 1)) + minX; - const randomY = Math.floor(Math.random() * (maxY - minY + 1)) + minY; - - setCharacterPosition({ - rover: { x: randomX, y: randomY }, - planet: { x: randomX, y: randomY }, // You can adjust this to have different positions for rover and planet - }); - }; - - calculatePosition(); - - // Recalculate position when window size changes - const handleResize = () => { - calculatePosition(); - }; - window.addEventListener("resize", handleResize); + if (session) { + return ( + + +
+ + - - // if (session && !profile?.location) { - // return ( - //

Location

- // ); - // }; - - // if (session?.user?.id === 'cebdc7a2-d8af-45b3-b37f-80f328ff54d6' && isTabletOrMobile) { - // return ( - // - // - //