Skip to content

Commit 4df2c42

Browse files
GizmotronnGizmotronn
committed
🦔🏎️ ↝ [SSG-63 SSC-30 SSM-40 SSM-54 SSP-31 SSG-58]: New focus on uploads & community content in toolbar
1 parent c0e1843 commit 4df2c42

File tree

19 files changed

+616
-181
lines changed

19 files changed

+616
-181
lines changed

‎app/layout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { UserAnomaliesProvider } from "@/context/UserAnomalies";
1212
import { bgImage, backgroundImages } from "@/constants/backgrounds";
1313
import { Analytics } from "@vercel/analytics/react"
1414
import { MissionProvider } from "@/context/MissionContext";
15-
import TutorialPopup from "../content/Dialogue/helpButton";
1615
import AppLayout from "@/components/Layout/Layout";
1716
import Header from "@/components/ui/Header";
1817

@@ -103,9 +102,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
103102
<div className="sci-fi-signal sci-fi-signal-1"></div>
104103
<div className="sci-fi-signal sci-fi-signal-2"></div>
105104
</div>
105+
<div className="relative min-h-screen w-full flex flex-col">
106106
{children}
107+
</div>
107108
</AppLayout>
108-
<TutorialPopup />
109109
<Analytics />
110110
</InventoryProvider>
111111
</UserAnomaliesProvider>

‎app/page.tsx

+51-2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,13 @@ import {
3030
} from './scenes';
3131
import GlobeView from "./scenes/globe/page";
3232
import InitialiseChapterOneUser from "@/components/(scenes)/chapters/one/InitialiseUser";
33+
import { EarthScene } from "./scenes/earth/scene";
34+
import StructuresOnPlanet, { AtmosphereStructuresOnPlanet, OrbitalStructuresOnPlanet } from "@/components/Structures/Structures";
35+
import EnhancedWeatherEvents from "@/components/enhanced-weather-events";
36+
import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomatons";
37+
import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
38+
import Onboarding from "./scenes/onboarding/page";
39+
import VerticalToolbar from "@/components/Layout/Toolbar";
3340

3441
export default function Home() {
3542
const session = useSession();
@@ -52,6 +59,48 @@ export default function Home() {
5259
52: <IoView />,
5360
55: <EuropaView />,
5461
51: <AmaltheaView />,
62+
// 30: <EarthScene
63+
// topSection={
64+
// <EnhancedWeatherEvents />
65+
// }
66+
// middleSection={
67+
// <StructuresOnPlanet />
68+
// }
69+
// middleSectionTwo={
70+
// <AllAutomatonsOnActivePlanet />
71+
// }
72+
// />,
73+
30: <EarthViewLayout>
74+
<div className="w-full">
75+
<div className="flex flex-row space-y-4"></div>
76+
<div className="py-3">
77+
<div className="py-1">
78+
<EnhancedWeatherEvents />
79+
</div>
80+
<center>
81+
<OrbitalStructuresOnPlanet />
82+
</center>
83+
</div>
84+
</div>
85+
<div className="w-full">
86+
<div className="py-2">
87+
<center>
88+
<AtmosphereStructuresOnPlanet />
89+
</center>
90+
</div>
91+
</div>
92+
<div className="w-full py-2">
93+
<center>
94+
<StructuresOnPlanet />
95+
<AllAutomatonsOnActivePlanet />
96+
</center>
97+
</div>
98+
<div className="w-full py-2">
99+
<center>
100+
<VerticalToolbar />
101+
</center>
102+
</div>
103+
</EarthViewLayout>
55104
// 60: <SaturnView />,
56105
// 62: <TitanView />,
57106
// 61: <EnceladusView />,
@@ -69,13 +118,13 @@ export default function Home() {
69118

70119
if (activePlanet?.id === 69) {
71120
return (
72-
<EarthView />
121+
<EarthScene />
73122
);
74123
};
75124

76125
if (activePlanet?.id === null) {
77126
return (
78-
<InitialiseChapterOneUser />
127+
<Onboarding />
79128
);
80129
};
81130

‎app/scenes/earth/page.tsx

+12-11
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,6 @@ const EarthStructures: React.FC = () => {
3636
return (
3737
<EarthViewLayout>
3838
<EnhancedWeatherEventsComponent />
39-
{/* <div className="w-full">
40-
<div className="py-3">
41-
<div className="py-1">
42-
<PlanetarySystem />
43-
</div>
44-
<center><OrbitalStructuresOnPlanet /></center>
45-
</div>
46-
</div> */}
47-
{/* <TopographicMap /> */}
4839
<div className="w-full">
4940
<div className="py-2">
5041
<center>
@@ -54,7 +45,6 @@ const EarthStructures: React.FC = () => {
5445
</div>
5546
<div className="w-full">
5647
<center>
57-
{/* <InventoryPage /> */}
5848
<StructuresOnPlanet />
5949
</center>
6050
</div>
@@ -63,4 +53,15 @@ const EarthStructures: React.FC = () => {
6353
</div>
6454
</EarthViewLayout>
6555
);
66-
};
56+
};
57+
58+
{/* <div className="w-full">
59+
{/* <InventoryPage />
60+
<div className="py-3">
61+
<div className="py-1">
62+
<PlanetarySystem />
63+
</div>
64+
<center><OrbitalStructuresOnPlanet /></center>
65+
</div>
66+
</div> */}
67+
{/* <TopographicMap /> */}

‎app/scenes/earth/scene.tsx

+69-32
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,81 @@
11
'use client';
22

3-
import { ReactNode } from "react";
3+
import { ReactNode, CSSProperties } from "react";
44

55
export const EarthScene: React.FC<{
66
toolbar?: ReactNode;
77
topSection?: ReactNode;
88
middleSection?: ReactNode;
99
bottomSection?: ReactNode;
10-
}> = ({ toolbar, topSection, middleSection, bottomSection }) => {
10+
middleSectionTwo?: ReactNode;
11+
}> = ({ toolbar, topSection, middleSection, bottomSection, middleSectionTwo }) => {
12+
// Collect all sections to determine height distribution
13+
const sections = [topSection, middleSection, middleSectionTwo, bottomSection].filter(Boolean);
14+
const totalSections = sections.length;
15+
16+
// Define the flex properties for each section
17+
const sectionStyles: CSSProperties[] = sections.map((_, index) => {
18+
// Distribute height for each section
19+
let flexValue = 0;
20+
21+
if (index === 0) {
22+
flexValue = 22.5; // Top section
23+
} else if (index === 1 || index === 2) {
24+
flexValue = 15; // Middle sections, reduced height
25+
} else if (index === 3) {
26+
flexValue = 22.5; // Bottom section
27+
}
28+
29+
return {
30+
flex: flexValue,
31+
};
32+
});
33+
1134
return (
12-
<div className="relative min-h-screen w-full flex flex-col justify-start">
13-
<img
14-
className="absolute inset-0 w-full h-full object-cover"
15-
src="/assets/Backdrops/Earth.png"
16-
alt="Earth Background"
17-
/>
18-
19-
<div className="relative flex flex-col h-full">
20-
{topSection && <div className="w-full h-[22.5vh]">{topSection}</div>}
21-
22-
<div className="flex w-full h-[55vh] relative">
23-
<div className="w-2/3 h-full mx-auto p-4 overflow-hidden">
24-
{middleSection}
25-
</div>
26-
27-
{toolbar && (
28-
<div className="absolute top-0 right-0 h-full flex flex-col justify-center p-7">
29-
{toolbar}
30-
</div>
31-
)}
32-
</div>
33-
34-
{bottomSection && (
35-
<div className="flex w-full h-[22.5vh]">
36-
<div className="w-2/3 h-full mx-auto p-4 overflow-hidden">
37-
{bottomSection}
38-
</div>
35+
<div className="relative min-h-screen w-full flex flex-col">
36+
<img
37+
className="absolute inset-0 w-full h-full object-cover"
38+
src="/assets/Backdrops/Earth.png"
39+
alt="Earth Background"
40+
/>
41+
42+
<div className="relative flex flex-col h-full z-10">
43+
{topSection && (
44+
<div className="relative flex" style={sectionStyles[0]}>
45+
{topSection}
46+
</div>
47+
)}
48+
49+
{middleSection && (
50+
<div className="mt-4 relative flex" style={sectionStyles[1]}>
51+
<div className="w-2/3 h-full mx-auto p-4 overflow-hidden">
52+
{middleSection}
53+
</div>
54+
55+
{toolbar && (
56+
<div className="absolute top-0 right-0 h-full flex flex-col justify-center p-7">
57+
{toolbar}
58+
</div>
59+
)}
60+
</div>
61+
)}
62+
63+
{middleSectionTwo && (
64+
<div className="mt-4 relative flex" style={sectionStyles[2]}>
65+
<div className="w-2/3 h-full mx-auto p-4 overflow-hidden">
66+
{middleSectionTwo}
67+
</div>
68+
</div>
69+
)}
70+
71+
{bottomSection && (
72+
<div className="relative flex" style={sectionStyles[3]}>
73+
<div className="w-2/3 h-full mx-auto p-4 overflow-hidden">
74+
{bottomSection}
75+
</div>
76+
</div>
77+
)}
3978
</div>
40-
)}
4179
</div>
42-
</div>
4380
);
44-
};
81+
};

‎app/scenes/globe/Structures.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,9 @@ export default function StructuresOnPlanet({ onStructuresFetch }: StructuresOnPl
5858

5959
return (
6060
<div className="relative">
61-
<div className="mx-3">
61+
{/* <div className="mx-3">
6262
<CreateCommunityStation />
63-
</div>
63+
</div> */}
6464
<div className={`grid grid-cols-3 gap-1 gap-y-3 relative ${userStructuresOnPlanet.length === 1 ? 'justify-center' : ''}`}>
6565
{userStructuresOnPlanet.map((structure) => {
6666
const itemDetail = itemDetails.get(structure.item);

‎app/scenes/onboarding/page.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ import { EarthScene } from "../earth/scene";
44
import InitialiseChapterOneUser from "@/components/(scenes)/chapters/one/InitialiseUser";
55
import InventoryPage from "@/components/Inventory/Grid/Grid";
66
import EnhancedWeatherEvents from "@/components/enhanced-weather-events";
7-
import { MissionSelectorComponent } from "@/components/mission-selector";
7+
import MissionSelector from "@/components/mission-selector";
8+
import VerticalToolbar from "@/components/Layout/Toolbar";
89

910
export default function Onboarding () {
1011
return (
1112
<EarthScene
1213
// topSection={<EnhancedWeatherEvents />}
13-
middleSection={<MissionSelectorComponent />}
14-
bottomSection={<InventoryPage />}
14+
middleSection={<MissionSelector />}
15+
toolbar={<VerticalToolbar />}
16+
// bottomSection={<InventoryPage />}
1517
/>
1618
);
1719
};

‎app/starnet/feed/uploads/page.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import StarnetLayout from "@/components/Layout/Starnet";
2+
import Uploads from "@/content/Posts/Uploads";
3+
4+
export default function StarnetUploadReviews() {
5+
return (
6+
<StarnetLayout>
7+
<Uploads />
8+
</StarnetLayout>
9+
);
10+
};

‎components/(scenes)/planetScene/layout.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,14 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
161161
];
162162

163163
return (
164-
<div className="min-h-screen w-full flex flex-col">
165-
<div className="relative flex flex-1">
164+
<div className="relative min-h-screen w-full flex flex-col">
165+
<img
166+
className="absolute inset-0 w-full h-full object-cover"
167+
src="/assets/Backdrops/Earth.png"
168+
alt="Earth Background"
169+
/>
170+
171+
<div className="relative flex flex-1 z-10">
166172
<div className="relative flex flex-col flex-1">
167173
{children.slice(0, 2).map((child, index) => (
168174
<div
@@ -173,21 +179,21 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
173179
{child}
174180
</div>
175181
))}
176-
{/* Third and fourth sections */}
177182
<div
178183
className="relative flex flex-1 border-b border-dotted border-gray-5"
179184
style={sectionStyles[2]}
180185
>
181186
<div className="flex flex-1 flex-col">
182-
{/* Third section */}
183187
<div className="flex-1">{children[2]}</div>
184-
{/* Fourth section, if present */}
185188
{children[3] && (
186189
<div className="flex-1 border-t border-dotted border-gray-100">
187190
{children[3]}
188191
</div>
189192
)}
190193
</div>
194+
<div className="flex-shrink-0 mx-7">
195+
{children[4]}
196+
</div>
191197
</div>
192198
</div>
193199
</div>

‎components/Layout/BottomMenu.tsx

+8-12
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@ import { Globe, Rss, HelpCircle, Star } from "lucide-react";
22
import { usePathname } from "next/navigation";
33
import Link from "next/link";
44
import { useState } from "react";
5-
import Header from "../ui/Header";
65

76
const menuItems = [
87
{ icon: Globe, label: "Planet", href: "/" },
98
{ icon: Rss, label: "Mining", href: "/scenes/mining" },
109
{ icon: Star, label: "Travel", href: "/scenes/travel" },
11-
// { icon: Star, label: "Starnet", href: "/starnet" },
1210
{
1311
icon: HelpCircle,
1412
label: "Guide",
@@ -23,24 +21,22 @@ export default function BottomMenuLayout({ children }: { children: React.ReactNo
2321
return (
2422
<div className="relative min-h-screen flex flex-col">
2523
<div className="flex-grow">{children}</div>
26-
27-
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50">
28-
<nav className="backdrop-blur-md bg-[#2C4F64]/30 rounded-full px-2 py-1 shadow-lg">
29-
<ul className="flex items-center space-x-1">
24+
<div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50">
25+
<nav className="bg-[#1E3A4C] rounded-full shadow-lg backdrop-blur-md bg-opacity-80 px-4 py-2">
26+
<ul className="flex items-center space-x-4">
3027
{menuItems.map(({ icon: Icon, label, href }) => (
3128
<li key={label}>
3229
<Link legacyBehavior href={href}>
3330
<a
3431
onMouseEnter={() => setHovered(label)}
3532
onMouseLeave={() => setHovered(null)}
36-
className={`flex items-center space-x-1 px-3 py-2 rounded-full transition-all duration-200 ${
37-
pathname === href
38-
? "bg-white text-[#2C4F64]"
39-
: "text-white hover:bg-white/10"
40-
}`}
33+
className={`flex items-center space-x-2 px-4 py-2 rounded-full transition-all duration-300
34+
${pathname === href
35+
? "bg-white text-[#1E3A4C] shadow-md"
36+
: "text-white hover:bg-white/10"}`}
4137
aria-label={label}
4238
>
43-
<Icon className="w-5 h-5" />
39+
<Icon className="w-6 h-6" />
4440
{(pathname === href || hovered === label) && (
4541
<span className="text-sm font-medium">{label}</span>
4642
)}

0 commit comments

Comments
 (0)