1 files changed, 63 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..c7ce63c
--- /dev/null
+++ b/html/rogue/js/inventory-ui.js
@@ -0,0 +1,63 @@
+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 = Config.colors.UI.INVENTORY.BACKGROUND;
+        ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+        
+        // Calculate positions ensuring integer values
+        const padding = Config.ui.inventory.PADDING;
+        const width = Config.ui.inventory.WIDTH;
+        const height = Config.ui.inventory.HEIGHT;
+        const x = Math.round((state.canvas.width - width) / 2);
+        const y = Math.round((state.canvas.height - height) / 2);
+        
+        // Draw window background
+        ctx.fillStyle = Config.colors.UI.INVENTORY.WINDOW;
+        ctx.fillRect(x, y, width, height);
+        
+        // Set text rendering properties for sharper text
+        ctx.textBaseline = 'top';
+        ctx.textAlign = 'left';
+        ctx.imageSmoothingEnabled = false;
+        
+        // Draw title
+        ctx.fillStyle = Config.colors.UI.INVENTORY.TEXT;
+        ctx.font = Config.ui.inventory.TITLE_FONT;
+        const titleX = Math.round(x + padding);
+        const titleY = Math.round(y + padding);
+        ctx.fillText('Inventory', titleX, titleY);
+        
+        // Get item counts and draw items with quantities
+        const itemCounts = this.getItemCounts();
+        let index = 0;
+        
+        itemCounts.forEach((count, itemName) => {
+            const itemX = Math.round(x + padding);
+            const itemY = Math.round(y + Config.ui.inventory.ITEMS_START_OFFSET + 
+                                   (index * Config.ui.inventory.ITEM_SPACING));
+            ctx.font = Config.ui.inventory.ITEM_FONT;
+            ctx.fillText(`${itemName} x${count}`, itemX, itemY);
+            index++;
+        });
+    }
+}; 
\ No newline at end of file