Skip to content

Commit 10e37ac

Browse files
GizmotronnGizmotronn
committed
🍩🌆 ↝ [SSG-75 SSP-35]: Adding contour lines & updating some views
1 parent 7e27fc7 commit 10e37ac

File tree

9 files changed

+221
-89
lines changed

9 files changed

+221
-89
lines changed

‎app/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default function Home() {
7676
<div className="py-1">
7777
<EnhancedWeatherEvents />
7878
</div>
79-
<center>
79+
<center>
8080
<OrbitalStructuresOnPlanet />
8181
</center>
8282
</div>

‎app/starnet/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function Starnet() {
2020
);
2121
};
2222

23-
const StructureMissionGuideMobile = () => {
23+
export const StructureMissionGuideMobile = () => {
2424
const supabase = useSupabaseClient();
2525
const session = useSession();
2626

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
150150
const sectionStyles: CSSProperties[] = [
151151
{
152152
flex: 8,
153-
},
153+
},
154154
{
155155
flex: 6,
156156
},

‎components/Layout/BottomMenu.tsx

+81-6
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,48 @@ import { Globe, HelpCircle, Star, Pickaxe } from "lucide-react";
22
import { usePathname } from "next/navigation";
33
import Link from "next/link";
44
import { useState } from "react";
5+
import { MiningComponentComponent } from "../mining-component";
6+
import { StructureMissionGuideMobile } from "@/app/starnet/page";
57

68
const menuItems = [
79
{ icon: Globe, label: "Planet", href: "/" },
8-
{ icon: Pickaxe, label: "Mining", href: "/scenes/mining" },
910
{ icon: Star, label: "Discoveries", href: "/starnet/feed" },
10-
{
11-
icon: HelpCircle,
12-
label: "Guide",
13-
href: "/starnet",
14-
},
1511
];
1612

13+
const ModalContent = ({ onClose }: { onClose: () => void }) => (
14+
<div className="flex flex-col h-full w-full bg-white p-4 rounded-md">
15+
<button
16+
onClick={onClose}
17+
className="self-end text-gray-500 hover:text-gray-800 text-lg"
18+
>
19+
✕
20+
</button>
21+
<MiningComponentComponent />
22+
</div>
23+
);
24+
25+
const ModalContentGuide = ({ onClose }: { onClose: () => void }) => (
26+
<div className="flex flex-col h-full w-full p-4 rounded-md">
27+
<button
28+
onClick={onClose}
29+
className="self-end text-gray-500 hover:text-gray-800 text-lg"
30+
>
31+
✕
32+
</button>
33+
<StructureMissionGuideMobile />
34+
</div>
35+
);
36+
1737
export default function BottomMenuLayout({ children }: { children: React.ReactNode }) {
1838
const pathname = usePathname();
1939
const [hovered, setHovered] = useState<string | null>(null);
40+
const [isModalOpen, setIsModalOpen] = useState(false);
41+
const [isGuideOpen, setGuideOpen] = useState(false);
42+
43+
const openModal = () => setIsModalOpen(true);
44+
const openModalGuide = () => setGuideOpen(true);
45+
const closeModalGuide = () => setGuideOpen(false);
46+
const closeModal = () => setIsModalOpen(false);
2047

2148
return (
2249
<div className="relative min-h-screen flex flex-col">
@@ -44,9 +71,57 @@ export default function BottomMenuLayout({ children }: { children: React.ReactNo
4471
</Link>
4572
</li>
4673
))}
74+
<li>
75+
<button
76+
onMouseEnter={() => setHovered("Mining")}
77+
onMouseLeave={() => setHovered(null)}
78+
onClick={openModal}
79+
className="relative flex items-center justify-center w-10 h-10 text-white hover:bg-white/10 rounded-full transition-all duration-300"
80+
>
81+
<Pickaxe className="w-6 h-6" />
82+
{hovered === "Mining" && (
83+
<span className="absolute top-full mt-1 text-sm font-medium text-white bg-black bg-opacity-80 rounded px-2 py-1">
84+
Mining
85+
</span>
86+
)}
87+
</button>
88+
</li>
89+
<li>
90+
<button
91+
onMouseEnter={() => setHovered("Help")}
92+
onMouseLeave={() => setHovered(null)}
93+
onClick={openModalGuide}
94+
className="flex items-center justify-center w-10 h-10 text-white hover:bg-white/10 rounded-full transition-all duration-300"
95+
>
96+
<HelpCircle className="w-6 h-6" />
97+
{hovered === "Help" && (
98+
<span className="absolute top-full mt-1 text-sm font-medium text-white bg-black bg-opacity-80 rounded px-2 py-1">
99+
Guide
100+
</span>
101+
)}
102+
</button>
103+
</li>
47104
</ul>
48105
</nav>
49106
</div>
107+
108+
{/* Modal for Mining */}
109+
{isModalOpen && (
110+
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
111+
<div className="w-[90%] h-[90%] bg-white rounded-lg shadow-lg">
112+
<ModalContent onClose={closeModal} />
113+
</div>
114+
</div>
115+
)}
116+
117+
{/* Modal for Guide */}
118+
{isGuideOpen && (
119+
<div className="fixed inset-0 flex items-center justify-center z-50">
120+
<div className="w-[90%] h-[90%] rounded-lg">
121+
<ModalContentGuide onClose={closeModalGuide} />
122+
</div>
123+
</div>
124+
)}
50125
</div>
51126
);
52127
};

‎components/Layout/Toolbar.tsx

+72-47
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,113 @@
11
'use client';
22

3-
import { Building2Icon, Construction, CloudDrizzleIcon, HandMetalIcon, Settings } from "lucide-react";
4-
import { usePathname } from "next/navigation";
5-
import Link from "next/link";
63
import { useState } from "react";
4+
import { usePathname } from "next/navigation";
5+
import {
6+
Building2Icon,
7+
Construction,
8+
CloudDrizzleIcon,
9+
HandMetalIcon,
10+
Settings,
11+
} from "lucide-react";
712
import TutorialPopup from "@/content/Dialogue/helpButton";
13+
import { MiningComponentComponent } from "../mining-component";
814

915
const menuItems = [
10-
{ icon: Building2Icon, label: "Structures", href: "/" },
11-
{ icon: Construction, label: "Mining", href: "/#" },
12-
{ icon: CloudDrizzleIcon, label: "Weather", href: "/#" },
13-
{ icon: HandMetalIcon, label: "Topography", href: "/#" },
16+
{ icon: Building2Icon, label: "Structures", content: "Structures Content" },
17+
{ icon: Construction, label: "Mining", content: <MiningComponentComponent /> },
18+
{ icon: CloudDrizzleIcon, label: "Weather", content: "Weather Content" },
19+
{ icon: HandMetalIcon, label: "Topography", content: <TutorialPopup /> },
1420
];
1521

1622
export default function VerticalToolbar() {
1723
const pathname = usePathname();
1824
const [hovered, setHovered] = useState<string | null>(null);
19-
const [isMenuOpen, setIsMenuOpen] = useState(false);
25+
const [activeModal, setActiveModal] = useState<string | null>(null);
2026

2127
return (
2228
<div className="z-50">
29+
{/* Vertical Toolbar for larger screens */}
2330
<div className="hidden md:block fixed left-4 top-1/4 transform -translate-y-1/2">
2431
<nav className="bg-[#1E3A4C] rounded-xl shadow-lg backdrop-blur-md bg-opacity-80 p-2">
2532
<ul className="flex flex-col space-y-4">
26-
{menuItems.map(({ icon: Icon, label, href }) => (
33+
{menuItems.map(({ icon: Icon, label }) => (
2734
<li key={label}>
28-
<Link legacyBehavior href={href}>
29-
<a
30-
onMouseEnter={() => setHovered(label)}
31-
onMouseLeave={() => setHovered(null)}
32-
className={`flex items-center px-4 py-3 rounded-full transition-all duration-300 relative
33-
${pathname === href
35+
<button
36+
onMouseEnter={() => setHovered(label)}
37+
onMouseLeave={() => setHovered(null)}
38+
onClick={() => setActiveModal(label)}
39+
className={`flex items-center px-4 py-3 rounded-full transition-all duration-300 relative
40+
${
41+
pathname === label
3442
? "bg-white text-[#1E3A4C] shadow-md"
35-
: "text-white hover:bg-white/10"}`}
36-
aria-label={label}
43+
: "text-white hover:bg-white/10"
44+
}`}
45+
aria-label={label}
46+
>
47+
<Icon className="w-6 h-6" />
48+
<span
49+
className={`absolute left-12 opacity-0 transition-opacity duration-300 ${
50+
hovered === label || pathname === label ? "opacity-100" : ""
51+
} text-sm font-medium whitespace-nowrap bg-[#1E3A4C] bg-opacity-90 text-white px-2 py-1 rounded-md`}
3752
>
38-
<Icon className="w-6 h-6" />
39-
<span
40-
className={`absolute left-12 opacity-0 transition-opacity duration-300 ${
41-
hovered === label || pathname === href ? 'opacity-100' : ''
42-
} text-sm font-medium whitespace-nowrap bg-[#1E3A4C] bg-opacity-90 text-white px-2 py-1 rounded-md`}
43-
>
44-
{label}
45-
</span>
46-
</a>
47-
</Link>
53+
{label}
54+
</span>
55+
</button>
4856
</li>
4957
))}
5058
</ul>
51-
<div className="mt-4">
52-
<center>
53-
<TutorialPopup />
54-
</center>
55-
</div>
5659
</nav>
5760
</div>
5861

62+
{/* Modal for Popups */}
63+
{activeModal && (
64+
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
65+
<div
66+
className="w-[90vw] max-w-3xl h-[90vh] bg-white rounded-lg p-4 overflow-y-auto relative"
67+
>
68+
<button
69+
onClick={() => setActiveModal(null)}
70+
className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
71+
aria-label="Close modal"
72+
>
73+
✖
74+
</button>
75+
<h2 className="text-xl font-bold mb-4">{activeModal}</h2>
76+
<div className="text-gray-800">
77+
{menuItems.find((item) => item.label === activeModal)?.content}
78+
</div>
79+
</div>
80+
</div>
81+
)}
82+
83+
{/* Bottom Menu for smaller screens */}
5984
<div className="block md:hidden fixed left-4 bottom-4">
6085
<button
61-
onClick={() => setIsMenuOpen(!isMenuOpen)}
86+
onClick={() => setActiveModal("Menu")}
6287
className="bg-[#1E3A4C] p-4 rounded-full shadow-lg text-white focus:outline-none"
6388
aria-label="Open menu"
6489
>
6590
<Settings className="w-6 h-6" />
6691
</button>
6792

68-
{isMenuOpen && (
93+
{activeModal === "Menu" && (
6994
<div className="absolute left-0 bottom-16 bg-[#1E3A4C] rounded-xl shadow-lg backdrop-blur-md bg-opacity-80 p-2">
7095
<ul className="flex flex-col space-y-4">
71-
{menuItems.map(({ icon: Icon, label, href }) => (
96+
{menuItems.map(({ icon: Icon, label }) => (
7297
<li key={label}>
73-
<Link legacyBehavior href={href}>
74-
<a
75-
onClick={() => setIsMenuOpen(false)}
76-
className={`flex items-center space-x-2 px-4 py-3 rounded-full transition-all duration-300
77-
${pathname === href
98+
<button
99+
onClick={() => setActiveModal(label)}
100+
className={`flex items-center space-x-2 px-4 py-3 rounded-full transition-all duration-300
101+
${
102+
pathname === label
78103
? "bg-white text-[#1E3A4C] shadow-md"
79-
: "text-white hover:bg-white/10"}`}
80-
aria-label={label}
81-
>
82-
<Icon className="w-6 h-6" />
83-
<span className="text-sm font-medium">{label}</span>
84-
</a>
85-
</Link>
104+
: "text-white hover:bg-white/10"
105+
}`}
106+
aria-label={label}
107+
>
108+
<Icon className="w-6 h-6" />
109+
<span className="text-sm font-medium">{label}</span>
110+
</button>
86111
</li>
87112
))}
88113
</ul>

‎components/Projects/Zoodex/ClassifyOthersAnimals.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,6 @@ export function StarterZoodex() {
156156
if (!userChoice) {
157157
return (
158158
<div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
159-
{/* <StructureInfo structureName="Zoodex" /> */}
160159
<p className="text-sm font-bold">You've been given some animals to observe and compare to their mannerisms on Earth. As you progress, more species will become available.</p>
161160
<h2 className="text-lg font-bold">Choose a data source: </h2>
162161
{configuration["missions unlocked"] && Array.isArray(configuration["missions unlocked"]) && configuration["missions unlocked"].length > 0 ? (
@@ -203,7 +202,6 @@ export function StarterZoodex() {
203202

204203
return (
205204
<div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
206-
{/* <StructureInfo structureName="Zoodex" /> */}
207205
<div className="p-4 rounded-md relative w-full">
208206
<h3>{anomaly.content}</h3>
209207
{anomaly.avatar_url && (

‎components/Projects/Zoodex/iguanasFromAbove.tsx

-8
Original file line numberDiff line numberDiff line change
@@ -150,14 +150,6 @@ export const IguanasFromAboveTutorial: React.FC<ZoodexProps> = ({ anomalyId }) =
150150
)}
151151
{part === 2 && (
152152
<>
153-
{/* <div className="mb-2">
154-
<StructureInfo structureName="Zoodex" />
155-
<img
156-
src="https://github.com/Signal-K/client/blob/SGV2-154/public/assets/Archive/Inventory/Structures/TelescopeReceiver.png?raw=true"
157-
alt="Zoodex"
158-
className="w-24 h-24 mb-2"
159-
/>
160-
</div> */}
161153
<div className="max-w-4xl mx-auto rounded-lg bg-[#1D2833] text-[#F7F5E9] rounded-md bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70">
162154
<div className="relative">
163155
<div className="absolute inset-0 w-full h-full bg-[#2C4F64] rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-0"></div>

‎components/mining-component.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -308,11 +308,11 @@ export function MiningComponentComponent() {
308308
return (
309309
<div className="relative h-screen w-full overflow-hidden bg-gray-100 text-[#2C4F64] flex flex-col">
310310
<div className="flex justify-between items-center p-4">
311-
<h2 className="text-2xl font-bold">Mars Mining Operation</h2>
311+
<h2 className="text-2xl font-bold">Mining Operations</h2>
312312
<Button
313313
onClick={toggleMap}
314314
variant="outline"
315-
className="text-[#2C4F64] hover:bg-[#5FCBC3]/20"
315+
className="text-[#ffffff] hover:bg-[#5FCBC3]/20"
316316
>
317317
Switch to {activeMap === '2D' ? '3D' : '2D'} Map
318318
</Button>

0 commit comments

Comments
 (0)