🐡🪁 ↝ [SSM-57 SSM-55 SSM-56 SSM-40 SSC-30 SSM-54]: Updating some mining views, new ideas/missions integrated into the flow

Author: Gizmotronn

app/scenes/mining/page.tsx

@@ -5,10 +5,10 @@ import { useActivePlanet } from "@/context/ActivePlanet";
 import MineralDeposits from "@/components/Structures/Mining/Archive/AvailableDeposits";
 import { SelectMineralPanel } from "@/components/Structures/Mining/Archive/MiningPanels";
 import MineralsInventoryGrid from "@/components/Inventory/mineralsPanel";
-import { MiningComponentComponent } from "@/components/Structures/Mining/Mining";
-import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
+import { MiningComponent } from "@/components/Structures/Mining/Mining";
 import StarnetLayout from "@/components/Layout/Starnet";
+import { EarthActionSceneLayout, EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
+import StructureMissionGuide from "@/components/Layout/Guide";
 
 enum Step {
   MineralDeposits = "MINERAL_DEPOSITS",
@@ -17,14 +17,10 @@ enum Step {
 
 export default function Mining() {
   return (
-    <StarnetLayout>
-      <main className="container mx-auto px-4 relative z-10">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-
-        </div>
-        <MiningComponentComponent />
-      </main>
-    </StarnetLayout>
+    <EarthActionSceneLayout>
+        <MiningComponent />
+        <StructureMissionGuide />
+    </EarthActionSceneLayout>
   );
 };
 

components/(scenes)/planetScene/layout.tsx

@@ -17,8 +17,8 @@ interface PlanetViewLayoutProps {
   children: React.ReactNode[];
 };
 
-interface PlanetViewLayoutProps {
-  children: React.ReactNode[];
+interface PlanetActionSceneProps {
+  children: React.ReactNode;
 };
 
 const PlanetViewLayout: React.FC<PlanetViewLayoutProps> = ({ children }) => {
@@ -170,7 +170,7 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
       />
 
       <div className="relative flex flex-1 z-10">
-        <VerticalToolbar />
+        {/* <VerticalToolbar /> */}
 
         <div className="relative flex flex-col flex-1">
           {children.slice(0, 2).map((child, index) => (
@@ -202,4 +202,19 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
       </div>
     </div>
   );
+};
+
+export const EarthActionSceneLayout:  React.FC<PlanetActionSceneProps> = ({
+  children,
+}) => {
+  return (
+    <div className="relative min-h-screen h-screen w-full flex flex-col">
+      <img
+        className="absolute inset-0 w-full h-full object-cover"
+        src="/assets/Backdrops/Earth.png"
+        alt="Earth Background"
+      />
+      {children}
+    </div>
+  );
 };

components/Layout/BottomMenu.tsx

@@ -1,11 +1,11 @@
-import { Globe, Rss, HelpCircle, Star } from "lucide-react";
+import { Globe, HelpCircle, Star, Pickaxe } from "lucide-react";
 import { usePathname } from "next/navigation";    
 import Link from "next/link";
 import { useState } from "react";
 
 const menuItems = [
   { icon: Globe, label: "Planet", href: "/" },
-  { icon: Rss, label: "Mining", href: "/scenes/mining" },
+  { icon: Pickaxe, label: "Mining", href: "/scenes/mining" },
   { icon: Star, label: "Travel", href: "/scenes/travel" },
   {
     icon: HelpCircle,

components/Layout/Guide.tsx

@@ -2,16 +2,18 @@ import React, { useEffect, useState } from "react";
 import { Button } from "../ui/button";
 import { Card, CardContent } from "../ui/card";
 import { motion, AnimatePresence } from "framer-motion";
-import { ChevronLeft, ChevronRight, CloudHail, HelpCircle, LightbulbIcon, Telescope, TreeDeciduous } from "lucide-react";
+import { ChevronLeft, ChevronRight, CloudHail, HelpCircle, LightbulbIcon, LucideTestTubeDiagonal, Pickaxe, Telescope, TestTube2, TreeDeciduous } from "lucide-react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import MissionPathway from "../Missions/Pathway";
+import { useActivePlanet } from "@/context/ActivePlanet";
 
 interface Mission {
     id: number;
     name: string;
     description: string;
     icon: React.ElementType;
     color: string;
+    requiredItem?: number;
 };
 
 interface DialogueStep {
@@ -26,6 +28,7 @@ const astronomyMissions: Mission[] = [
         description: "Click on the 'Telescope' structure to make some classifications",
         icon: Telescope,
         color: 'text-cyan-300',
+        requiredItem: 3103,
     },
     {
         id: 10000001,
@@ -43,6 +46,7 @@ const biologistMissions: Mission[] = [
         description: "Click on the 'Biodome' structure to make some classifications",
         icon: TreeDeciduous,
         color: 'text-green-300',
+        requiredItem: 3104,
     },
 ];
 
@@ -53,23 +57,53 @@ const meteorologyMissions: Mission[] = [
         description: "Click on your LIDAR module to make some classifications",
         icon: CloudHail,
         color: 'text-blue-300',
+        requiredItem: 3105,
+    },
+];
+
+const globalMissions: Mission[] = [
+    {
+        id: 200000015,
+        name: "Research a new module",
+        description: 'Click on your structure and then the "Research" tab to unlock new projects and data sources to contribute to!',
+        icon: TestTube2,
+        color: 'text-purple-300',
+    },
+    {
+        id: 200000013,
+        name: "Collect some fuel",
+        description: "Click on the mining tab to visit some mineral deposits your probes have found and mine them for fuel",
+        icon: Pickaxe,
+        color: 'text-red-300',
+    },
+    {
+        id: 30000001,
+        name: "Discover a new planet",
+        description: "Create and use a telescope to discover a new planet using the Planet Hunters module",
+        icon: Telescope,
+        color: 'text-purple-300',
     },
 ];
 
 // Research station - walk the user through this. Then upload data, verify/vet (consensus), then we introduce travel. Add a "close"/swipe-down option so that the tutorial section can be hidden/minimised. Then we go through the guide for the different views....and determine the differentials from Pathway.tsx and this new list
 // As well as researching for other projects/mission modules that aren't in `mission-selector`
+// We'll also need to update this for different planets & chapters
 
 const dialogueSteps: DialogueStep[] = [
 
 ];
 
-export default function StructureMissionGuide() {
+const StructureMissionGuide = () => {
     const supabase = useSupabaseClient();
     const session = useSession();
+    const { activePlanet } = useActivePlanet();
+
     const [completedMissions, setCompletedMissions] = useState<number[]>([]);
     const [loading, setLoading] = useState(true);
     const [currentCategory, setCurrentCategory] = useState(0);
-    const [minimized, setMinimized] = useState(false);  // State to handle minimization
+    const [minimized, setMinimized] = useState(false);
+    const [ownedItems, setOwnedItems] = useState<number[]>([]);
+    const [scrollableMissions, setScrollableMissions] = useState<Mission[]>([]);
 
     const categories = [
         { missions: astronomyMissions, name: 'Astronomer' },
@@ -78,57 +112,79 @@ export default function StructureMissionGuide() {
     ];
 
     useEffect(() => {
-        async function fetchCompletedMissions() {
-            if (!session?.user?.id) return;
-
-            const { data, error } = await supabase
-                .from('missions')
-                .select('mission')
-                .eq('user', session.user.id);
-
-            if (error) {
-                console.error("Error fetching completed missions:", error);
-            } else {
-                const completedMissionIds = data.map((mission: { mission: number }) => mission.mission);
+        async function fetchInventoryAndCompletedMissions() {
+            if (!session?.user?.id || !activePlanet?.id) return;
+
+            try {
+                const { data: inventoryData, error: inventoryError } = await supabase
+                    .from('inventory')
+                    .select('item')
+                    .eq('owner', session.user.id)
+                    .eq('anomaly', activePlanet.id)
+                    .in('item', [3103, 3104, 3105, 3106]);
+
+                if (inventoryError) throw inventoryError;
+
+                const ownedItems = inventoryData.map((inv: { item: number }) => inv.item);
+                setOwnedItems(ownedItems);
+
+                const { data: missionData, error: missionError } = await supabase
+                    .from('missions')
+                    .select('mission')
+                    .eq('user', session.user.id);
+
+                if (missionError) throw missionError;
+
+                const completedMissionIds = missionData.map((mission: { mission: number }) => mission.mission);
                 setCompletedMissions(completedMissionIds);
+
+                if (ownedItems.includes(3103)) {
+                    setCurrentCategory(0); // Astronomy
+                } else if (ownedItems.includes(3104)) {
+                    setCurrentCategory(1); // Biology
+                } else if (ownedItems.includes(3105)) {
+                    setCurrentCategory(2); // Meteorology
+                } else {
+                    setCurrentCategory(Math.floor(Math.random() * categories.length)); // Random category if no specific items are owned
+                }
+            } catch (error) {
+                console.error("Error fetching inventory or missions:", error);
             }
 
             setLoading(false);
         }
 
-        fetchCompletedMissions();
-    }, [session, supabase]);
-
-    const handleNextCategory = () => {
-        setCurrentCategory((prevCategory) => (prevCategory + 1) % categories.length);
-    };
-
-    const handlePreviousCategory = () => {
-        setCurrentCategory((prevCategory) => (prevCategory - 1 + categories.length) % categories.length);
-    };
+        fetchInventoryAndCompletedMissions();
+    }, [session, activePlanet, supabase]);
 
-    const toggleMinimize = () => {
-        setMinimized(!minimized);
+    useEffect(() => {
+        const missionsToDisplay = [
+            ...categories[currentCategory].missions.slice(0, 2), // Get only the first 2 missions
+            ...globalMissions.slice(0, 2), // Add 2 global missions
+        ];
+        setScrollableMissions(missionsToDisplay);
+    }, [currentCategory]);
+
+    const userHasRequiredItem = (requiredItem?: number) => {
+        return requiredItem ? ownedItems.includes(requiredItem) : false;
     };
 
     return (
         <div className="p-4 max-w-6xl mx-auto font-mono">
             {minimized ? (
-                <Button onClick={toggleMinimize} className="bg-blue-600 text-white flex items-center space-x-2">
+                <Button onClick={() => setMinimized(false)} className="bg-blue-600 text-white flex items-center space-x-2">
                     <HelpCircle className="w-5 h-5" />
                     <span>Help</span>
                 </Button>
             ) : (
                 <Card className="overflow-hidden relative bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 border-2 border-gray-700">
                     <CardContent className="p-4">
                         <div className="flex justify-between mb-4 items-center">
-                            {/* Mission Group Header */}
                             <h2 className="text-xl font-semibold text-gray-300">
-                                Mission guide for {categories[currentCategory].name} pathway
+                                Mission Guide for {categories[currentCategory].name} Pathway
                             </h2>
-
                             <Button
-                                onClick={toggleMinimize}
+                                onClick={() => setMinimized(true)}
                                 className="bg-gray-700 text-gray-300 hover:bg-gray-600 px-2 py-1 text-sm"
                             >
                                 Minimize
@@ -137,50 +193,60 @@ export default function StructureMissionGuide() {
 
                         <div className="flex justify-between mb-4">
                             <Button
-                                onClick={handlePreviousCategory}
-                                className="bg-gray-700 text-gray-300 hover:bg-gray-600 px-2 py-1 text-sm"
+                                onClick={() => setCurrentCategory((currentCategory - 1 + categories.length) % categories.length)}
+                                className="bg-gray-700 text-gray-300 hover:bg-gray-600 p-2"
+                                disabled={categories.length <= 1}
                             >
-                                <ChevronLeft className="h-4 w-4" />
+                                <ChevronLeft />
                             </Button>
                             <Button
-                                onClick={handleNextCategory}
-                                className="bg-blue-600 text-white hover:bg-blue-500 px-2 py-1 text-sm"
+                                onClick={() => setCurrentCategory((currentCategory + 1) % categories.length)}
+                                className="bg-gray-700 text-gray-300 hover:bg-gray-600 p-2"
+                                disabled={categories.length <= 1}
                             >
-                                <ChevronRight className="h-4 w-4" />
+                                <ChevronRight />
                             </Button>
                         </div>
 
-                        <div className="grid grid-cols-1 gap-2">
-                            {loading ? (
-                                <p>Loading missions...</p>
-                            ) : (
-                                categories[currentCategory].missions.map((mission) => (
-                                    <Card
-                                        key={mission.id}
-                                        className={`cursor-pointer hover:shadow-lg transition-all duration-300 ${
-                                            completedMissions.includes(mission.id) ? 'bg-gray-700' : 'bg-gray-800'
-                                        } border border-gray-600 relative overflow-hidden`}
-                                    >
-                                        <CardContent className="p-2 flex items-center">
-                                            <mission.icon className={`w-6 h-6 mr-2 ${mission.color}`} />
-                                            <div>
-                                                <h3 className={`text-xs font-semibold ${mission.color}`}>{mission.name}</h3>
-                                                {completedMissions.includes(mission.id) ? (
-                                                    <p className="text-xs text-gray-400 line-through decoration-dotted decoration-green-400">
-                                                        {mission.description}
-                                                    </p>
-                                                ) : (
-                                                    <p className="text-xs text-gray-400">{mission.description}</p>
-                                                )}
-                                            </div>
-                                        </CardContent>
-                                    </Card>
-                                ))
-                            )}
+                        <div className="mb-4 p-4 border border-gray-600 rounded bg-gray-800 text-gray-200">
+                            <p className="mt-1">
+                                Welcome! Build structures like the Telescope to complete missions and expand your research.
+                                Click the 'Guide' button to view your missions.
+                            </p>
+                        </div>
+
+                        {/* Scrollable Missions Section */}
+                        <div className="overflow-y-auto max-h-40 relative">
+                            <div className="grid grid-cols-1 gap-4">
+                                {scrollableMissions.map((mission) => (
+                                    <div key={mission.id} className="flex">
+                                        <Card
+                                            className={`cursor-pointer hover:shadow-lg transition-all duration-300 ${
+                                                completedMissions.includes(mission.id) ? 'bg-gray-700' : 'bg-gray-800'
+                                            } border border-gray-600 relative overflow-hidden w-full`}
+                                        >
+                                            <CardContent className="p-2 flex items-center">
+                                                <mission.icon className={`w-6 h-6 mr-2 ${mission.color}`} />
+                                                <div>
+                                                    <h3 className={`font-semibold text-gray-300 ${completedMissions.includes(mission.id) ? 'line-through text-green-400' : ''}`}>
+                                                        {mission.name}
+                                                    </h3>
+                                                    <p className="text-gray-400">{mission.description}</p>
+                                                    {userHasRequiredItem(mission.requiredItem) && (
+                                                        <span className="text-green-300 text-sm">Ready to complete!</span>
+                                                    )}
+                                                </div>
+                                            </CardContent>
+                                        </Card>
+                                    </div>
+                                ))}
+                            </div>
                         </div>
                     </CardContent>
                 </Card>
             )}
         </div>
     );
-};
+};
+
+export default StructureMissionGuide;