📅📼 ↝ [SSG-76 SSG-70 SSG-77]: First community expedition - just missin…

…g missions/achievements
Signal-K · Nov 28, 2024 · 702f3ef · 702f3ef
1 parent d8e540f
commit 702f3ef
Show file tree

Hide file tree

Showing 5 changed files with 209 additions and 118 deletions.
diff --git a/app/scenes/mars/page.tsx b/app/scenes/mars/page.tsx
@@ -4,12 +4,14 @@ import React, { useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 
-import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
+import { EarthActionSceneLayout, EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
 import InitialisePlanet from "@/components/(scenes)/planetScene/initialisePlanet";
 import StructuresOnPlanet, { AtmosphereStructuresOnPlanet, OrbitalStructuresOnPlanet } from "@/components/Structures/Structures";
 import { InventoryStructureItem } from "@/types/Items";
 import { PlanetarySystem } from "@/components/(scenes)/planetScene/orbitals/system";
 import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomatons";
+import { MiningComponentComponent } from "@/components/mining-component";
+import StructureMissionGuide from "@/components/Layout/Guide";
 
 const MarsView: React.FC = () => {
     const supabase = useSupabaseClient();
@@ -53,33 +55,37 @@ export default MarsView;
 
 const MarsStructures: React.FC = () => {
     return (
-        <EarthViewLayout>
-            <div className="w-full">
-                <div className="flex flex-row space-y-4"></div>
-                <div className="py-3">
-                    <div className="py-1">
-                        <PlanetarySystem />
-                    </div>
-                    <center>
-                        <OrbitalStructuresOnPlanet />
-                    </center>
-                </div>
-            </div>
-            <div className="w-full">
-                <div className="py-2">
-                    <center>
-                        <AtmosphereStructuresOnPlanet />
-                    </center>
-                </div>
-            </div>
-            <div className="w-full">
-                <center>
-                    <StructuresOnPlanet />
-                </center>
-            </div>
-            <div className="relative flex-1">
-                <AllAutomatonsOnActivePlanet />
-            </div>
-        </EarthViewLayout>
+        <EarthActionSceneLayout>
+        <MiningComponentComponent />
+        <StructureMissionGuide />
+    </EarthActionSceneLayout>
+        // <EarthViewLayout>
+        //     <div className="w-full">
+        //         <div className="flex flex-row space-y-4"></div>
+        //         <div className="py-3">
+        //             <div className="py-1">
+        //                 <PlanetarySystem />
+        //             </div>
+        //             <center>
+        //                 <OrbitalStructuresOnPlanet />
+        //             </center>
+        //         </div>
+        //     </div>
+        //     <div className="w-full">
+        //         <div className="py-2">
+        //             <center>
+        //                 <AtmosphereStructuresOnPlanet />
+        //             </center>
+        //         </div>
+        //     </div>
+        //     <div className="w-full">
+        //         <center>
+        //             <StructuresOnPlanet />
+        //         </center>
+        //     </div>
+        //     <div className="relative flex-1">
+        //         <AllAutomatonsOnActivePlanet />
+        //     </div>
+        // </EarthViewLayout>
     );
 };
diff --git a/components/(scenes)/travel/BoardingPassCard.tsx b/components/(scenes)/travel/BoardingPassCard.tsx
@@ -1,7 +1,19 @@
 import React from 'react';
-import { BoardingPass } from "@/types/Travel";
 import Image from 'next/image';
 
+// Define the BoardingPass interface
+interface BoardingPass {
+  userName: string;
+  frequentFlyerNumber: string;
+  frequentFlyerStatus: string;
+  departurePlanet: string;
+  departureTemperature: number;
+  destinationPlanet: string;
+  destinationTemperature: number;
+  rocketType: string;
+  departureTime: string; // ISO 8601 string
+}
+
 interface BoardingPassCardProps {
   boardingPass: BoardingPass;
 }
@@ -19,10 +31,19 @@ const BoardingPassCard: React.FC<BoardingPassCardProps> = ({ boardingPass }) =>
         </div>
         <div>
           <h3 className="text-xl font-semibold mb-2 text-[#B9E678]">Flight Information</h3>
-          <p><span className="font-semibold">From:</span> {boardingPass.departurePlanet} ({boardingPass.departureTemperature}°C)</p>
-          <p><span className="font-semibold">To:</span> {boardingPass.destinationPlanet} ({boardingPass.destinationTemperature}°C)</p>
+          <p>
+            <span className="font-semibold">From:</span> {boardingPass.departurePlanet} 
+            ({boardingPass.departureTemperature}°C)
+          </p>
+          <p>
+            <span className="font-semibold">To:</span> {boardingPass.destinationPlanet} 
+            ({boardingPass.destinationTemperature}°C)
+          </p>
           <p><span className="font-semibold">Rocket:</span> {boardingPass.rocketType}</p>
-          <p><span className="font-semibold">Departure:</span> {new Date(boardingPass.departureTime).toLocaleString()}</p>
+          <p>
+            <span className="font-semibold">Departure:</span> 
+            {new Date(boardingPass.departureTime).toLocaleString()}
+          </p>
         </div>
       </div>
       <div className="mt-6 flex justify-center">

diff --git a/components/(scenes)/travel/DestinationList.tsx b/components/(scenes)/travel/DestinationList.tsx
@@ -1,15 +1,25 @@
 import React from 'react';
-import { Destination } from '@/types/Travel';
+
+// Define the Destination interface
+interface Destination {
+  id: string; // Unique identifier for each destination
+  name: string; // Name of the destination
+  type: 'solar' | 'exoplanet'; // Type of destination
+}
 
 interface DestinationListProps {
-  destinations: Destination[];
-  onSelect: (destination: Destination) => void;
-  selectedDestination: Destination | null;
+  destinations: Destination[]; // List of destinations
+  onSelect: (destination: Destination) => void; // Callback when a destination is selected
+  selectedDestination: Destination | null; // Currently selected destination
 }
 
-const DestinationList: React.FC<DestinationListProps> = ({ destinations, onSelect, selectedDestination }) => {
-  const solarDestinations = destinations.filter(d => d.type === 'solar');
-  const exoplanets = destinations.filter(d => d.type === 'exoplanet');
+const DestinationList: React.FC<DestinationListProps> = ({
+  destinations,
+  onSelect,
+  selectedDestination,
+}) => {
+  const solarDestinations = destinations.filter((d) => d.type === 'solar');
+  const exoplanets = destinations.filter((d) => d.type === 'exoplanet');
 
   return (
     <div className="mb-8">
@@ -18,11 +28,13 @@ const DestinationList: React.FC<DestinationListProps> = ({ destinations, onSelec
         <div>
           <h3 className="text-xl font-semibold mb-2 text-[#5FCBC3]">Solar System</h3>
           <ul className="space-y-2">
-            {solarDestinations.map(destination => (
+            {solarDestinations.map((destination) => (
               <li
                 key={destination.id}
                 className={`cursor-pointer p-2 rounded-md transition-colors ${
-                  selectedDestination?.id === destination.id ? 'bg-[#2C4F64]' : 'hover:bg-[#2C4F64]'
+                  selectedDestination?.id === destination.id
+                    ? 'bg-[#2C4F64]'
+                    : 'hover:bg-[#2C4F64]'
                 }`}
                 onClick={() => onSelect(destination)}
               >
@@ -34,11 +46,13 @@ const DestinationList: React.FC<DestinationListProps> = ({ destinations, onSelec
         <div>
           <h3 className="text-xl font-semibold mb-2 text-[#5FCBC3]">Exoplanets</h3>
           <ul className="space-y-2">
-            {exoplanets.map(destination => (
+            {exoplanets.map((destination) => (
               <li
                 key={destination.id}
                 className={`cursor-pointer p-2 rounded-md transition-colors ${
-                  selectedDestination?.id === destination.id ? 'bg-[#2C4F64]' : 'hover:bg-[#2C4F64]'
+                  selectedDestination?.id === destination.id
+                    ? 'bg-[#2C4F64]'
+                    : 'hover:bg-[#2C4F64]'
                 }`}
                 onClick={() => onSelect(destination)}
               >

diff --git a/components/(scenes)/travel/SolarSystem.tsx b/components/(scenes)/travel/SolarSystem.tsx
@@ -60,54 +60,54 @@ export default function SwitchPlanet() {
     exoplanets: Exoplanet[];
   }>({
     solarSystem: [
+      // {
+      //   id: 10,
+      //   name: "Mercury",
+      //   color: "bg-[#2C3A4A]",
+      //   stats: { gravity: "3.7 m/s²", temp: "430°C" },
+      //   anomaly: 10,
+      //   planetType: 'Arid',
+      //   initialisationMissionId: 100001,
+      //   travelTime: '30 seconds',
+      //   description: '',
+      //   image: '/assets/Planets/Mercury.png',
+      // },
+      // {
+      //   id: 20,
+      //   name: "Venus",
+      //   color: "bg-yellow-200",
+      //   stats: { gravity: "8.87 m/s²", temp: "462°C" },
+      //   anomaly: 20,
+      //   planetType: 'Arid',
+      //   initialisationMissionId: 200001,
+      //   travelTime: '30 seconds',
+      //   description: '',
+      //   image: '/assets/Planets/Venus.png',
+      // },
       {
-        id: 10,
-        name: "Mercury",
-        color: "bg-[#2C3A4A]",
-        stats: { gravity: "3.7 m/s²", temp: "430°C" },
-        anomaly: 10,
-        planetType: 'Arid',
-        initialisationMissionId: 100001,
-        travelTime: '30 seconds',
-        description: '',
-        image: '/assets/Planets/Mercury.png',
-      },
-      {
-        id: 20,
-        name: "Venus",
-        color: "bg-yellow-200",
-        stats: { gravity: "8.87 m/s²", temp: "462°C" },
-        anomaly: 20,
+        id: 40,
+        name: "Mars",
+        color: "bg-red-500",
+        stats: { gravity: "3.71 m/s²", temp: "-63°C" },
+        anomaly: 40,
         planetType: 'Arid',
-        initialisationMissionId: 200001,
+        initialisationMissionId: 400001,
         travelTime: '30 seconds',
         description: '',
-        image: '/assets/Planets/Venus.png',
+        image: '/assets/Planets/Mars.png',
       },
       {
-        id: 69,
+        id: 30, // 69
         name: "Earth",
         color: "bg-blue-500",
         stats: { gravity: "9.8 m/s²", temp: "15°C" },
-        anomaly: 69,
+        anomaly: 30,
         planetType: 'Lush',
         initialisationMissionId: 300001,
         travelTime: '30 seconds',
         description: '',
         image: '/assets/Planets/Earth.png',
       },
-      {
-        id: 40,
-        name: "Mars",
-        color: "bg-red-500",
-        stats: { gravity: "3.71 m/s²", temp: "-63°C" },
-        anomaly: 40,
-        planetType: 'Arid',
-        initialisationMissionId: 400001,
-        travelTime: '30 seconds',
-        description: '',
-        image: '/assets/Planets/Mars.png',
-      },
     ],
     exoplanets: [],
   });  
@@ -513,12 +513,20 @@ export default function SwitchPlanet() {
                 <div className="flex flex-col justify-between items-center mb-4">
                   <h3 className="text-xl font-semibold">{currentPlanet.name}</h3>
                   <p className="text-sm">{currentPlanet.description}</p>
-                  <button
+                  {/* <button
                     onClick={handleSelectMission}
                     className="bg-[#5FCBC3] hover:bg-[#4BB3A5] text-white py-2 px-4 rounded-lg mt-2"
                   >
                     Select Mission
+                  </button> */}
+                          <div className="m-1">
+                            <button
+                    onClick={handleVisitPlanet}
+                    className="bg-[#5FCBC3] hover:bg-[#4BB3A5] text-white py-2 px-4 rounded-lg mt-2"
+                  >
+                    Visit
                   </button>
+        </div>
                 </div>
 
                 <div className="flex justify-between items-center">