Skip to content

Commit c3ee183

Browse files
GizmotronnGizmotronn
committed
📯🪑 ↝ [SSG-70 SSG-71 SSG-72 SSP-33]: Bridging f.e. mining scene w/ older functionality
1 parent 8c9db3d commit c3ee183

11 files changed

+626
-84
lines changed

‎app/tests/page.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
"use client";
22

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

79
export default function TestPage() {
810
return (
9-
<StarnetLayout>
11+
// <StarnetLayout>
1012
<>
11-
<div style={{ width: "100vw", height: "100vh" }}>
12-
</div>
13+
<MiningComponentComponent />
14+
{/* <MiningComponent /> */}
1315
</>
14-
</StarnetLayout>
16+
// {/* </StarnetLayout> */}
1517
);
1618
};
1719

‎components/Inventory.tsx

+104-29
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,125 @@
1-
import { useState } from 'react'
2-
import { Diamond, Zap, Gem, Rocket, Crown } from 'lucide-react'
1+
'use client';
2+
3+
import { useState, useEffect } from 'react';
4+
import { Diamond, Zap, Battery, Magnet, Crown, Gem } from 'lucide-react';
5+
import { useSupabaseClient, useSession } from '@supabase/auth-helpers-react';
36

47
type InventoryItem = {
5-
id: string
6-
name: string
7-
amount: number
8-
}
8+
id: string;
9+
name: string;
10+
amount: number;
11+
};
12+
13+
const getMineralColor = (name: string) => {
14+
switch (name) {
15+
case 'Iron':
16+
return 'bg-red-100';
17+
case 'Copper':
18+
return 'bg-orange-100';
19+
case 'Coal':
20+
return 'bg-gray-100';
21+
case 'Nickel':
22+
return 'bg-green-100';
23+
case 'Fuel':
24+
return 'bg-cyan-100';
25+
default:
26+
return 'bg-blue-100';
27+
}
28+
};
29+
30+
export function Inventory() {
31+
const supabase = useSupabaseClient();
32+
const session = useSession();
33+
34+
const [inventory, setInventory] = useState<InventoryItem[]>([]);
35+
const [loading, setLoading] = useState<boolean>(true);
36+
const [hoveredItem, setHoveredItem] = useState<string | null>(null);
37+
38+
const itemNames: Record<number, string> = {
39+
11: 'Coal',
40+
13: 'Silicon',
41+
15: 'Iron',
42+
16: 'Nickel',
43+
18: 'Fuel',
44+
19: 'Copper',
45+
};
946

10-
type Props = {
11-
inventory: InventoryItem[]
12-
}
47+
useEffect(() => {
48+
const fetchInventory = async () => {
49+
if (!session?.user.id) {
50+
console.error('Session or user ID is missing');
51+
setLoading(false);
52+
return;
53+
}
1354

14-
export function Inventory({ inventory = [] }: Props) {
15-
const [hoveredItem, setHoveredItem] = useState<string | null>(null)
55+
try {
56+
const { data, error } = await supabase
57+
.from('inventory')
58+
.select('id, item, quantity')
59+
.eq('owner', session.user.id)
60+
.in('item', Object.keys(itemNames).map(Number));
61+
62+
if (error) {
63+
throw error;
64+
}
65+
66+
const formattedInventory = Object.entries(itemNames).map(([key, name]) => {
67+
const foundItem = data?.find((item) => item.item === Number(key));
68+
return {
69+
id: foundItem ? foundItem.id.toString() : key,
70+
name: name,
71+
amount: foundItem ? foundItem.quantity : 0,
72+
};
73+
});
74+
75+
setInventory(formattedInventory);
76+
} catch (error) {
77+
console.error('Error fetching inventory:', error);
78+
} finally {
79+
setLoading(false);
80+
}
81+
};
82+
83+
fetchInventory();
84+
}, [session, supabase]);
1685

1786
const getIcon = (name: string) => {
1887
switch (name) {
1988
case 'Iron':
20-
return <Diamond className="text-[#FFE3BA]" />
89+
return <Diamond className="text-[#FFE3BA]" />;
2190
case 'Copper':
22-
return <Zap className="text-[#FFE3BA]" />
23-
case 'Gold':
24-
return <Gem className="text-[#FFE3BA]" />
25-
case 'Titanium':
26-
return <Rocket className="text-[#FFE3BA]" />
27-
case 'Platinum':
28-
return <Crown className="text-[#FFE3BA]" />
91+
return <Zap className="text-[#5FCBC3]" />;
92+
case 'Coal':
93+
return <Magnet className="text-[#FFD700]" />;
94+
case 'Silicon':
95+
return <Gem className="text-[#B0C4DE]" />;
96+
case 'Fuel':
97+
return <Battery className="text-[#020403]" />;
98+
case 'Nickel':
99+
return <Crown className="text-[#E5E4E2]" />;
29100
default:
30-
return <Diamond className="text-[#FFE3BA]" />
101+
return <Diamond className="text-[#FFE3BA]" />;
31102
}
103+
};
104+
105+
if (loading) {
106+
return <div>Loading...</div>;
32107
}
33108

34109
return (
35110
<div className="space-y-2">
36111
<h2 className="text-xl font-bold text-[#2C4F64]">Inventory</h2>
37-
<div className="flex space-x-4">
38-
{inventory.map(item => (
39-
<div
40-
key={item.id}
41-
className="relative flex items-center space-x-2 bg-gray-100 p-2 rounded-lg"
42-
onMouseEnter={() => setHoveredItem(item.id)}
112+
<div className="flex flex-wrap gap-4">
113+
{inventory.map((item) => (
114+
<div
115+
key={item.id}
116+
className={`relative flex items-center space-x-2 p-2 rounded-lg ${getMineralColor(item.name)}`}
117+
onMouseEnter={() => setHoveredItem(item.name)} // Use name for hover
43118
onMouseLeave={() => setHoveredItem(null)}
44119
>
45120
{getIcon(item.name)}
46121
<span className="font-bold">{item.amount}</span>
47-
{hoveredItem === item.id && (
122+
{hoveredItem === item.name && ( // Compare against name
48123
<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">
49124
{item.name}
50125
</div>
@@ -53,5 +128,5 @@ export function Inventory({ inventory = [] }: Props) {
53128
))}
54129
</div>
55130
</div>
56-
)
57-
}
131+
);
132+
};

‎components/Structures/Mining/Deposits.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function MineralDepositList({ deposits, onSelect, selectedDeposit }: Prop
4040
setInventoryItems(data);
4141
} catch (error) {
4242
console.error("Error fetching inventory items:", error);
43-
}
43+
};
4444
};
4545

4646
fetchInventoryItems();

‎components/Structures/Mining/Inventory.tsx

+3-6
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,12 @@ type InventoryItem = {
1414
export function Inventory() {
1515
const supabase = useSupabaseClient();
1616
const session = useSession();
17-
18-
const { activePlanet } = useActivePlanet();
1917

2018
const [inventory, setInventory] = useState<InventoryItem[]>([]);
19+
2120
const [hoveredItem, setHoveredItem] = useState<string | null>(null);
2221
const [loading, setLoading] = useState<boolean>(true);
2322

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

3129
useEffect(() => {
3230
const fetchInventory = async () => {
33-
// Check if session and user ID are available
3431
if (!session?.user?.id) {
3532
console.error('Session or user ID is missing');
3633
setLoading(false);
3734
return;
38-
}
35+
};
3936

4037
try {
4138
const { data, error } = await supabase
@@ -87,7 +84,7 @@ export function Inventory() {
8784

8885
if (loading) {
8986
return <div>Loading...</div>;
90-
}
87+
};
9188

9289
return (
9390
<div className="space-y-2">

‎components/Structures/Mining/Mining.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ type Rover = {
3030

3131
export function MiningComponent() {
3232
const supabase = useSupabaseClient()
33-
const session = useSession()
33+
const session = useSession();
34+
3435
const { activePlanet } = useActivePlanet()
3536

3637
const [mineralDeposits, setMineralDeposits] = useState<MineralDeposit[]>([])

‎components/mineral-deposit-list.tsx

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
'use client';
2+
3+
import { Button } from "@/components/ui/button"
4+
import { Magnet, Zap, Battery, Diamond } from 'lucide-react'
5+
import React, { useEffect, useState } from "react";
6+
7+
export type MineralDeposit = {
8+
id: string;
9+
name: string;
10+
amount: number;
11+
mineral: string;
12+
icon_url: string;
13+
level: number;
14+
uses: string[];
15+
position: { x: number; y: number };
16+
};
17+
18+
export interface InventoryItem {
19+
id: number;
20+
name: string;
21+
description: string;
22+
cost?: number;
23+
icon_url: string;
24+
ItemCategory: string;
25+
};
26+
27+
type Props = {
28+
deposits: MineralDeposit[]
29+
onSelect: (deposit: MineralDeposit) => void
30+
selectedDeposit: MineralDeposit | null
31+
};
32+
33+
const getMineralIcon = (mineralName: string) => {
34+
switch (mineralName) {
35+
case 'Iron':
36+
return <Magnet className="text-red-500" />
37+
case 'Copper':
38+
return <Zap className="text-orange-500" />
39+
case 'Coal':
40+
return <Battery className="text-gray-700" />
41+
case 'Nickel':
42+
return <Diamond className="text-green-500" />
43+
default:
44+
return <Diamond className="text-blue-500" />
45+
};
46+
};
47+
48+
export function MineralDepositList({ deposits = [], onSelect, selectedDeposit }: Props) {
49+
const [inventoryItems, setInventoryItems] = useState<InventoryItem[]>([]);
50+
51+
useEffect(() => {
52+
const fetchInventoryItems = async () => {
53+
try {
54+
const response = await fetch("/api/gameplay/inventory");
55+
const data = await response.json();
56+
setInventoryItems(data);
57+
} catch (error) {
58+
console.error("Error fetching inventory items:", error);
59+
};
60+
};
61+
62+
fetchInventoryItems();
63+
}, []);
64+
65+
const getMineralDetails = (mineralId: string) => {
66+
const mineral = inventoryItems.find(item => item.id === parseInt(mineralId));
67+
68+
if (!mineral) {
69+
console.error(`Mineral with ID: ${mineralId} not found in inventory`);
70+
}
71+
72+
return mineral
73+
? {
74+
icon: <img src={mineral.icon_url} alt={mineral.name} className="w-6 h-6" />,
75+
name: mineral.name,
76+
}
77+
: {
78+
icon: <Diamond className="text-[#FFE3BA]" />,
79+
name: "Unknown Mineral",
80+
};
81+
};
82+
83+
if (inventoryItems.length === 0) {
84+
return <p>Loading mineral data...</p>;
85+
}
86+
87+
return (
88+
<div className="space-y-4 overflow-y-auto max-h-[60vh]">
89+
<h3 className="text-lg font-semibold mb-2">Mineral Deposits</h3>
90+
{deposits.map((deposit) => (
91+
<Button
92+
key={deposit.id}
93+
className={`w-full justify-start ${selectedDeposit?.id === deposit.id ? 'bg-blue-100' : ''}`}
94+
onClick={() => onSelect(deposit)}
95+
>
96+
<div className="flex items-center">
97+
{getMineralIcon(deposit.name)}
98+
<span className="ml-2">{deposit.name} - {deposit.amount} units</span>
99+
</div>
100+
</Button>
101+
))}
102+
</div>
103+
);
104+
};

0 commit comments

Comments
 (0)