Skip to content

Commit 16d7786

Browse files
GizmotronnGizmotronn
committed
🚣🏻🌆 ↝ [ SGV2-10 SGV2-9 SGV2-2 FCDB-24 ] Characters are back
1 parent 8d818c5 commit 16d7786

File tree

4 files changed

+173
-90
lines changed

4 files changed

+173
-90
lines changed

‎components/Content/Assets/PlanetCharacter.tsx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React, { useEffect, useState } from 'react';
2+
import Image from 'next/image';
3+
4+
export const RoverCharacter: 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]);
26+
27+
return (
28+
<div className="relative w-64 h-64">
29+
<Image
30+
src="/assets/Inventory/Planets/rover.png" // Replace with the path to your character image
31+
alt="Character"
32+
width={256}
33+
height={256}
34+
className="transform transition-transform duration-500"
35+
style={{ transform: `rotate(${angle}deg)` }} // Apply rotation based on angle
36+
/>
37+
</div>
38+
);
39+
};
40+
41+
const PlanetCharacter: React.FC = () => {
42+
const [angle, setAngle] = useState<number>(0);
43+
// State to store animation direction (1 for right, -1 for left)
44+
const [direction, setDirection] = useState<number>(1);
45+
46+
// Function to update animation angle and direction
47+
const updateAnimation = () => {
48+
// Increment angle based on direction
49+
const newAngle = angle + 1 * direction;
50+
// Change direction when angle reaches certain limits
51+
if (newAngle >= 10 || newAngle <= -10) {
52+
setDirection(direction * -1);
53+
}
54+
// Update angle
55+
setAngle(newAngle);
56+
};
57+
58+
// Update animation angle every 50 milliseconds
59+
useEffect(() => {
60+
const interval = setInterval(updateAnimation, 50);
61+
return () => clearInterval(interval); // Cleanup interval on unmount
62+
}, [angle, direction]);
63+
64+
return (
65+
<div className="relative w-64 h-64">
66+
<Image
67+
src="/assets/Inventory/Planets/mars.png" // Replace with the path to your character image
68+
alt="Character"
69+
width={256}
70+
height={256}
71+
className="transform transition-transform duration-500"
72+
style={{ transform: `rotate(${angle}deg)` }} // Apply rotation based on angle
73+
/>
74+
</div>
75+
);
76+
};
77+
78+
export default PlanetCharacter;

‎pages/index.tsx

+95-90
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { GardenDashboard } from "../components/garden-dashboard";
2323
import FeedOverlay from "../components/Overlays/1-Feed";
2424
import UponSignupModal from "../components/Modals/UponSignup";
2525
import { OnboardingWindows } from "../components/Gameplay/onboarding";
26+
import PlanetCharacter, { RoverCharacter } from "../components/Content/Assets/PlanetCharacter";
2627

2728
export const metadata: Metadata = {
2829
title: "Star Sailors",
@@ -85,96 +86,100 @@ export function PublicLanding() {
8586

8687
// if (session && profile?.location) {
8788
if (session) {
88-
return (
89-
<LayoutNoNav>
90-
<Navigation />
91-
<div className="flex-col justify-center mt-10">
92-
<style jsx global>
93-
{`
94-
body {
95-
background: url('satellite.jpg') center/cover;
96-
}
97-
98-
@media only screen and (max-width: 767px) {
99-
.planet-heading {
100-
color: white;
101-
font-size: 24px;
102-
text-align: center;
103-
margin-bottom: 10px;
104-
}
105-
}
106-
`}
107-
</style>
108-
<style jsx global>
109-
{`
110-
.chat {
111-
margin-top: 40px; /* Adjust this value to move the chat bubbles down */
112-
}
113-
114-
.chat-container {
115-
display: flex;
116-
flex-direction: column;
117-
align-items: center; /* This centers the chat bubbles horizontally */
118-
justify-content: center; /* This centers the chat bubbles vertically */
119-
}
120-
121-
/* Additional styles for responsiveness or other adjustments */
122-
@media only screen and (max-width: 767px) {
123-
.chat {
124-
margin-top: 20px; /* Adjust for smaller screens if necessary */
125-
}
126-
}
127-
`}
128-
</style>
129-
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-
<OnboardingWindows />
147-
<div className="absolute inset-0 grid grid-cols-3 grid-rows-3 gap-4 p-40 my-12">
148-
{/* Content here */}
149-
</div>
150-
<div className="mt-20">
151-
{showFeedOverlay && (
152-
<>
153-
<div className="mt-20">
154-
<FeedOverlay onClose={() => setShowFeedOverlay(false)} />
155-
</div>
156-
</>
157-
)}
158-
</div>
159-
</div>
160-
{/* Menu Button */}
161-
{!showFeedOverlay && (
162-
<button
163-
onClick={handleOpenFeedOverlay}
164-
className="fixed bottom-2 left-1/2 transform -translate-x-1/2 mt-4 px-4 py-2 text-white rounded"
165-
>
166-
<a
167-
href="#_"
168-
className="inline-flex overflow-hidden text-white rounded group"
169-
>
170-
<img src='/Galaxy/Kepler-22.png' height='100' width='100' />
171-
</a>
172-
</button>
173-
)}
174-
</LayoutNoNav>
175-
);
176-
177-
89+
return (
90+
<LayoutNoNav>
91+
<Navigation />
92+
<div className="flex-col justify-center mt-10">
93+
<style jsx global>
94+
{`
95+
body {
96+
background: url('satellite.jpg') center/cover;
97+
}
98+
99+
@media only screen and (max-width: 767px) {
100+
.planet-heading {
101+
color: white;
102+
font-size: 24px;
103+
text-align: center;
104+
margin-bottom: 10px;
105+
}
106+
}
107+
`}
108+
</style>
109+
<style jsx global>
110+
{`
111+
.chat {
112+
margin-top: 40px; /* Adjust this value to move the chat bubbles down */
113+
}
114+
115+
.chat-container {
116+
display: flex;
117+
flex-direction: column;
118+
align-items: center; /* This centers the chat bubbles horizontally */
119+
justify-content: center; /* This centers the chat bubbles vertically */
120+
}
121+
122+
/* Additional styles for responsiveness or other adjustments */
123+
@media only screen and (max-width: 767px) {
124+
.chat {
125+
margin-top: 20px; /* Adjust for smaller screens if necessary */
126+
}
127+
}
128+
`}
129+
</style>
130+
131+
<div className="image-container mx-3 absolute top-0 left-1/2 transform -translate-x-1/2 mt-10 mb-10">
132+
<div className="flex justify-center items-center flex-row mt-20">
133+
{isDesktopOrLaptop && (
134+
<>
135+
<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" />
136+
<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" />
137+
</>
138+
)}
139+
{isTabletOrMobile && (
140+
<>
141+
<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" />
142+
<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" />
143+
</>
144+
)}
145+
</div>
146+
</div>
147+
<OnboardingWindows />
148+
149+
<div className="absolute bottom-20 left-1/2 transform -translate-x-1/2 mb-10">
150+
<div className="flex justify-center">
151+
<PlanetCharacter />
152+
<RoverCharacter />
153+
</div>
154+
</div>
155+
156+
<div className="absolute inset-0 grid grid-cols-3 grid-rows-3 gap-4 p-40 my-12">
157+
{/* Content here */}
158+
</div>
159+
<div className="mt-20">
160+
{showFeedOverlay && (
161+
<>
162+
<div className="mt-20">
163+
<FeedOverlay onClose={() => setShowFeedOverlay(false)} />
164+
</div>
165+
</>
166+
)}
167+
</div>
168+
</div>
169+
170+
{/* Menu Button */}
171+
{!showFeedOverlay && (
172+
<button
173+
onClick={handleOpenFeedOverlay}
174+
className="fixed bottom-2 left-1/2 transform -translate-x-1/2 mt-4 px-4 py-2 text-white rounded"
175+
>
176+
<a href="#_" className="inline-flex overflow-hidden text-white rounded group">
177+
<img src='/Galaxy/Kepler-22.png' height='100' width='100' />
178+
</a>
179+
</button>
180+
)}
181+
</LayoutNoNav>
182+
);
178183
};
179184

180185
return (

‎public/assets/Inventory/Planets/Mars.png

1010 KB
Loading

‎public/assets/Inventory/Planets/rover.png

1.01 MB
Loading

0 commit comments

Comments
 (0)