From 10e37ac88d6e19e8830b29e9a35b6581f8878052 Mon Sep 17 00:00:00 2001 From: Gizmotronn Date: Sat, 23 Nov 2024 18:02:21 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=A9=F0=9F=8C=86=20=E2=86=9D=20[SSG-75?= =?UTF-8?q?=20SSP-35]:=20Adding=20contour=20lines=20&=20updating=20some=20?= =?UTF-8?q?views?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/page.tsx | 2 +- app/starnet/page.tsx | 2 +- components/(scenes)/planetScene/layout.tsx | 2 +- components/Layout/BottomMenu.tsx | 87 ++++++++++++- components/Layout/Toolbar.tsx | 119 +++++++++++------- .../Projects/Zoodex/ClassifyOthersAnimals.tsx | 2 - .../Projects/Zoodex/iguanasFromAbove.tsx | 8 -- components/mining-component.tsx | 4 +- components/topographic-map.tsx | 84 +++++++++---- 9 files changed, 221 insertions(+), 89 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 3b5feb03..63ea1050 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -76,7 +76,7 @@ export default function Home() {
-
+
diff --git a/app/starnet/page.tsx b/app/starnet/page.tsx index bcbee93e..2416ae95 100644 --- 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 index a83a7cc3..9d5335f7 100644 --- a/components/(scenes)/planetScene/layout.tsx +++ b/components/(scenes)/planetScene/layout.tsx @@ -150,7 +150,7 @@ export const EarthViewLayout: React.FC = ({ const sectionStyles: CSSProperties[] = [ { flex: 8, - }, + }, { flex: 6, }, diff --git a/components/Layout/BottomMenu.tsx b/components/Layout/BottomMenu.tsx index 78587f8b..06a0ad54 100644 --- 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 }) => ( +
+ + +
+); + +const ModalContentGuide = ({ onClose }: { onClose: () => void }) => ( +
+ + +
+); + export default function BottomMenuLayout({ children }: { children: React.ReactNode }) { const pathname = usePathname(); const [hovered, setHovered] = useState(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 (
@@ -44,9 +71,57 @@ export default function BottomMenuLayout({ children }: { children: React.ReactNo ))} +
  • + +
    • +
  • + +
    • + + {/* Modal for Mining */} + {isModalOpen && ( +
    +
    + +
    +
    + )} + + {/* Modal for Guide */} + {isGuideOpen && ( +
    +
    + +
    +
    + )} ); }; \ No newline at end of file diff --git a/components/Layout/Toolbar.tsx b/components/Layout/Toolbar.tsx index efee5a58..abbf3d27 100644 --- 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: }, + { icon: CloudDrizzleIcon, label: "Weather", content: "Weather Content" }, + { icon: HandMetalIcon, label: "Topography", content: }, ]; export default function VerticalToolbar() { const pathname = usePathname(); const [hovered, setHovered] = useState(null); - const [isMenuOpen, setIsMenuOpen] = useState(false); + const [activeModal, setActiveModal] = useState(null); return (
    + {/* Vertical Toolbar for larger screens */} + {/* Modal for Popups */} + {activeModal && ( +
    +
    + +

    {activeModal}

    +
    + {menuItems.find((item) => item.label === activeModal)?.content} +
    +
    +
    + )} + + {/* Bottom Menu for smaller screens */}
    - {isMenuOpen && ( + {activeModal === "Menu" && (
    diff --git a/components/Projects/Zoodex/ClassifyOthersAnimals.tsx b/components/Projects/Zoodex/ClassifyOthersAnimals.tsx index 9df54997..af175677 100644 --- a/components/Projects/Zoodex/ClassifyOthersAnimals.tsx +++ b/components/Projects/Zoodex/ClassifyOthersAnimals.tsx @@ -156,7 +156,6 @@ export function StarterZoodex() { if (!userChoice) { return (
    - {/* */}

    You've been given some animals to observe and compare to their mannerisms on Earth. As you progress, more species will become available.

    Choose a data source:

    {configuration["missions unlocked"] && Array.isArray(configuration["missions unlocked"]) && configuration["missions unlocked"].length > 0 ? ( @@ -203,7 +202,6 @@ export function StarterZoodex() { return (
    - {/* */}

    {anomaly.content}

    {anomaly.avatar_url && ( diff --git a/components/Projects/Zoodex/iguanasFromAbove.tsx b/components/Projects/Zoodex/iguanasFromAbove.tsx index f1cb9b73..19d08350 100644 --- a/components/Projects/Zoodex/iguanasFromAbove.tsx +++ b/components/Projects/Zoodex/iguanasFromAbove.tsx @@ -150,14 +150,6 @@ export const IguanasFromAboveTutorial: React.FC = ({ anomalyId }) = )} {part === 2 && ( <> - {/*
    - - Zoodex -
    */}
    diff --git a/components/mining-component.tsx b/components/mining-component.tsx index 9c49e090..5fd2351e 100644 --- a/components/mining-component.tsx +++ b/components/mining-component.tsx @@ -308,11 +308,11 @@ export function MiningComponentComponent() { return (
    -

    Mars Mining Operation

    +

    Mining Operations

    diff --git a/components/topographic-map.tsx b/components/topographic-map.tsx index 79e0436e..1d658961 100644 --- a/components/topographic-map.tsx +++ b/components/topographic-map.tsx @@ -1,6 +1,7 @@ -import { useEffect, useRef } from 'react'; -import { motion } from 'framer-motion'; -import { MapPin, Pickaxe, Zap, Battery, Magnet } from 'lucide-react'; +import { useEffect, useRef, useState } from "react"; +import { MapPin, Pickaxe, Zap, Battery, Magnet } from "lucide-react"; +import { createNoise2D } from "simplex-noise"; +import alea from "alea"; export type MineralDeposit = { id: string; @@ -10,7 +11,7 @@ export type MineralDeposit = { position: { x: number; y: number }; icon_url: string; level: number; - uses: any[]; // Adjust this according to your actual data structure + uses: any[]; }; type Landmark = { @@ -32,37 +33,53 @@ type TopographicMapProps = { const getMineralIcon = (name: string) => { switch (name) { - case 'Iron': + case "Iron": return ; - case 'Copper': + case "Copper": return ; - case 'Coal': + case "Coal": return ; - case 'Nickel': + case "Nickel": return ; default: return ; } }; -const BackgroundMap = ({ deposits }: { deposits: MineralDeposit[] }) => { +const BackgroundMap = ({ deposits, seed }: { deposits: MineralDeposit[]; seed: string }) => { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext("2d"); if (!ctx) return; + const prng = alea(seed); // Use the seed for consistency + const noise2D = createNoise2D(prng); + const drawMap = () => { const { width, height } = canvas; - ctx.fillStyle = '#F5F5DC'; + ctx.clearRect(0, 0, width, height); + ctx.fillStyle = "#F5F5DC"; ctx.fillRect(0, 0, width, height); + // Draw contour lines + const step = 10; + for (let y = 0; y < height; y += step) { + for (let x = 0; x < width; x += step) { + const elevation = noise2D(x * 0.005, y * 0.005); + const color = elevation > 0 ? `rgba(96, 165, 250, ${elevation})` : `rgba(30, 58, 138, ${-elevation})`; + ctx.fillStyle = color; + ctx.fillRect(x, y, step, step); + } + } + + // Highlight deposits deposits.forEach((deposit) => { - ctx.fillStyle = '#A52A2A'; + ctx.fillStyle = "#A52A2A"; ctx.beginPath(); ctx.arc( deposit.position.x * (width / 100), @@ -72,7 +89,7 @@ const BackgroundMap = ({ deposits }: { deposits: MineralDeposit[] }) => { 2 * Math.PI ); ctx.fill(); - ctx.strokeStyle = '#2C4F64'; + ctx.strokeStyle = "#2C4F64"; ctx.lineWidth = 2; ctx.stroke(); }); @@ -84,11 +101,11 @@ const BackgroundMap = ({ deposits }: { deposits: MineralDeposit[] }) => { drawMap(); }; - window.addEventListener('resize', resizeCanvas); + window.addEventListener("resize", resizeCanvas); resizeCanvas(); - return () => window.removeEventListener('resize', resizeCanvas); - }, [deposits]); + return () => window.removeEventListener("resize", resizeCanvas); + }, [deposits, seed]); return ; }; @@ -101,9 +118,28 @@ export function TopographicMap({ onDepositSelect, onLandmarkClick, }: TopographicMapProps) { + const [terrainSeed, setTerrainSeed] = useState("default"); + const [dynamicLandmarks, setDynamicLandmarks] = useState(landmarks); + + const generateNewSector = () => { + const newSeed = Math.random().toString(); // Generate a new random seed + setTerrainSeed(newSeed); + + // Move landmarks to random positions + setDynamicLandmarks( + dynamicLandmarks.map((landmark) => ({ + ...landmark, + position: { + x: Math.random() * 100, + y: Math.random() * 100, + }, + })) + ); + }; + return ( -
    - +
    + {deposits.map((deposit) => (
    onDepositSelect(deposit)} > {getMineralIcon(deposit.mineral)}
    ))} - {landmarks.map((landmark) => ( + {dynamicLandmarks.map((landmark) => (
    ))} +
    ); -} \ No newline at end of file +}; \ No newline at end of file