1 files changed, 23 insertions, 14 deletions
diff --git a/html/rogue/js/inventory-ui.js b/html/rogue/js/inventory-ui.js
index a5c7c3f..c7ce63c 100644
--- a/html/rogue/js/inventory-ui.js
+++ b/html/rogue/js/inventory-ui.js
@@ -21,33 +21,42 @@ const InventoryUI = {
         if (!this.isOpen) return;
         
         // Draw semi-transparent background
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+        ctx.fillStyle = Config.colors.UI.INVENTORY.BACKGROUND;
         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;
+        // 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 = '#ffffff';
+        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 = '#000000';
-        ctx.font = '20px Arial';
-        ctx.fillText('Inventory', x + padding, y + padding + 20);
+        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 itemY = y + padding + 60 + (index * 30);
-            ctx.font = '16px Arial';
-            ctx.fillText(`${itemName} x${count}`, x + padding, itemY);
+            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++;
         });
     }