feat: add inventory and skill tree modals, enhance pet display with update handling

2025-02-05 20:36:59 -03:00
parent a624ba1e73
commit 243c50a1a0
6 changed files with 177 additions and 10 deletions
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { Inventory, InvItemInteraction, Pet } from '../../types/Pet';
+import { putPetItemInteract } from '../../services/api/api';
+
+interface InventoryModalProps {
+  inventory: Inventory;
+  petId: string;
+  onClose: () => void;
+  onPetUpdate: (updatedPet: Pet) => void;  // Add this prop
+}
+
+export default function InventoryModal({ inventory, petId, onClose, onPetUpdate }: InventoryModalProps) {
+  const capacity = inventory.capacity; // Expected to be 20 for 4 rows x 5 cols
+  const items = inventory.items;
+  const gridSlots = Array.from({ length: capacity }, (_, i) => items[i]);
+  const [selectedItemIndex, setSelectedItemIndex] = useState<number | null>(null);
+
+  const handleItemClick = (index: number) => {
+    if (selectedItemIndex === index || gridSlots[index] === undefined) {
+        setSelectedItemIndex(null);
+    }
+    else {
+        setSelectedItemIndex(index);
+    }
+  };
+
+  const handleInteraction = async (interaction: InvItemInteraction) => {
+    if (selectedItemIndex === null || gridSlots[selectedItemIndex] === undefined) return;
+    try {
+      const updatedPet = await putPetItemInteract(petId, gridSlots[selectedItemIndex], interaction);
+      onPetUpdate(updatedPet);
+    } catch (error) {
+      console.error('Item interaction failed:', error);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+      <div className="bg-gray-800 p-6 rounded-xl max-w-2xl w-full">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-2xl font-bold">Inventory</h2>
+          <button
+            onClick={onClose}
+            className="bg-red-600 hover:bg-red-700 text-white px-2 py-1 rounded"
+          >
+            Close
+          </button>
+        </div>
+        <div className="grid grid-cols-5 grid-rows-4 gap-4">
+          {gridSlots.map((item, index) => (
+            <div
+              key={index}
+              onClick={() => handleItemClick(index)}
+              className={`border rounded p-4 flex items-center justify-center h-16
+                ${item !== undefined ? 'bg-gray-700 cursor-pointer' : 'bg-gray-800 text-gray-500'}
+                ${selectedItemIndex === index ? 'border-blue-500 animate-pulse' : 'border-gray-600'}`}
+            >
+              {item !== undefined ? <span>{item}</span> : <span className="text-gray-500">Empty</span>}
+            </div>
+          ))}
+        </div>
+        <div className="mt-4 grid grid-cols-4 gap-4">
+          <button
+            disabled={selectedItemIndex === null}
+            onClick={() => handleInteraction('USE')}
+            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded disabled:opacity-50"
+          >
+            Use
+          </button>
+          <button
+            disabled={selectedItemIndex === null}
+            onClick={() => handleInteraction('DROP')}
+            className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded disabled:opacity-50"
+          >
+            Drop
+          </button>
+          <button
+            disabled={selectedItemIndex === null}
+            onClick={() => handleInteraction('EQUIP')}
+            className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded disabled:opacity-50"
+          >
+            Equip
+          </button>
+          <button
+            disabled={selectedItemIndex === null}
+            onClick={() => handleInteraction('UNEQUIP')}
+            className="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded disabled:opacity-50"
+          >
+            Unequip
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}