🍩🌆 ↝ [SSG-75 SSP-35]: Adding contour lines & updating some views

Signal-K · Nov 23, 2024 · 10e37ac · 10e37ac
1 parent 7e27fc7
commit 10e37ac
Show file tree

Hide file tree

Showing 9 changed files with 221 additions and 89 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -76,7 +76,7 @@ export default function Home() {
           <div className="py-1">
             <EnhancedWeatherEvents />
           </div>
-          <center>
+          <center> 
             <OrbitalStructuresOnPlanet />
           </center>
         </div>

diff --git a/app/starnet/page.tsx b/app/starnet/page.tsx
@@ -20,7 +20,7 @@ export default function Starnet() {
     );
 };
 
-const StructureMissionGuideMobile = () => {
+export const StructureMissionGuideMobile = () => {
     const supabase = useSupabaseClient();
     const session = useSession();
 

diff --git a/components/(scenes)/planetScene/layout.tsx b/components/(scenes)/planetScene/layout.tsx
@@ -150,7 +150,7 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
   const sectionStyles: CSSProperties[] = [
     {
       flex: 8,
-    },
+    }, 
     {
       flex: 6,
     },

diff --git a/components/Layout/BottomMenu.tsx b/components/Layout/BottomMenu.tsx
@@ -2,21 +2,48 @@ import { Globe, HelpCircle, Star, Pickaxe } from "lucide-react";
 import { usePathname } from "next/navigation";    
 import Link from "next/link";
 import { useState } from "react";
+import { MiningComponentComponent } from "../mining-component";
+import { StructureMissionGuideMobile } from "@/app/starnet/page";
 
 const menuItems = [
   { icon: Globe, label: "Planet", href: "/" },
-  { icon: Pickaxe, label: "Mining", href: "/scenes/mining" },
   { icon: Star, label: "Discoveries", href: "/starnet/feed" },
-  {
-    icon: HelpCircle,
-    label: "Guide",
-    href: "/starnet",
-  },
 ];
 
+const ModalContent = ({ onClose }: { onClose: () => void }) => (
+  <div className="flex flex-col h-full w-full bg-white p-4 rounded-md">
+    <button
+      onClick={onClose}
+      className="self-end text-gray-500 hover:text-gray-800 text-lg"
+    >
+      ✕
+    </button>
+    <MiningComponentComponent />
+  </div>
+);
+
+const ModalContentGuide = ({ onClose }: { onClose: () => void }) => (
+  <div className="flex flex-col h-full w-full p-4 rounded-md">
+    <button
+      onClick={onClose}
+      className="self-end text-gray-500 hover:text-gray-800 text-lg"
+    >
+      ✕
+    </button>
+    <StructureMissionGuideMobile />
+  </div>
+);
+
 export default function BottomMenuLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();    
   const [hovered, setHovered] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isGuideOpen, setGuideOpen] = useState(false);
+
+  const openModal = () => setIsModalOpen(true);
+  const openModalGuide = () => setGuideOpen(true);
+  const closeModalGuide = () => setGuideOpen(false);
+  const closeModal = () => setIsModalOpen(false);
 
   return (
     <div className="relative min-h-screen flex flex-col">
@@ -44,9 +71,57 @@ export default function BottomMenuLayout({ children }: { children: React.ReactNo
                 </Link>
               </li>
             ))}
+            <li>
+              <button
+                onMouseEnter={() => setHovered("Mining")}
+                onMouseLeave={() => setHovered(null)}
+                onClick={openModal}
+                className="relative flex items-center justify-center w-10 h-10 text-white hover:bg-white/10 rounded-full transition-all duration-300"
+              >
+                <Pickaxe className="w-6 h-6" />
+                {hovered === "Mining" && (
+                  <span className="absolute top-full mt-1 text-sm font-medium text-white bg-black bg-opacity-80 rounded px-2 py-1">
+                    Mining
+                  </span>
+                )}
+              </button>
+            </li>
+            <li>
+              <button
+                onMouseEnter={() => setHovered("Help")}
+                onMouseLeave={() => setHovered(null)}
+                onClick={openModalGuide}
+                className="flex items-center justify-center w-10 h-10 text-white hover:bg-white/10 rounded-full transition-all duration-300"
+              >
+                <HelpCircle className="w-6 h-6" />
+                {hovered === "Help" && (
+                  <span className="absolute top-full mt-1 text-sm font-medium text-white bg-black bg-opacity-80 rounded px-2 py-1">
+                    Guide
+                  </span>
+                )}
+              </button>
+            </li>
           </ul>
         </nav>
       </div>
+
+      {/* Modal for Mining */}
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="w-[90%] h-[90%] bg-white rounded-lg shadow-lg">
+            <ModalContent onClose={closeModal} />
+          </div>
+        </div>
+      )}
+
+      {/* Modal for Guide */}
+      {isGuideOpen && (
+        <div className="fixed inset-0  flex items-center justify-center z-50">
+          <div className="w-[90%] h-[90%] rounded-lg">
+            <ModalContentGuide onClose={closeModalGuide} />
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/components/Layout/Toolbar.tsx b/components/Layout/Toolbar.tsx
@@ -1,88 +1,113 @@
 'use client';
 
-import { Building2Icon, Construction, CloudDrizzleIcon, HandMetalIcon, Settings } from "lucide-react";
-import { usePathname } from "next/navigation";    
-import Link from "next/link";
 import { useState } from "react";
+import { usePathname } from "next/navigation";
+import {
+  Building2Icon,
+  Construction,
+  CloudDrizzleIcon,
+  HandMetalIcon,
+  Settings,
+} from "lucide-react";
 import TutorialPopup from "@/content/Dialogue/helpButton";
+import { MiningComponentComponent } from "../mining-component";
 
 const menuItems = [
-  { icon: Building2Icon, label: "Structures", href: "/" },
-  { icon: Construction, label: "Mining", href: "/#" },
-  { icon: CloudDrizzleIcon, label: "Weather", href: "/#" },
-  { icon: HandMetalIcon, label: "Topography", href: "/#" },
+  { icon: Building2Icon, label: "Structures", content: "Structures Content" },
+  { icon: Construction, label: "Mining", content: <MiningComponentComponent /> },
+  { icon: CloudDrizzleIcon, label: "Weather", content: "Weather Content" },
+  { icon: HandMetalIcon, label: "Topography", content: <TutorialPopup /> },
 ];
 
 export default function VerticalToolbar() {
   const pathname = usePathname();
   const [hovered, setHovered] = useState<string | null>(null);
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [activeModal, setActiveModal] = useState<string | null>(null);
 
   return (
     <div className="z-50">
+      {/* Vertical Toolbar for larger screens */}
       <div className="hidden md:block fixed left-4 top-1/4 transform -translate-y-1/2">
         <nav className="bg-[#1E3A4C] rounded-xl shadow-lg backdrop-blur-md bg-opacity-80 p-2">
           <ul className="flex flex-col space-y-4">
-            {menuItems.map(({ icon: Icon, label, href }) => (
+            {menuItems.map(({ icon: Icon, label }) => (
               <li key={label}>
-                <Link legacyBehavior href={href}>
-                  <a
-                    onMouseEnter={() => setHovered(label)}
-                    onMouseLeave={() => setHovered(null)}
-                    className={`flex items-center px-4 py-3 rounded-full transition-all duration-300 relative 
-                      ${pathname === href
+                <button
+                  onMouseEnter={() => setHovered(label)}
+                  onMouseLeave={() => setHovered(null)}
+                  onClick={() => setActiveModal(label)}
+                  className={`flex items-center px-4 py-3 rounded-full transition-all duration-300 relative 
+                    ${
+                      pathname === label
                         ? "bg-white text-[#1E3A4C] shadow-md"
-                        : "text-white hover:bg-white/10"}`}
-                    aria-label={label}
+                        : "text-white hover:bg-white/10"
+                    }`}
+                  aria-label={label}
+                >
+                  <Icon className="w-6 h-6" />
+                  <span
+                    className={`absolute left-12 opacity-0 transition-opacity duration-300 ${
+                      hovered === label || pathname === label ? "opacity-100" : ""
+                    } text-sm font-medium whitespace-nowrap bg-[#1E3A4C] bg-opacity-90 text-white px-2 py-1 rounded-md`}
                   >
-                    <Icon className="w-6 h-6" />
-                    <span
-                      className={`absolute left-12 opacity-0 transition-opacity duration-300 ${
-                        hovered === label || pathname === href ? 'opacity-100' : ''
-                      } text-sm font-medium whitespace-nowrap bg-[#1E3A4C] bg-opacity-90 text-white px-2 py-1 rounded-md`}
-                    >
-                      {label}
-                    </span>
-                  </a>
-                </Link>
+                    {label}
+                  </span>
+                </button>
               </li>
             ))}
           </ul>
-          <div className="mt-4">
-            <center>
-              <TutorialPopup />
-            </center>
-          </div>
         </nav>
       </div>
 
+      {/* Modal for Popups */}
+      {activeModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div
+            className="w-[90vw] max-w-3xl h-[90vh] bg-white rounded-lg p-4 overflow-y-auto relative"
+          >
+            <button
+              onClick={() => setActiveModal(null)}
+              className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
+              aria-label="Close modal"
+            >
+              ✖
+            </button>
+            <h2 className="text-xl font-bold mb-4">{activeModal}</h2>
+            <div className="text-gray-800">
+              {menuItems.find((item) => item.label === activeModal)?.content}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Bottom Menu for smaller screens */}
       <div className="block md:hidden fixed left-4 bottom-4">
         <button
-          onClick={() => setIsMenuOpen(!isMenuOpen)}
+          onClick={() => setActiveModal("Menu")}
           className="bg-[#1E3A4C] p-4 rounded-full shadow-lg text-white focus:outline-none"
           aria-label="Open menu"
         >
           <Settings className="w-6 h-6" />
         </button>
 
-        {isMenuOpen && (
+        {activeModal === "Menu" && (
           <div className="absolute left-0 bottom-16 bg-[#1E3A4C] rounded-xl shadow-lg backdrop-blur-md bg-opacity-80 p-2">
             <ul className="flex flex-col space-y-4">
-              {menuItems.map(({ icon: Icon, label, href }) => (
+              {menuItems.map(({ icon: Icon, label }) => (
                 <li key={label}>
-                  <Link legacyBehavior href={href}>
-                    <a
-                      onClick={() => setIsMenuOpen(false)}
-                      className={`flex items-center space-x-2 px-4 py-3 rounded-full transition-all duration-300 
-                        ${pathname === href
+                  <button
+                    onClick={() => setActiveModal(label)}
+                    className={`flex items-center space-x-2 px-4 py-3 rounded-full transition-all duration-300 
+                      ${
+                        pathname === label
                           ? "bg-white text-[#1E3A4C] shadow-md"
-                          : "text-white hover:bg-white/10"}`}
-                      aria-label={label}
-                    >
-                      <Icon className="w-6 h-6" />
-                      <span className="text-sm font-medium">{label}</span>
-                    </a>
-                  </Link>
+                          : "text-white hover:bg-white/10"
+                      }`}
+                    aria-label={label}
+                  >
+                    <Icon className="w-6 h-6" />
+                    <span className="text-sm font-medium">{label}</span>
+                  </button>
                 </li>
               ))}
             </ul>

diff --git a/components/Projects/Zoodex/ClassifyOthersAnimals.tsx b/components/Projects/Zoodex/ClassifyOthersAnimals.tsx
@@ -156,7 +156,6 @@ export function StarterZoodex() {
     if (!userChoice) {
         return (
             <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">
-                {/* <StructureInfo structureName="Zoodex" /> */}
                 <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>
                 <h2 className="text-lg font-bold">Choose a data source: </h2>
                 {configuration["missions unlocked"] && Array.isArray(configuration["missions unlocked"]) && configuration["missions unlocked"].length > 0 ? (
@@ -203,7 +202,6 @@ export function StarterZoodex() {
 
     return (
         <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">
-            {/* <StructureInfo structureName="Zoodex" /> */}
             <div className="p-4 rounded-md relative w-full">
                 <h3>{anomaly.content}</h3>
                 {anomaly.avatar_url && (

diff --git a/components/Projects/Zoodex/iguanasFromAbove.tsx b/components/Projects/Zoodex/iguanasFromAbove.tsx
@@ -150,14 +150,6 @@ export const IguanasFromAboveTutorial: React.FC<ZoodexProps> = ({ anomalyId }) =
         )}
         {part === 2 && (
           <>
-            {/* <div className="mb-2">
-              <StructureInfo structureName="Zoodex" />
-              <img
-                src="https://github.com/Signal-K/client/blob/SGV2-154/public/assets/Archive/Inventory/Structures/TelescopeReceiver.png?raw=true"
-                alt="Zoodex"
-                className="w-24 h-24 mb-2"
-              />
-            </div> */}
             <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">
               <div className="relative">
                 <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>

diff --git a/components/mining-component.tsx b/components/mining-component.tsx
@@ -308,11 +308,11 @@ export function MiningComponentComponent() {
   return (
     <div className="relative h-screen w-full overflow-hidden bg-gray-100 text-[#2C4F64] flex flex-col">
       <div className="flex justify-between items-center p-4">
-        <h2 className="text-2xl font-bold">Mars Mining Operation</h2>
+        <h2 className="text-2xl font-bold">Mining Operations</h2>
         <Button
           onClick={toggleMap}
           variant="outline"
-          className="text-[#2C4F64] hover:bg-[#5FCBC3]/20"
+          className="text-[#ffffff] hover:bg-[#5FCBC3]/20"
         >
           Switch to {activeMap === '2D' ? '3D' : '2D'} Map
         </Button>