Skip to content

Commit

Permalink
📯🪑 ↝ [SSG-70 SSG-71 SSG-72 SSP-33]: Bridging f.e. mining scene w/ old…
Browse files Browse the repository at this point in the history
…er functionality
  • Loading branch information
Gizmotronn committed Nov 21, 2024
1 parent 8c9db3d commit c3ee183
Show file tree
Hide file tree
Showing 11 changed files with 626 additions and 84 deletions.
12 changes: 7 additions & 5 deletions app/tests/page.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
"use client";

import React, { useEffect, useRef, useMemo, useState } from "react";
import React from "react";
import StarnetLayout from "@/components/Layout/Starnet";
import { MiningComponentComponent } from "@/components/mining-component";
import { MiningComponent } from "@/components/Structures/Mining/Mining";
// import { TopographicMap } from "@/components/topographic-map";

export default function TestPage() {
return (
<StarnetLayout>
// <StarnetLayout>
<>
<div style={{ width: "100vw", height: "100vh" }}>
</div>
<MiningComponentComponent />
{/* <MiningComponent /> */}
</>
</StarnetLayout>
// {/* </StarnetLayout> */}
);
};

Expand Down
133 changes: 104 additions & 29 deletions components/Inventory.tsx
Original file line number Diff line number Diff line change
@@ -1,50 +1,125 @@
import { useState } from 'react'
import { Diamond, Zap, Gem, Rocket, Crown } from 'lucide-react'
'use client';

import { useState, useEffect } from 'react';
import { Diamond, Zap, Battery, Magnet, Crown, Gem } from 'lucide-react';
import { useSupabaseClient, useSession } from '@supabase/auth-helpers-react';

type InventoryItem = {
id: string
name: string
amount: number
}
id: string;
name: string;
amount: number;
};

const getMineralColor = (name: string) => {
switch (name) {
case 'Iron':
return 'bg-red-100';
case 'Copper':
return 'bg-orange-100';
case 'Coal':
return 'bg-gray-100';
case 'Nickel':
return 'bg-green-100';
case 'Fuel':
return 'bg-cyan-100';
default:
return 'bg-blue-100';
}
};

export function Inventory() {
const supabase = useSupabaseClient();
const session = useSession();

const [inventory, setInventory] = useState<InventoryItem[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [hoveredItem, setHoveredItem] = useState<string | null>(null);

const itemNames: Record<number, string> = {
11: 'Coal',
13: 'Silicon',
15: 'Iron',
16: 'Nickel',
18: 'Fuel',
19: 'Copper',
};

type Props = {
inventory: InventoryItem[]
}
useEffect(() => {
const fetchInventory = async () => {
if (!session?.user.id) {
console.error('Session or user ID is missing');
setLoading(false);
return;
}

export function Inventory({ inventory = [] }: Props) {
const [hoveredItem, setHoveredItem] = useState<string | null>(null)
try {
const { data, error } = await supabase
.from('inventory')
.select('id, item, quantity')
.eq('owner', session.user.id)
.in('item', Object.keys(itemNames).map(Number));

if (error) {
throw error;
}

const formattedInventory = Object.entries(itemNames).map(([key, name]) => {
const foundItem = data?.find((item) => item.item === Number(key));
return {
id: foundItem ? foundItem.id.toString() : key,
name: name,
amount: foundItem ? foundItem.quantity : 0,
};
});

setInventory(formattedInventory);
} catch (error) {
console.error('Error fetching inventory:', error);
} finally {
setLoading(false);
}
};

fetchInventory();
}, [session, supabase]);

const getIcon = (name: string) => {
switch (name) {
case 'Iron':
return <Diamond className="text-[#FFE3BA]" />
return <Diamond className="text-[#FFE3BA]" />;
case 'Copper':
return <Zap className="text-[#FFE3BA]" />
case 'Gold':
return <Gem className="text-[#FFE3BA]" />
case 'Titanium':
return <Rocket className="text-[#FFE3BA]" />
case 'Platinum':
return <Crown className="text-[#FFE3BA]" />
return <Zap className="text-[#5FCBC3]" />;
case 'Coal':
return <Magnet className="text-[#FFD700]" />;
case 'Silicon':
return <Gem className="text-[#B0C4DE]" />;
case 'Fuel':
return <Battery className="text-[#020403]" />;
case 'Nickel':
return <Crown className="text-[#E5E4E2]" />;
default:
return <Diamond className="text-[#FFE3BA]" />
return <Diamond className="text-[#FFE3BA]" />;
}
};

if (loading) {
return <div>Loading...</div>;
}

return (
<div className="space-y-2">
<h2 className="text-xl font-bold text-[#2C4F64]">Inventory</h2>
<div className="flex space-x-4">
{inventory.map(item => (
<div
key={item.id}
className="relative flex items-center space-x-2 bg-gray-100 p-2 rounded-lg"
onMouseEnter={() => setHoveredItem(item.id)}
<div className="flex flex-wrap gap-4">
{inventory.map((item) => (
<div
key={item.id}
className={`relative flex items-center space-x-2 p-2 rounded-lg ${getMineralColor(item.name)}`}
onMouseEnter={() => setHoveredItem(item.name)} // Use name for hover
onMouseLeave={() => setHoveredItem(null)}
>
{getIcon(item.name)}
<span className="font-bold">{item.amount}</span>
{hoveredItem === item.id && (
{hoveredItem === item.name && ( // Compare against name
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 bg-[#2C4F64] text-white px-2 py-1 rounded text-sm whitespace-nowrap">
{item.name}
</div>
Expand All @@ -53,5 +128,5 @@ export function Inventory({ inventory = [] }: Props) {
))}
</div>
</div>
)
}
);
};
2 changes: 1 addition & 1 deletion components/Structures/Mining/Deposits.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function MineralDepositList({ deposits, onSelect, selectedDeposit }: Prop
setInventoryItems(data);
} catch (error) {
console.error("Error fetching inventory items:", error);
}
};
};

fetchInventoryItems();
Expand Down
9 changes: 3 additions & 6 deletions components/Structures/Mining/Inventory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,12 @@ type InventoryItem = {
export function Inventory() {
const supabase = useSupabaseClient();
const session = useSession();

const { activePlanet } = useActivePlanet();

const [inventory, setInventory] = useState<InventoryItem[]>([]);

const [hoveredItem, setHoveredItem] = useState<string | null>(null);
const [loading, setLoading] = useState<boolean>(true);

// Mapping item IDs to their names
const itemNames: Record<number, string> = {
11: 'Iron',
19: 'Fuel',
Expand All @@ -30,12 +28,11 @@ export function Inventory() {

useEffect(() => {
const fetchInventory = async () => {
// Check if session and user ID are available
if (!session?.user?.id) {
console.error('Session or user ID is missing');
setLoading(false);
return;
}
};

try {
const { data, error } = await supabase
Expand Down Expand Up @@ -87,7 +84,7 @@ export function Inventory() {

if (loading) {
return <div>Loading...</div>;
}
};

return (
<div className="space-y-2">
Expand Down
3 changes: 2 additions & 1 deletion components/Structures/Mining/Mining.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ type Rover = {

export function MiningComponent() {
const supabase = useSupabaseClient()
const session = useSession()
const session = useSession();

const { activePlanet } = useActivePlanet()

const [mineralDeposits, setMineralDeposits] = useState<MineralDeposit[]>([])
Expand Down
104 changes: 104 additions & 0 deletions components/mineral-deposit-list.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
'use client';

import { Button } from "@/components/ui/button"
import { Magnet, Zap, Battery, Diamond } from 'lucide-react'
import React, { useEffect, useState } from "react";

export type MineralDeposit = {
id: string;
name: string;
amount: number;
mineral: string;
icon_url: string;
level: number;
uses: string[];
position: { x: number; y: number };
};

export interface InventoryItem {
id: number;
name: string;
description: string;
cost?: number;
icon_url: string;
ItemCategory: string;
};

type Props = {
deposits: MineralDeposit[]
onSelect: (deposit: MineralDeposit) => void
selectedDeposit: MineralDeposit | null
};

const getMineralIcon = (mineralName: string) => {
switch (mineralName) {
case 'Iron':
return <Magnet className="text-red-500" />
case 'Copper':
return <Zap className="text-orange-500" />
case 'Coal':
return <Battery className="text-gray-700" />
case 'Nickel':
return <Diamond className="text-green-500" />
default:
return <Diamond className="text-blue-500" />
};
};

export function MineralDepositList({ deposits = [], onSelect, selectedDeposit }: Props) {
const [inventoryItems, setInventoryItems] = useState<InventoryItem[]>([]);

useEffect(() => {
const fetchInventoryItems = async () => {
try {
const response = await fetch("/api/gameplay/inventory");
const data = await response.json();
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`);
}

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",
};
};

if (inventoryItems.length === 0) {
return <p>Loading mineral data...</p>;
}

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>
))}
</div>
);
};
Loading

0 comments on commit c3ee183

Please sign in to comment.