fix(Inventory) item swaps into invalid equipment slot

This fixes a bug where you were able to slide invalid items into slots they weren't meant to by swapping them around in inventory first.

src/components/InventorySlot.jsx

@@ -1,6 +1,4 @@
-// src/components/InventorySlot.js
-
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useDrop } from 'react-dnd';
 import DraggableItem from './DraggableItems';
 import { swapItems, unequipItem } from '../features/player/playerSlice';
@@ -18,18 +16,29 @@ const extractTooltipData = (item) => {
   };
 };
 
-const InventorySlot = ({ item, index, dispatch }) => {
+const InventorySlot = ({ item, index, dispatch, isEquipmentSlot = false }) => {
   const isEmptySlot = !item || item.id === 'empty-slot';
   const [showTooltip, setShowTooltip] = useState(false);
   const tooltipData = extractTooltipData(item);
 
+  useEffect(() => {
+    console.log("Item updated in slot:", index, item);
+  }, [item, index]);
+
   const [{ isOver }, dropRef] = useDrop(() => ({
     accept: 'item',
     drop: (draggedItem) => {
-      if (draggedItem.equipmentSlot) {
+      console.log("Dropping item:", draggedItem);
+      if (draggedItem.equipmentSlot !== undefined && draggedItem.equipmentSlot !== null) {
+        // Dragging from equipment slot to inventory slot
+        console.log("Dispatching unequipItem:", { slot: draggedItem.equipmentSlot, targetIndex: index });
         dispatch(unequipItem({ slot: draggedItem.equipmentSlot, targetIndex: index }));
-      } else {
+      } else if (draggedItem.index !== undefined && draggedItem.index !== null) {
+        // Swapping within inventory
+        console.log("Dispatching swapItems:", { from: draggedItem.index, to: index });
         dispatch(swapItems({ from: draggedItem.index, to: index }));
+      } else {
+        console.error("Invalid drag and drop operation:", draggedItem);
       }
     },
     collect: (monitor) => ({
@@ -45,7 +54,7 @@ const InventorySlot = ({ item, index, dispatch }) => {
           onMouseEnter={() => setShowTooltip(true)}
           onMouseLeave={() => setShowTooltip(false)}
         >
-          <DraggableItem item={item} index={index} />
+          <DraggableItem key={`${item.id}-${index}`} item={item} index={index} isEquipmentSlot={isEquipmentSlot} />
           {showTooltip && <Tooltip data={tooltipData} />}
           {item.quantity > 0 && (
             <div className="quantity">{item.quantity}</div>

src/components/Tooltip.jsx

@@ -6,7 +6,7 @@ const Tooltip = ({ data }) => {
     return null;
   }
 
-  console.log('Displaying tooltip data:', data);
+  //console.log('Displaying tooltip data:', data);
   return (
     <div className="tooltip">
       <h3>Name: {data.name} | Type: {data.type} | ID: {data.id}</h3>

src/components/draggableItems.jsx

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDrag } from 'react-dnd';
 
-const DraggableItem = ({ item, index }) => {
+const DraggableItem = ({ item, index, isEquipmentSlot = false }) => {
+  useEffect(() => {
+    console.log("DraggableItem updated:", item, index);
+  }, [item, index]);
+
   const [{ isDragging }, dragRef] = useDrag(() => ({
     type: 'item',
-    item: { ...item, index },
+    item: { ...item, index, isEquipmentSlot },
     collect: (monitor) => ({
       isDragging: !!monitor.isDragging(),
     }),

src/features/player/playerReducers.js

@@ -88,23 +88,23 @@ export const playerReducers = {
   swapItems: (state, action) => {
     const { from, to } = action.payload;
     if (typeof from === 'number' && typeof to === 'number' && from < state.inventory.length && to < state.inventory.length) {
-      const fromItem = state.inventory[from];
-      const toItem = state.inventory[to];
-
-    console.log("Attempting to swap items:", fromItem, toItem);
-
-    if (fromItem && toItem) {
-      state.inventory[from] = toItem;
-      state.inventory[to] = fromItem;
-      console.log(`Swapped items in inventory from index ${from} to index ${to}`);
+      const fromItem = { ...state.inventory[from] };
+      const toItem = { ...state.inventory[to] };
+
+      console.log("Attempting to swap items:", fromItem, toItem);
+
+      if (fromItem && toItem) {
+        state.inventory[from] = toItem;
+        state.inventory[to] = fromItem;
+        console.log(`Swapped items in inventory from index ${from} to index ${to}`);
+      } else {
+        console.error("Invalid swap operation:", { fromItem, toItem });
+      }
     } else {
-      console.error("Invalid swap operation:", { fromItem, toItem });
+      console.error("Invalid swap indices:", { from, to });
     }
-  } else {
-    console.error("Invalid swap indices:", { from, to });
-  }
-  saveState(state);
-},
+    saveState(state);
+  },  
 swapEquipmentAndInventory: (state, action) => {
   const { fromInventoryIndex, toEquipmentSlot } = action.payload;
   const fromItem = state.inventory[fromInventoryIndex];