add functionality for remove item from backpack

Author: Karine91

index.html

@@ -728,7 +728,7 @@ <h1>BACKPACK</h1>
 
                 <div class="footer">
                     <button id="item-use-btn">Use (R)</button>
-                    <button id="item-drop-btn">Drop (X)</button>
+                    <button id="item-drop-btn">Remove (X)</button>
                     <button id="inventory-close-btn">Close (I)</button>
                 </div>
             </div>

src/backpack.js

@@ -119,7 +119,19 @@ export class Backpack {
         this.decreaseItemQty(selectedItem);
     }
 
-    dropItem() {}
+    dropItem() {
+        if (!selectedItem) return;
+        const ind = this.inventory.findIndex(
+            (item) => item.itemName === selectedItem
+        );
+
+        if (ind != -1) {
+            this.inventory.splice(ind, 1);
+            selectedItem = null;
+            this.saveInventoryState();
+            this.render();
+        }
+    }
 
     render() {
         const backpack = document.getElementById('backpack-content');
@@ -170,6 +182,8 @@ export class Backpack {
             }
         } else if (e.key == 'r') {
             this.useItem();
+        } else if (e.key == 'x') {
+            this.dropItem()
         }
     }