From 412641d9cbb4c4ba474543bb8f24729c21a495a4 Mon Sep 17 00:00:00 2001 From: Gizmotronn Date: Fri, 22 Nov 2024 00:20:57 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=AE=E2=9B=BD=EF=B8=8F=20=E2=86=9D=20[S?= =?UTF-8?q?SG-70=20SSG-71=20SSG-72=20SSP-33]:=20More=20of=20the=20same,=20?= =?UTF-8?q?prev.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/mineral-deposit-list.tsx | 99 ++++++------ components/mining-component.tsx | 64 ++++---- components/terrain-map.tsx | 35 ++-- components/topographic-map.tsx | 242 ++++++++++++---------------- 4 files changed, 213 insertions(+), 227 deletions(-) diff --git a/components/mineral-deposit-list.tsx b/components/mineral-deposit-list.tsx index c96efc23..ddd0ed67 100644 --- 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 = { + 11: 'Coal', + 13: 'Silicon', + 15: 'Iron', + 16: 'Nickel', + 18: 'Fuel', + 19: 'Copper', +}; + +const getIcon = (name: string) => { + switch (name) { case 'Iron': - return + return ; case 'Copper': - return + return ; case 'Coal': - return + return ; + case 'Silicon': + return ; + case 'Fuel': + return ; case 'Nickel': - return + return ; default: - return - }; + return ; + } }; 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: {mineral.name}, - name: mineral.name, - } - : { - icon: , - name: "Unknown Mineral", - }; + return { + icon: getIcon(mineralName), + name: mineralName, + }; }; if (inventoryItems.length === 0) { @@ -87,18 +93,21 @@ export function MineralDepositList({ deposits = [], onSelect, selectedDeposit }: return (

Mineral Deposits

- {deposits.map((deposit) => ( - - ))} + {deposits.map((deposit) => { + const { icon, name } = getMineralDetails(deposit); + return ( + + ); + })}
); }; \ No newline at end of file diff --git a/components/mining-component.tsx b/components/mining-component.tsx index 9990db08..2280dc28 100644 --- 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() {
{activeMap === '2D' ? ( ) : ( Selected Deposit: {selectedDeposit.name}

Amount: {selectedDeposit.amount} units

+ onClick={handleStartMining} + disabled={isMining} + className="w-full mt-4" +> + {isMining ? 'Mining...' : 'Start Mining'} +
) : ( ))} - {roverPosition && ( - - )} +{roverPosition && ( + + {/* Rover icon */} + +)} {selectedDeposit && (
void -} + id: string; + name: string; + description: string; + position: { x: number; y: number }; + isOpen: boolean; +}; + +type TopographicMapProps = { + deposits: MineralDeposit[]; + roverPosition: { x: number; y: number } | null; + selectedDeposit: MineralDeposit | null; + landmarks: Landmark[]; + onLandmarkClick: (id: string) => void; + onDepositSelect: (deposit: MineralDeposit) => void; +}; const getMineralIcon = (name: string) => { switch (name) { case 'Iron': - return + return ; case 'Copper': - return + return ; case 'Coal': - return + return ; case 'Nickel': - return + return ; default: - return + return ; } -} +}; const BackgroundMap = ({ deposits }: { deposits: MineralDeposit[] }) => { - const canvasRef = useRef(null) + const canvasRef = useRef(null); useEffect(() => { - const canvas = canvasRef.current - if (!canvas) return + const canvas = canvasRef.current; + if (!canvas) return; - const ctx = canvas.getContext('2d') - if (!ctx) return + const ctx = canvas.getContext('2d'); + if (!ctx) return; const drawMap = () => { - const { width, height } = canvas - - // Draw topographic map - ctx.fillStyle = '#F5F5DC' // Beige base color - ctx.fillRect(0, 0, width, height) - - // Draw simplified, spread out contour lines - ctx.strokeStyle = '#D2B48C' // Tan color for contour lines - ctx.lineWidth = 1 - for (let i = 0; i < 10; i++) { - ctx.beginPath() - const y = (i + 1) * height / 11 - ctx.moveTo(0, y) - ctx.lineTo(width, y) - ctx.stroke() - } - - // Draw deposits - deposits.forEach(deposit => { - ctx.fillStyle = getDepositColor(deposit.name) - ctx.beginPath() - ctx.arc(deposit.position.x * (width / 100), deposit.position.y * (height / 100), - Math.sqrt(deposit.amount) / 5, 0, 2 * Math.PI) - ctx.fill() - ctx.strokeStyle = '#2C4F64' - ctx.lineWidth = 2 - ctx.stroke() - }) - } + const { width, height } = canvas; + + ctx.fillStyle = '#F5F5DC'; + ctx.fillRect(0, 0, width, height); + + deposits.forEach((deposit) => { + ctx.fillStyle = '#A52A2A'; + ctx.beginPath(); + ctx.arc( + deposit.position.x * (width / 100), + deposit.position.y * (height / 100), + Math.sqrt(deposit.amount) / 5, + 0, + 2 * Math.PI + ); + ctx.fill(); + ctx.strokeStyle = '#2C4F64'; + ctx.lineWidth = 2; + ctx.stroke(); + }); + }; const resizeCanvas = () => { - canvas.width = canvas.offsetWidth - canvas.height = canvas.offsetHeight - drawMap() - } - - window.addEventListener('resize', resizeCanvas) - resizeCanvas() - - return () => window.removeEventListener('resize', resizeCanvas) - }, [deposits]) - - return -} - -const getDepositColor = (name: string) => { - switch (name) { - case 'Iron': - return '#A52A2A' // Brown - case 'Copper': - return '#B87333' // Copper - case 'Coal': - return '#36454F' // Charcoal - case 'Nickel': - return '#727472' // Nickel - default: - return '#FFE3BA' - } -} - -export function TopographicMap({ deposits = [], roverPosition, selectedDeposit, landmarks, onLandmarkClick }: Props) { + canvas.width = canvas.offsetWidth; + canvas.height = canvas.offsetHeight; + drawMap(); + }; + + window.addEventListener('resize', resizeCanvas); + resizeCanvas(); + + return () => window.removeEventListener('resize', resizeCanvas); + }, [deposits]); + + return ; +}; + +export function TopographicMap({ + deposits, + roverPosition, + selectedDeposit, + landmarks, + onDepositSelect, + onLandmarkClick, +}: TopographicMapProps) { return (
@@ -128,46 +108,30 @@ export function TopographicMap({ deposits = [], roverPosition, selectedDeposit,
onDepositSelect(deposit)} > - {getMineralIcon(deposit.name)} + {getMineralIcon(deposit.mineral)}
))} {landmarks.map((landmark) => ( - - - - - - - {landmark.name} - {landmark.description} - - - - ))} - {roverPosition && ( - - )} - {selectedDeposit && (
- )} + key={landmark.id} + className="absolute" + style={{ + left: `${landmark.position.x}%`, + top: `${landmark.position.y}%`, + transform: 'translate(-50%, -50%)', + }} + onClick={() => onLandmarkClick(landmark.id)} + > + +
+ ))}
- ) + ); } \ No newline at end of file