1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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++;
});
}
};
|