Skip to content

Commit 83d635a

Browse files
GizmotronnGizmotronn
committed
🎥🥗 ↝ [SSG-61 SSG-54 SSC-34 SSM-40]: Adding some customisation options
1 parent 811ae86 commit 83d635a

File tree

10 files changed

+891
-100
lines changed

10 files changed

+891
-100
lines changed

‎app/scenes/earth/page.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import { PlanetarySystem } from "@/components/(scenes)/planetScene/orbitals/syst
99
import StructuresOnPlanet, { AtmosphereStructuresOnPlanet, OrbitalStructuresOnPlanet } from "@/components/Structures/Structures";
1010
import AllAutomatonsOnActivePlanet from "@/components/Structures/Auto/AllAutomatons";
1111
import InitialiseChapterOneUser from "@/components/(scenes)/chapters/one/InitialiseUser";
12+
import InventoryPage from "@/components/Inventory/Grid/Grid";
13+
import EnhancedWeatherEventsComponent from "@/components/enhanced-weather-events";
14+
import TopographicMap from "@/components/topographic-map";
1215

1316
const EarthView: React.FC = () => {
1417
return (
@@ -29,21 +32,25 @@ export default EarthView;
2932
const EarthStructures: React.FC = () => {
3033
return (
3134
<EarthViewLayout>
32-
<div className="w-full">
35+
<EnhancedWeatherEventsComponent />
36+
{/* <div className="w-full">
3337
<div className="py-3">
3438
<div className="py-1">
3539
<PlanetarySystem />
3640
</div>
3741
<center><OrbitalStructuresOnPlanet /></center>
3842
</div>
39-
</div>
43+
</div> */}
44+
{/* <TopographicMap /> */}
4045
<div className="w-full">
4146
<div className="py-2">
4247
<center><AtmosphereStructuresOnPlanet /></center>
4348
</div>
4449
</div>
4550
<div className="w-full">
46-
<center><StructuresOnPlanet /></center>
51+
<center>
52+
{/* <InventoryPage /> */}
53+
<StructuresOnPlanet /></center>
4754
</div>
4855
<div className="relative flex-1">
4956
<AllAutomatonsOnActivePlanet />

‎components/Inventory/Grid/Grid.tsx

+61-18
Original file line numberDiff line numberDiff line change
@@ -11,39 +11,47 @@ import { useActivePlanet } from "@/context/ActivePlanet";
1111
export default function InventoryPage() {
1212
const supabase = useSupabaseClient();
1313
const session = useSession();
14-
1514
const { activePlanet } = useActivePlanet();
1615

1716
const [inventoryItems, setInventoryItems] = useState<InventoryItem[]>([]);
1817
const [userInventory, setUserInventory] = useState<UserInventoryItem[]>([]);
1918
const [loading, setLoading] = useState<boolean>(true);
19+
const [isOverlayOpen, setOverlayOpen] = useState<boolean>(false); // State to track overlay visibility
2020

21-
const GRID_SIZE = 4;
21+
const GRID_SIZE = 8; // Adjusting the size for horizontal scroll
2222

2323
useEffect(() => {
2424
fetchData();
25-
}, []);
25+
}, [activePlanet, supabase]);
2626

2727
async function fetchData() {
28+
if (!activePlanet) {
29+
console.log("No active planet");
30+
return;
31+
}
32+
2833
try {
2934
const [itemsRes, { data: { session } }] = await Promise.all([
3035
fetch("/api/gameplay/inventory"),
31-
supabase.auth.getSession()
36+
supabase.auth.getSession(),
3237
]);
3338

3439
let items: InventoryItem[] = await itemsRes.json();
35-
items = items.filter(item =>
36-
(item.ItemCategory === "Structure" || item.ItemCategory === "CommunityStation") &&
37-
item.locationType === "Surface"
40+
items = items.filter(
41+
(item) =>
42+
(item.ItemCategory === "Structure" ||
43+
item.ItemCategory === "CommunityStation") &&
44+
item.locationType === "Surface"
3845
);
3946

4047
setInventoryItems(items);
48+
console.log(inventoryItems);
4149

4250
if (session?.user) {
4351
const { data: userItems } = await supabase
4452
.from("inventory")
4553
.select("*")
46-
.eq("anomaly", activePlanet?.id)
54+
.eq("anomaly", activePlanet.id)
4755
.eq("owner", session.user.id);
4856

4957
setUserInventory(userItems || []);
@@ -59,12 +67,12 @@ export default function InventoryPage() {
5967
const { data: { session } } = await supabase.auth.getSession();
6068
if (!session?.user) return;
6169

62-
const inventoryItem = userInventory.find(item => item.id === itemId);
70+
const inventoryItem = userInventory.find((item) => item.id === itemId);
6371
if (!inventoryItem) return;
6472

6573
const newConfig = {
6674
...inventoryItem.configuration,
67-
slot: slotIndex
75+
slot: slotIndex,
6876
};
6977

7078
const { error } = await supabase
@@ -75,8 +83,8 @@ export default function InventoryPage() {
7583
if (error) {
7684
toast.error("Failed to update item position");
7785
} else {
78-
setUserInventory(prev =>
79-
prev.map(item =>
86+
setUserInventory((prev) =>
87+
prev.map((item) =>
8088
item.id === itemId
8189
? { ...item, configuration: newConfig }
8290
: item
@@ -89,14 +97,16 @@ export default function InventoryPage() {
8997
if (!result.destination) return;
9098

9199
const sourceId = result.draggableId;
92-
const destinationIndex = parseInt(result.destination.droppableId.split("-")[1]);
100+
const destinationIndex = parseInt(
101+
result.destination.droppableId.split("-")[1]
102+
);
93103

94104
updateItemConfiguration(parseInt(sourceId), destinationIndex);
95105
};
96106

97107
return (
98108
<DragDropContext onDragEnd={onDragEnd}>
99-
<div className="p-4 max-w-7xl mx-auto">
109+
<div className="p-4 max-w-full mx-auto overflow-x-auto">
100110
<div className="relative">
101111
<div className="sci-fi-shape sci-fi-shape-1" />
102112
<div className="sci-fi-shape sci-fi-shape-2" />
@@ -113,10 +123,42 @@ export default function InventoryPage() {
113123
<div className="sci-fi-wire sci-fi-wire-2" />
114124
<div className="sci-fi-signal sci-fi-signal-2" />
115125

116-
<InventoryList
117-
userInventory={userInventory}
118-
inventoryItems={inventoryItems}
119-
/>
126+
{/* Open Overlay Button directly below the main grid */}
127+
<button
128+
onClick={() => setOverlayOpen(!isOverlayOpen)} // Toggle overlay
129+
className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg"
130+
>
131+
{isOverlayOpen ? "Close Inventory Items" : "Open Inventory Items"}
132+
</button>
133+
134+
{/* Sliding Inventory Overlay */}
135+
<div
136+
className={`fixed bottom-0 left-0 right-0 z-50 transition-transform duration-500 ${
137+
isOverlayOpen ? "translate-y-0" : "translate-y-full"
138+
}`}
139+
style={{ height: "40vh" }} // Occupy 40% of the screen height
140+
>
141+
{/* No border or background, just the items */}
142+
<div className="p-4 h-full overflow-y-auto">
143+
<div className="flex justify-between items-center">
144+
<h2 className="text-2xl font-bold mb-4 text-white">Inventory Items</h2>
145+
146+
{/* Close Overlay Button */}
147+
<button
148+
onClick={() => setOverlayOpen(false)}
149+
className="bg-red-500 text-white px-3 py-1 rounded-lg"
150+
>
151+
Close
152+
</button>
153+
</div>
154+
155+
{/* Inventory Items List */}
156+
<InventoryList
157+
userInventory={userInventory}
158+
inventoryItems={inventoryItems}
159+
/>
160+
</div>
161+
</div>
120162
</div>
121163
</div>
122164
</DragDropContext>
@@ -135,6 +177,7 @@ interface InventoryItem {
135177
locationType?: string;
136178
recipe?: { [key: string]: number };
137179
gif?: string;
180+
configuration?: { slot?: number } | null;
138181
};
139182

140183
interface UserInventoryItem {

‎components/Inventory/Grid/ItemGrid.tsx

+64-52
Original file line numberDiff line numberDiff line change
@@ -11,61 +11,73 @@ interface InventoryGridProps {
1111
inventoryItems: InventoryItem[];
1212
};
1313

14-
export function InventoryGrid({ loading, gridSize, userInventory, inventoryItems }: InventoryGridProps) {
15-
const totalSlots = gridSize * gridSize;
16-
17-
if (loading) {
18-
return (
19-
<div className={`grid grid-cols-${gridSize} gap-4 mb-8`}>
20-
{Array(totalSlots).fill(0).map((_, i) => (
21-
<Skeleton key={i} className="w-full aspect-square rounded-lg" />
22-
))}
23-
</div>
24-
);
25-
}
26-
27-
return (
28-
<div className={`grid grid-cols-${gridSize} gap-4 mb-8`}>
29-
{Array(totalSlots).fill(0).map((_, index) => {
30-
const itemInSlot = userInventory.find(
31-
item => item.configuration?.slot === index
32-
);
33-
const itemDefinition = itemInSlot
34-
? inventoryItems.find(def => def.id === itemInSlot.item)
35-
: null;
14+
export function InventoryGrid({
15+
loading,
16+
gridSize,
17+
userInventory,
18+
inventoryItems,
19+
}: InventoryGridProps) {
20+
const totalSlots = gridSize * 2; // Ensure 2 rows for horizontal scrolling
3621

22+
if (loading) {
3723
return (
38-
<Droppable key={index} droppableId={`slot-${index}`}>
39-
{(provided) => (
40-
<div
41-
ref={provided.innerRef}
42-
{...provided.droppableProps}
43-
className="aspect-square border-2 border-dashed border-primary/50 rounded-lg p-2 flex items-center justify-center bg-card/50 backdrop-blur-sm"
44-
>
45-
{itemInSlot && itemDefinition ? (
46-
<div className="w-full h-full relative group">
47-
<Image
48-
src={itemDefinition.icon_url}
49-
alt={itemDefinition.name}
50-
fill
51-
className="object-contain p-2 transition-transform group-hover:scale-105"
52-
/>
53-
<div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2">
54-
<span className="text-sm text-foreground font-medium truncate">
55-
{itemDefinition.name}
56-
</span>
57-
</div>
58-
</div>
59-
) : null}
60-
{provided.placeholder}
61-
</div>
62-
)}
63-
</Droppable>
24+
<div className={`grid grid-rows-2 grid-flow-col gap-4 mb-8 overflow-x-auto`}>
25+
{Array(totalSlots)
26+
.fill(0)
27+
.map((_, i) => (
28+
<Skeleton
29+
key={i}
30+
className="w-24 h-24 aspect-square rounded-lg" // Adjusting size for smaller cells
31+
/>
32+
))}
33+
</div>
6434
);
65-
})}
66-
</div>
67-
);
68-
};
35+
}
36+
37+
return (
38+
<div className={`grid grid-rows-2 grid-flow-col gap-4 mb-8 w-full overflow-x-auto`}>
39+
{Array(totalSlots)
40+
.fill(0)
41+
.map((_, index) => {
42+
const itemInSlot = userInventory.find(
43+
(item) => item.configuration?.slot === index
44+
);
45+
const itemDefinition = itemInSlot
46+
? inventoryItems.find((def) => def.id === itemInSlot.item)
47+
: null;
48+
49+
return (
50+
<Droppable key={index} droppableId={`slot-${index}`}>
51+
{(provided) => (
52+
<div
53+
ref={provided.innerRef}
54+
{...provided.droppableProps}
55+
className="aspect-square border-2 border-dashed border-primary/50 rounded-lg p-2 flex items-center justify-center bg-transparent hover:bg-card/50 w-24 h-24"
56+
>
57+
{itemInSlot && itemDefinition ? (
58+
<div className="w-full h-full relative group">
59+
<Image
60+
src={itemDefinition.icon_url}
61+
alt={itemDefinition.name}
62+
fill
63+
className="object-contain p-2 transition-transform group-hover:scale-105"
64+
/>
65+
<div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2">
66+
<span className="text-sm text-foreground font-medium truncate">
67+
{itemDefinition.name}
68+
</span>
69+
</div>
70+
</div>
71+
) : null}
72+
{provided.placeholder}
73+
</div>
74+
)}
75+
</Droppable>
76+
);
77+
})}
78+
</div>
79+
);
80+
}
6981

7082
interface InventoryItem {
7183
id: number;

‎components/Inventory/Grid/ItemList.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,15 @@ interface InventoryListProps {
1111
inventoryItems: InventoryItem[];
1212
}
1313

14-
export function InventoryList({ userInventory, inventoryItems }: InventoryListProps) {
14+
export function InventoryList({
15+
userInventory,
16+
inventoryItems,
17+
}: InventoryListProps) {
1518
return (
1619
<Card className="p-4 bg-card/90 backdrop-blur-sm border-primary/20">
17-
<h2 className="text-lg font-semibold mb-4 text-foreground">Inventory Items</h2>
20+
<h2 className="text-lg font-semibold mb-4 text-foreground">
21+
Inventory Items
22+
</h2>
1823
<ScrollArea className="h-[300px]">
1924
<Droppable droppableId="inventoryList" direction="vertical">
2025
{(provided) => (
@@ -25,7 +30,7 @@ export function InventoryList({ userInventory, inventoryItems }: InventoryListPr
2530
>
2631
{userInventory.map((item, index) => {
2732
const itemDefinition = inventoryItems.find(
28-
def => def.id === item.item
33+
(def) => def.id === item.item
2934
);
3035
if (!itemDefinition) return null;
3136

@@ -40,7 +45,7 @@ export function InventoryList({ userInventory, inventoryItems }: InventoryListPr
4045
ref={provided.innerRef}
4146
{...provided.draggableProps}
4247
{...provided.dragHandleProps}
43-
className="border p-2 rounded-md shadow-sm bg-secondary/80"
48+
className="border p-2 rounded-md shadow-sm bg-transparent hover:bg-secondary/80"
4449
>
4550
<Image
4651
src={itemDefinition.icon_url}

‎components/Structures/Structures.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { StructuresConfig } from "@/constants/Structures/Properties";
99

1010
import "../../styles/Anims/StarterStructureAnimations.css";
1111

12-
interface StructuresOnPlanetProps {
12+
interface StructuresOnPlanetProps {
1313
onStructuresFetch: (
1414
orbitalStructures: InventoryStructureItem[],
1515
atmosphereStructures: InventoryStructureItem[],

0 commit comments

Comments
 (0)