Skip to content

Commit f252145

Browse files
GizmotronnGizmotronn
committed
🤹🏼‍♀️🌎 ↝ [SGV2-141 GP-16]: Some more merge fixes
1 parent 2afc314 commit f252145

File tree

5 files changed

+162
-166
lines changed

5 files changed

+162
-166
lines changed

‎.DS_Store

-18 KB
Binary file not shown.

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
.pnp.js
77
.env
88

9+
citizen
10+
/citizen
11+
supabase
12+
/supabase
13+
914
# testing
1015
/coverage
1116
.env

‎components/Content/Assets/PlanetCharacter.tsx

+27-52
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,38 @@
11
import React, { useEffect, useState } from 'react';
22
import Image from 'next/image';
33

4-
export const RoverCharacter: React.FC<{ position: { x: number; y: number } }> = ({ position }) => {
5-
const [angle, setAngle] = useState<number>(0);
6-
const [direction, setDirection] = useState<number>(1);
7-
8-
useEffect(() => {
9-
const interval = setInterval(updateAnimation, 50);
10-
return () => clearInterval(interval);
11-
}, []);
12-
13-
const updateAnimation = () => {
14-
const newAngle = angle + 1 * direction;
15-
if (newAngle >= 10 || newAngle <= -10) {
16-
setDirection(direction * -1);
17-
}
18-
setAngle(newAngle);
19-
};
20-
21-
return (
22-
<div className="absolute" style={{ left: `${position.x}px`, bottom: `${position.y}px` }}>
23-
<Image
24-
src="/assets/Inventory/Planets/rover.png"
25-
alt="Character"
26-
layout="fill"
27-
objectFit="contain"
28-
className="transform transition-transform duration-500"
29-
style={{ transform: `rotate(${angle}deg)` }}
30-
/>
31-
</div>
32-
);
33-
};
34-
35-
export const PlanetCharacter: React.FC<{ position: { x: number; y: number } }> = ({ position }) => {
36-
const [angle, setAngle] = useState<number>(0);
37-
const [direction, setDirection] = useState<number>(1);
38-
39-
useEffect(() => {
40-
const interval = setInterval(updateAnimation, 50);
41-
return () => clearInterval(interval);
42-
}, []);
43-
44-
const updateAnimation = () => {
45-
const newAngle = angle + 1 * direction;
46-
if (newAngle >= 10 || newAngle <= -10) {
47-
setDirection(direction * -1);
48-
}
49-
setAngle(newAngle);
50-
};
4+
const PlanetCharacter: React.FC = () => {
5+
const [angle, setAngle] = useState<number>(0);
6+
// State to store animation direction (1 for right, -1 for left)
7+
const [direction, setDirection] = useState<number>(1);
8+
9+
// Function to update animation angle and direction
10+
const updateAnimation = () => {
11+
// Increment angle based on direction
12+
const newAngle = angle + 1 * direction;
13+
// Change direction when angle reaches certain limits
14+
if (newAngle >= 10 || newAngle <= -10) {
15+
setDirection(direction * -1);
16+
}
17+
// Update angle
18+
setAngle(newAngle);
19+
};
20+
21+
// Update animation angle every 50 milliseconds
22+
useEffect(() => {
23+
const interval = setInterval(updateAnimation, 50);
24+
return () => clearInterval(interval); // Cleanup interval on unmount
25+
}, [angle, direction]);
5126

5227
return (
53-
<div className="absolute" style={{ left: `${position.x}px`, bottom: `${position.y}px` }}>
28+
<div className="relative w-64 h-64">
5429
<Image
55-
src="/assets/Inventory/Planets/Mars.png"
30+
src="/assets/Inventory/Planets/Mars caricature.png" // Replace with the path to your character image
5631
alt="Character"
57-
layout="fill"
58-
objectFit="contain"
32+
width={256}
33+
height={256}
5934
className="transform transition-transform duration-500"
60-
style={{ transform: `rotate(${angle}deg)` }}
35+
style={{ transform: `rotate(${angle}deg)` }} // Apply rotation based on angle
6136
/>
6237
</div>
6338
);

‎pages/index.tsx

+129-114
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,7 @@ import Navigation, {
2222
import { GardenDashboard } from "../components/garden-dashboard";
2323
import FeedOverlay from "../components/Overlays/1-Feed";
2424
import UponSignupModal from "../components/Modals/UponSignup";
25-
import { MinimalAccordion, OnboardingWindows } from "../components/Gameplay/onboarding";
26-
import PlanetCharacter, { RoverCharacter } from "../components/Content/Assets/PlanetCharacter";
27-
import { Garden } from "../components/Content/Planets/GalleryList";
28-
import Link from "next/link";
29-
import { AllSectors } from "../components/Content/Planets/Sectors/SectorSetup";
25+
import PlanetCharacter from "../components/Content/Assets/PlanetCharacter";
3026

3127
export const metadata: Metadata = {
3228
title: "Star Sailors",
@@ -42,118 +38,137 @@ export function PublicLanding() {
4238
/>
4339
);
4440

45-
// User data config
4641
const session = useSession();
47-
const supabase = useSupabaseClient();
48-
const [profile, setProfile] = useState<any>(null);
49-
useEffect(() => {
50-
supabase.from("profiles")
51-
.select()
52-
.eq("id", session?.user?.id)
53-
.then((result) => {
54-
if (result.data) {
55-
setProfile(result.data[0]);
56-
};
57-
});
58-
}, [session, supabase]);
59-
useEffect(() => {
60-
if (profile) {
61-
console.log(profile.location ?? "Location not available");
62-
};
63-
}, [profile]);
6442

65-
// Screen size parameters
43+
// Component context
44+
const [showFeedOverlay, setShowFeedOverlay] = useState(false);
45+
const handleOpenFeedOverlay = () => {
46+
setShowFeedOverlay(true);
47+
};
48+
6649
const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' });
6750
const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
6851

69-
// Character queries
70-
const [characterPosition, setCharacterPosition] = useState<{ rover: { x: number; y: number }; planet: { x: number; y: number } }>(() => {
71-
// Initial position for the characters
72-
return { rover: { x: 0, y: 0 }, planet: { x: 0, y: 0 } };
73-
});
74-
75-
useEffect(() => {
76-
// Calculate initial position for the characters after component mount
77-
const calculatePosition = () => {
78-
const minX = -window.innerWidth / 2 + 100; // Adjust 100 to your desired margin
79-
const maxX = window.innerWidth / 2 - 100; // Adjust 100 to your desired margin
80-
const minY = -window.innerHeight / 2 + 100; // Adjust 100 to your desired margin
81-
const maxY = window.innerHeight / 2 - 100; // Adjust 100 to your desired margin
82-
83-
const randomX = Math.floor(Math.random() * (maxX - minX + 1)) + minX;
84-
const randomY = Math.floor(Math.random() * (maxY - minY + 1)) + minY;
85-
86-
setCharacterPosition({
87-
rover: { x: randomX, y: randomY },
88-
planet: { x: randomX, y: randomY }, // You can adjust this to have different positions for rover and planet
89-
});
90-
};
91-
92-
calculatePosition();
93-
94-
// Recalculate position when window size changes
95-
const handleResize = () => {
96-
calculatePosition();
97-
};
98-
window.addEventListener("resize", handleResize);
52+
if (session) {
53+
return (
54+
<LayoutNoNav>
55+
<Navigation />
56+
<div className="flex-col justify-center mt-10">
57+
<style jsx global>
58+
{`
59+
body {
60+
background: url('garden.png') center/cover;
61+
}
62+
63+
@media only screen and (max-width: 767px) {
64+
.planet-heading {
65+
color: white;
66+
font-size: 24px;
67+
text-align: center;
68+
margin-bottom: 10px;
69+
}
70+
}
71+
`}
72+
</style>
73+
<style jsx global>
74+
{`
75+
.chat {
76+
margin-top: 40px; /* Adjust this value to move the chat bubbles down */
77+
}
9978
100-
// Cleanup event listener on unmount
101-
return () => {
102-
window.removeEventListener("resize", handleResize);
103-
};
104-
}, []);
79+
.chat-container {
80+
display: flex;
81+
flex-direction: column;
82+
align-items: center; /* This centers the chat bubbles horizontally */
83+
justify-content: center; /* This centers the chat bubbles vertically */
84+
}
10585
106-
const [showGalaxy, setShowGalaxy] = useState(true);
86+
/* Additional styles for responsiveness or other adjustments */
87+
@media only screen and (max-width: 767px) {
88+
.chat {
89+
margin-top: 20px; /* Adjust for smaller screens if necessary */
90+
}
91+
}
92+
`}
93+
</style>
10794

108-
109-
// if (session && !profile?.location) {
110-
// return (
111-
// <p>Location</p>
112-
// );
113-
// };
114-
115-
// if (session?.user?.id === 'cebdc7a2-d8af-45b3-b37f-80f328ff54d6' && isTabletOrMobile) {
116-
// return (
117-
// <LayoutNoNav>
118-
// <Navigation />
119-
// <iframe src="https://deta.space/?horizon=sj38ZfjmeF" height='2532px' width='100%' />
120-
// </LayoutNoNav>
121-
// );
122-
// };
123-
124-
// if (session && profile?.location) {
125-
if (session) {
126-
return (
127-
<LayoutNoNav>
128-
{isDesktopOrLaptop && ( <Navigation /> )}
129-
<div className="flex-col justify-center mt-10">
130-
<div className="image-container mx-3 absolute top-0 left-1/2 transform -translate-x-1/2 mt-10 mb-10">
131-
{/* <div className="flex justify-center items-center flex-row mt-20">
132-
{isDesktopOrLaptop && (
133-
<>
134-
<img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/TOI%20700.png" alt="Planet 1" className="responsive-image h-12 w-12 mx-10" />
135-
<img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/Group%201000002854.png" alt="Planet 2" className="responsive-image h-12 w-12" />
136-
</>
137-
)}
138-
{isTabletOrMobile && (
139-
<>
140-
<img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/TOI%20700.png" alt="Planet 1" className="responsive-image h-12 w-12 mx-10" />
141-
<img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/Group%201000002854.png" alt="Planet 2" className="responsive-image h-12 w-12" />
142-
</>
143-
)}
144-
</div> */}
145-
</div>
146-
{isDesktopOrLaptop && (<OnboardingWindows />)}
147-
</div>
148-
<div className="absolute bottom-20 left-1/2 transform -translate-x-1/2 mb-20">
149-
<div className="flex justify-center mb-20">
150-
<PlanetCharacter position={characterPosition.planet} />
151-
<RoverCharacter position={characterPosition.rover} />
152-
<AllSectors />
153-
</div>
154-
</div>
155-
</LayoutNoNav>
156-
);
95+
<div className="image-container mx-3 absolute top-0 left-1/2 transform -translate-x-1/2 mt-10 mb-10">
96+
<div className="flex justify-center items-center flex-row mt-20">
97+
{isDesktopOrLaptop && (
98+
<>
99+
<img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/TOI%20700.png" alt="Planet 1" className="responsive-image h-12 w-12 mx-10" />
100+
<img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/Group%201000002854.png" alt="Planet 2" className="responsive-image h-12 w-12" />
101+
</>
102+
)}
103+
{isTabletOrMobile && (
104+
<>
105+
<img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/TOI%20700.png" alt="Planet 1" className="responsive-image h-12 w-12 mx-10" />
106+
<img src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/planets/71/Group%201000002854.png" alt="Planet 2" className="responsive-image h-12 w-12" />
107+
</>
108+
)}
109+
</div>
110+
</div>
111+
<div className="chat-container">
112+
<div className="mx-20 mt-20">
113+
<div className="chat chat-start mt-20 justify-left mt-20">
114+
<div className="chat-bubble">You need to pick a planet!</div>
115+
</div>
116+
<div className="chat chat-end">
117+
<div className="chat-bubble">You've got 5 new deposits to explore</div>
118+
</div>
119+
<div className="chat chat-start">
120+
<div className="chat-bubble">A dust storm is brewing on your home planet, time to investigate.</div>
121+
</div>
122+
<PlanetCharacter /></div>
123+
{isDesktopOrLaptop && ( <UponSignupModal /> )}
124+
</div>
125+
<div className="absolute inset-0 grid grid-cols-3 grid-rows-3 gap-4 p-40 my-12">
126+
{/* Content here */}
127+
</div>
128+
<div className="mt-20">
129+
{showFeedOverlay && (
130+
<>
131+
<div className="mt-20">
132+
<FeedOverlay onClose={() => setShowFeedOverlay(false)} />
133+
</div>
134+
</>
135+
)}
136+
</div>
137+
</div>
138+
{/* Menu Button */}
139+
{!showFeedOverlay && (
140+
<button
141+
onClick={handleOpenFeedOverlay}
142+
className="fixed bottom-2 left-1/2 transform -translate-x-1/2 mt-4 px-4 py-2 text-white rounded"
143+
>
144+
<a
145+
href="#_"
146+
className="inline-flex overflow-hidden text-white bg-gray-900 rounded group"
147+
>
148+
<span className="px-3.5 py-2 text-white bg-purple-500 group-hover:bg-purple-600 flex items-center justify-center">
149+
<svg
150+
className="w-5 h-5"
151+
fill="none"
152+
stroke="currentColor"
153+
viewBox="0 0 24 24"
154+
xmlns="http://www.w3.org/2000/svg"
155+
>
156+
<path
157+
strokeLinecap="round"
158+
strokeLinejoin="round"
159+
strokeWidth="2"
160+
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
161+
></path>
162+
</svg>
163+
</span>
164+
<span className="pl-4 pr-5 py-2.5">Menu</span>
165+
</a>
166+
</button>
167+
)}
168+
</LayoutNoNav>
169+
);
170+
171+
157172
};
158173

159174
return (
@@ -301,11 +316,11 @@ export function PublicLanding() {
301316
<span className="italic">Star Sailors</span>
302317
</h1>
303318
<p className="mt-6 mx-auto max-w-2xl text-lg leading-8 text-gray-600 dark:text-white">
304-
Star Sailors V2 is currently under development, please go to v1
319+
One-liner about Star Sailors
305320
</p>
306321
<div className="mt-10 flex items-center justify-center gap-x-6">
307322
<a
308-
href="https://starprotocol-og3j6xuus-gizmotronn.vercel.app"
323+
href="/login"
309324
className="rounded-md px-3.5 py-2.5 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-200 hover:ring-2 hover:ring-yellow-300 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-white"
310325
>
311326
Get Started <span aria-hidden="true">→</span>
@@ -314,13 +329,13 @@ export function PublicLanding() {
314329
</div>
315330
<div className="mt-14 flow-root sm:mt-14 ">
316331
<div className="-m-2 rounded-xl lg:-m-4 lg:rounded-2xl lg:p-4">
317-
<Link href="/login"><img
332+
<img
318333
src="https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/media/garden.png"
319334
alt="App screenshot"
320335
width={2432}
321336
height={1442}
322337
className="rounded-md shadow-2xl ring-1 ring-gray-900/10"
323-
/></Link>
338+
/>
324339
</div>
325340
</div>
326341
</div>
@@ -566,4 +581,4 @@ export default function Home() {
566581
const userId = session?.user?.id;
567582

568583
return <PublicLanding />;
569-
};
584+
}

0 commit comments

Comments
 (0)