🏮⛽️ ↝ [SSG-70 SSG-71 SSG-72 SSP-33]: More of the same, prev.

Signal-K · Nov 21, 2024 · 412641d · 412641d
1 parent c3ee183
commit 412641d
Show file tree

Hide file tree

Showing 4 changed files with 213 additions and 227 deletions.
diff --git a/components/mineral-deposit-list.tsx b/components/mineral-deposit-list.tsx
@@ -1,18 +1,19 @@
 'use client';
 
-import { Button } from "@/components/ui/button"
-import { Magnet, Zap, Battery, Diamond } from 'lucide-react'
+import { Button } from "@/components/ui/button";
 import React, { useEffect, useState } from "react";
+import { Diamond, Zap, Battery, Magnet, Crown, Gem } from 'lucide-react';
+import { useSession } from "@supabase/auth-helpers-react";
 
 export type MineralDeposit = {
   id: string;
   name: string;
-  amount: number;
   mineral: string;
+  amount: number;
+  position: { x: number; y: number };
   icon_url: string;
   level: number;
-  uses: string[];
-  position: { x: number; y: number };
+  uses: any[]; // Adjust this according to your actual data structure
 };
 
 export interface InventoryItem {
@@ -21,28 +22,41 @@ export interface InventoryItem {
   description: string;
   cost?: number;
   icon_url: string;
-  ItemCategory: string; 
+  ItemCategory: string;
 };
 
 type Props = {
-  deposits: MineralDeposit[]
-  onSelect: (deposit: MineralDeposit) => void
-  selectedDeposit: MineralDeposit | null
+  deposits: MineralDeposit[];
+  onSelect: (deposit: MineralDeposit) => void;
+  selectedDeposit: MineralDeposit | null;
 };
 
-const getMineralIcon = (mineralName: string) => {
-  switch (mineralName) {
+const itemNames: Record<string, string> = {
+  11: 'Coal',
+  13: 'Silicon',
+  15: 'Iron',
+  16: 'Nickel',
+  18: 'Fuel',
+  19: 'Copper',
+};
+
+const getIcon = (name: string) => {
+  switch (name) {
     case 'Iron':
-      return <Magnet className="text-red-500" />
+      return <Diamond className="text-[#FFE3BA]" />;
     case 'Copper':
-      return <Zap className="text-orange-500" />
+      return <Zap className="text-[#5FCBC3]" />;
     case 'Coal':
-      return <Battery className="text-gray-700" />
+      return <Magnet className="text-[#FFD700]" />;
+    case 'Silicon':
+      return <Gem className="text-[#B0C4DE]" />;
+    case 'Fuel':
+      return <Battery className="text-[#020403]" />;
     case 'Nickel':
-      return <Diamond className="text-green-500" />
+      return <Crown className="text-[#E5E4E2]" />;
     default:
-      return <Diamond className="text-blue-500" />
-  };
+      return <Diamond className="text-[#FFE3BA]" />;
+  }
 };
 
 export function MineralDepositList({ deposits = [], onSelect, selectedDeposit }: Props) {
@@ -56,28 +70,20 @@ export function MineralDepositList({ deposits = [], onSelect, selectedDeposit }:
         setInventoryItems(data);
       } catch (error) {
         console.error("Error fetching inventory items:", error);
-      };
+      }
     };
 
     fetchInventoryItems();
   }, []);
 
-  const getMineralDetails = (mineralId: string) => {
-    const mineral = inventoryItems.find(item => item.id === parseInt(mineralId));
-
-    if (!mineral) {
-      console.error(`Mineral with ID: ${mineralId} not found in inventory`);
-    }
+  const getMineralDetails = (deposit: MineralDeposit) => {
+    // Map the mineral name using `deposit.mineral` or fallback to `deposit.name`
+    const mineralName = deposit.mineral ? itemNames[deposit.mineral] || deposit.mineral : deposit.name || "Unknown Mineral";
 
-    return mineral
-      ? {
-          icon: <img src={mineral.icon_url} alt={mineral.name} className="w-6 h-6" />,
-          name: mineral.name,
-        }
-      : {
-          icon: <Diamond className="text-[#FFE3BA]" />,
-          name: "Unknown Mineral",
-        };
+    return {
+      icon: getIcon(mineralName),
+      name: mineralName,
+    };
   };
 
   if (inventoryItems.length === 0) {
@@ -87,18 +93,21 @@ export function MineralDepositList({ deposits = [], onSelect, selectedDeposit }:
   return (
     <div className="space-y-4 overflow-y-auto max-h-[60vh]">
       <h3 className="text-lg font-semibold mb-2">Mineral Deposits</h3>
-      {deposits.map((deposit) => (
-        <Button
-          key={deposit.id}
-          className={`w-full justify-start ${selectedDeposit?.id === deposit.id ? 'bg-blue-100' : ''}`}
-          onClick={() => onSelect(deposit)}
-        >
-          <div className="flex items-center">
-            {getMineralIcon(deposit.name)}
-            <span className="ml-2">{deposit.name} - {deposit.amount} units</span>
-          </div>
-        </Button>
-      ))}
+      {deposits.map((deposit) => {
+        const { icon, name } = getMineralDetails(deposit);
+        return (
+          <Button
+            key={deposit.id}
+            className={`w-full justify-start ${selectedDeposit?.id === deposit.id ? 'bg-blue-100' : ''}`}
+            onClick={() => onSelect(deposit)}
+          >
+            <div className="flex items-center">
+              {icon}
+              <span className="ml-2">{name} - {deposit.amount} units</span>
+            </div>
+          </Button>
+        );
+      })}
     </div>
   );
 };
diff --git a/components/mining-component.tsx b/components/mining-component.tsx
@@ -115,37 +115,40 @@ export function MiningComponentComponent() {
 
   const handleStartMining = () => {
     if (selectedDeposit && rover) {
-      setIsMining(true)
-      setRoverPosition({ x: 5, y: 5 }) // Start position
-
-      const duration = 5000 // 5 seconds to reach deposit
-      const startTime = Date.now()
-
+      console.log("Starting mining:", selectedDeposit, rover); // Add this to check
+      setIsMining(true);
+      setRoverPosition({ x: 5, y: 5 }); // Start position
+
+      const duration = 5000; // 5 seconds to reach deposit
+      const startTime = Date.now();
+
       const animateRover = () => {
-        const elapsedTime = Date.now() - startTime
-        const progress = Math.min(elapsedTime / duration, 1)
-        
+        const elapsedTime = Date.now() - startTime;
+        const progress = Math.min(elapsedTime / duration, 1);
+
         setRoverPosition({
           x: 5 + (selectedDeposit.position.x - 5) * progress,
-          y: 5 + (selectedDeposit.position.y - 5) * progress
-        })
-        
+          y: 5 + (selectedDeposit.position.y - 5) * progress,
+        });
+
         if (progress < 1) {
-          requestAnimationFrame(animateRover)
+          requestAnimationFrame(animateRover);
         } else {
           // At deposit, start mining
           setTimeout(() => {
-            setRoverPosition({ x: 5, y: 5 }) // Return to base
-            setIsMining(false)
-            updateInventory(selectedDeposit.name, 50) // Add mined resources to inventory
-            setSelectedDeposit(null) // Reset selected deposit
-          }, 5000) // 5 seconds at deposit
+            setRoverPosition({ x: 5, y: 5 }); // Return to base
+            setIsMining(false);
+            updateInventory(selectedDeposit.name, 50); // Add mined resources to inventory
+            setSelectedDeposit(null); // Reset selected deposit
+          }, 5000); // 5 seconds at deposit
         }
-      }
-
-      requestAnimationFrame(animateRover)
+      };
+
+      requestAnimationFrame(animateRover);
+    } else {
+      console.error("No deposit selected or rover not available.");
     }
-  }
+  };  
 
   const updateInventory = (resourceName: string, amount: number) => {
     setInventory(prev => prev.map(item => 
@@ -179,11 +182,12 @@ export function MiningComponentComponent() {
         <div className="w-full md:w-3/4 h-1/2 md:h-full relative">
           {activeMap === '2D' ? (
             <TopographicMap 
-              deposits={mineralDeposits} 
+              deposits={mineralDeposits}
               roverPosition={roverPosition}
               selectedDeposit={selectedDeposit}
               landmarks={landmarks}
-              onLandmarkClick={handleLandmarkClick}
+              onLandmarkClick={handleLandmarkClick} 
+              onDepositSelect={handleDepositSelect}                    
             />
           ) : (
             <TerrainMap 
@@ -202,12 +206,12 @@ export function MiningComponentComponent() {
                 <h3 className="text-lg font-semibold mb-2">Selected Deposit: {selectedDeposit.name}</h3>
                 <p>Amount: {selectedDeposit.amount} units</p>
                 <Button 
-                  onClick={handleStartMining} 
-                  disabled={isMining}
-                  className="w-full mt-4"
-                >
-                  {isMining ? 'Mining...' : 'Start Mining'}
-                </Button>
+  onClick={handleStartMining} 
+  disabled={isMining}
+  className="w-full mt-4"
+>
+  {isMining ? 'Mining...' : 'Start Mining'}
+</Button>
               </div>
             ) : (
               <MineralDepositList 

diff --git a/components/terrain-map.tsx b/components/terrain-map.tsx
@@ -11,11 +11,15 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 
-type MineralDeposit = {
-  id: string
-  name: string
-  amount: number
-  position: { x: number; y: number }
+export type MineralDeposit = {
+  id: string;
+  name: string;
+  mineral: string;
+  amount: number;
+  position: { x: number; y: number };
+  icon_url: string;
+  level: number;
+  uses: any[]; // Adjust this according to your actual data structure
 };
 
 type Landmark = {
@@ -134,14 +138,19 @@ export function TerrainMap({ deposits = [], roverPosition, selectedDeposit, land
           </DialogContent>
         </Dialog>
       ))}
-      {roverPosition && (
-        <motion.div
-          className="absolute w-4 h-4 bg-[#2C4F64] rounded-full"
-          style={{ left: `${roverPosition.x}%`, top: `${roverPosition.y}%`, transform: 'translate(-50%, -50%)' }}
-          animate={{ scale: [1, 1.2, 1] }}
-          transition={{ repeat: Infinity, duration: 1 }}
-        />
-      )}
+{roverPosition && (
+  <motion.div
+    style={{
+      position: 'absolute',
+      left: `${roverPosition.x}%`,
+      top: `${roverPosition.y}%`,
+      transform: 'translate(-50%, -50%)',
+    }}
+    className="rover-icon"
+  >
+    {/* Rover icon */}
+  </motion.div>
+)}
       {selectedDeposit && (
         <div
           className="absolute w-6 h-6 border-2 border-[#5FCBC3] rounded-full"