*

1 files changed, 54 insertions, 0 deletions

diff --git a/html/rogue/js/inventory-ui.js b/html/rogue/js/inventory-ui.js
new file mode 100644
index 0000000..a5c7c3f
--- /dev/null
+++ b/html/rogue/js/inventory-ui.js
@@ -0,0 +1,54 @@
+const InventoryUI = {
+    isOpen: false,
+    
+    toggleInventory() {
+        this.isOpen = !this.isOpen;
+    },
+    
+    // Helper function to count items by type
+    getItemCounts() {
+        const counts = new Map();
+        
+        player.inventory.forEach(item => {
+            const itemName = item.type.name;
+            counts.set(itemName, (counts.get(itemName) || 0) + 1);
+        });
+        
+        return counts;
+    },
+    
+    draw(ctx) {
+        if (!this.isOpen) return;
+        
+        // Draw semi-transparent background
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+        ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+        
+        // Draw inventory window
+        const padding = 20;
+        const width = 300;
+        const height = 400;
+        const x = (state.canvas.width - width) / 2;
+        const y = (state.canvas.height - height) / 2;
+        
+        // Draw window background
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(x, y, width, height);
+        
+        // Draw title
+        ctx.fillStyle = '#000000';
+        ctx.font = '20px Arial';
+        ctx.fillText('Inventory', x + padding, y + padding + 20);
+        
+        // Get item counts and draw items with quantities
+        const itemCounts = this.getItemCounts();
+        let index = 0;
+        
+        itemCounts.forEach((count, itemName) => {
+            const itemY = y + padding + 60 + (index * 30);
+            ctx.font = '16px Arial';
+            ctx.fillText(`${itemName} x${count}`, x + padding, itemY);
+            index++;
+        });
+    }
+}; 
\ No newline at end of file