const itemDictionary = { 'Tome of Fire': { iconIndex: 0, type: 'Fire Tome', stats: { power: 80, intelligence: 90, defence: 40 }, price: 500 }, 'Tome of Water': { iconIndex: 1, type: 'Water Tome', stats: { power: 60, intelligence: 80, defence: 70 }, price: 450 }, 'Tome of Earth': { iconIndex: 2, type: 'Earth Tome', stats: { power: 90, intelligence: 70, defence: 80 }, price: 550 }, 'Tome of Air': { iconIndex: 3, type: 'Air Tome', stats: { power: 50, intelligence: 75, defence: 90 }, price: 450 }, 'Tome of Light': { iconIndex: 4, type: 'Light Tome', stats: { power: 70, intelligence: 95, defence: 60 }, price: 550 }, 'Tome of Darkness': { iconIndex: 5, type: 'Dark Tome', stats: { power: 85, intelligence: 100, defence: 55 }, price: 550 }, 'Tome of Nature': { iconIndex: 6, type: 'Nature Tome', stats: { power: 75, intelligence: 85, defence: 65 }, price: 550 }, 'Tome of Chaos': { iconIndex: 7, type: 'Chaos Tome', stats: { power: 95, intelligence: 90, defence: 75 }, price: 550 }, 'Tome of Order': { iconIndex: 8, type: 'Order Tome', stats: { power: 65, intelligence: 85, defence: 80 }, price: 550 }, 'Tome of Time': { iconIndex: 9, type: 'Time Tome', stats: { power: 70, intelligence: 100, defence: 85 }, price: 550 }, 'Tome of Space': { iconIndex: 10, type: 'Space Tome', stats: { power: 75, intelligence: 95, defence: 70 }, price: 550 }, 'Tome of Gravity': { iconIndex: 11, type: 'Gravity Tome', stats: { power: 100, intelligence: 80, defence: 40 }, price: 550 }, 'Tome of Lightning': { iconIndex: 12, type: 'Lightning Tome', stats: { power: 85, intelligence: 75, defence: 95 }, price: 550 }, 'Tome of Ice': { iconIndex: 13, type: 'Ice Tome', stats: { power: 70, intelligence: 90, defence: 60 }, price: 550 }, 'Tome of Lava': { iconIndex: 14, type: 'Lava Tome', stats: { power: 95, intelligence: 85, defence: 45 }, price: 550 }, 'Tome of Poison': { iconIndex: 15, type: 'Poison Tome', stats: { power: 65, intelligence: 80, defence: 75 }, price: 550 }, 'Tome of Healing': { iconIndex: 16, type: 'Healing Tome', stats: { power: 40, intelligence: 100, defence: 60 }, price: 550 }, 'Tome of Illusion': { iconIndex: 17, type: 'Illusion Tome', stats: { power: 50, intelligence: 95, defence: 85 }, price: 550 }, 'Tome of Summoning': { iconIndex: 18, type: 'Summoning Tome', stats: { power: 80, intelligence: 90, defence: 70 }, price: 550 }, 'Tome of Necromancy': { iconIndex: 19, type: 'Necromancy Tome', stats: { power: 75, intelligence: 95, defence: 50 }, price: 550 }, 'Tome of Transmutation': { iconIndex: 20, type: 'Transmutation Tome', stats: { power: 70, intelligence: 85, defence: 65 }, price: 550 }, 'Tome of Divination': { iconIndex: 31, type: 'Divination Tome', stats: { power: 45, intelligence: 100, defence: 80 }, price: 550 }, 'Tome of Enchantment': { iconIndex: 32, type: 'Enchantment Tome', stats: { power: 60, intelligence: 95, defence: 75 }, price: 550 }, 'Tome of Conjuration': { iconIndex: 33, type: 'Conjuration Tome', stats: { power: 85, intelligence: 90, defence: 60 }, price: 550 }, 'Tome of Abjuration': { iconIndex: 34, type: 'Abjuration Tome', stats: { power: 55, intelligence: 95, defence: 70 }, price: 550 } }; const shopItemQuantities = { 'Tome of Fire': 5, 'Tome of Water': 3, 'Tome of Earth': 4, 'Tome of Air': 2, 'Tome of Light': 1, 'Tome of Darkness': 1, 'Tome of Nature': 3, 'Tome of Chaos': 2, 'Tome of Order': 2, 'Tome of Time': 1, 'Tome of Space': 1, 'Tome of Gravity': 1, 'Tome of Lightning': 2, 'Tome of Ice': 3, 'Tome of Lava': 2, 'Tome of Poison': 3, 'Tome of Healing': 5, 'Tome of Illusion': 2, 'Tome of Summoning': 1, 'Tome of Necromancy': 1, 'Tome of Transmutation': 2, 'Tome of Divination': 3, 'Tome of Enchantment': 4, 'Tome of Conjuration': 2, 'Tome of Abjuration': 3 }; function wordWrap(text, maxLength) { const words = text.split(' '); let lines = []; let currentLine = words[0]; for (let i = 1; i < words.length; i++) { if (currentLine.length + words[i].length + 1 <= maxLength) { currentLine += ' ' + words[i]; } else { lines.push(currentLine); currentLine = words[i]; } } lines.push(currentLine); return lines.join('\n'); } class About { constructor(scene, x, y, width) { this.scene = scene; this.x = x; this.y = y; this.width = width; this.height = 150; this.createAboutPanel(); } createAboutPanel() { this.background = this.scene.add.rectangle(this.x, this.y, this.width, this.height, 0x333333, 1); this.background.setOrigin(0, 0); this.background.setStrokeStyle(1, 0xffffff, 1); this.title = this.scene.add.text(this.x + 10, this.y + 10, 'Controls & Info', { fontSize: '18px', fill: '#ffffff' }); const infoText = [ 'I - Toggle Inventory', 'B - Toggle Bank', 'S - Toggle Shop', '', 'Drag and drop to move items', 'Drag items onto same type to stack', 'Drag items outside inventory to delete (has a confirmation window).', 'Drag items into shop to sell', 'Drag items between Bank and Inventory' ]; let yOffset = 40; infoText.forEach(text => { const wrappedText = wordWrap(text, 40); const textObject = this.scene.add.text(this.x + 10, this.y + yOffset, wrappedText, { fontSize: '12px', fill: '#ffffff' }); yOffset += textObject.height + 5; }); // Adjust the height of the background to fit all the text const newHeight = yOffset + 10; this.background.setSize(this.width, newHeight); this.height = newHeight; } } // Storage Related: class StorageContainer { constructor(scene, x, y, rows, cols, scale = 2) { this.scene = scene; this.x = x; this.y = y; this.rows = rows; this.cols = cols; this.scale = scale; this.cellSize = 18 * scale; this.padding = 2 * scale; this.spacing = 4 * scale; this.slots = []; this.visible = true; this.background = null; this.title = null; this.createStorageContainer(); } createStorageContainer() { // Create background const width = this.cols * this.cellSize + (this.cols - 1) * this.spacing + this.padding * 2; const height = this.rows * this.cellSize + (this.rows - 1) * this.spacing + this.padding * 2; this.background = this.scene.add.rectangle(this.x, this.y, width, height, 0x000000, 1); this.background.setOrigin(0, 0); this.background.setStrokeStyle(1 * this.scale, 0xffffff, 1); // Create title this.title = this.scene.add.text(this.x + this.padding, this.y - 30, 'StorageContainer', { fontSize: '24px', fill: '#ffffff' }).setInteractive(); this.title.on('pointerdown', () => this.toggleVisibility()); // Create slots for (let row = 0; row < this.rows; row++) { for (let col = 0; col < this.cols; col++) { const slotX = this.x + this.padding + col * (this.cellSize + this.spacing); const slotY = this.y + this.padding + row * (this.cellSize + this.spacing); const slot = new InventorySlot(this.scene, slotX, slotY, this.cellSize); this.slots.push(slot); } } } addItem(frame, count = 1) { const existingSlot = this.slots.find(slot => { const item = slot.getItem(); return item && item.sprite.frame.name === frame && item.count < 99; }); if (existingSlot) { const item = existingSlot.getItem(); item.count = Math.min(item.count + count, 99); item.updateCountDisplay(); } else { const emptySlot = this.getEmptySlot(); if (emptySlot) { const item = new Item(this.scene, emptySlot.x + this.cellSize / 2, emptySlot.y + this.cellSize / 2, frame, count, this.scale); emptySlot.setItem(item); this.setupDragEvents(item); } } } addItemToSlot(slot, frame, count) { const existingItem = slot.getItem(); if (existingItem && existingItem.sprite.frame.name === frame && existingItem.count < 99) { existingItem.count = Math.min(existingItem.count + count, 99); existingItem.updateCountDisplay(); } else { if (existingItem) { this.removeItem(existingItem); } const item = new Item(this.scene, slot.x + this.cellSize / 2, slot.y + this.cellSize / 2, frame, count, this.scale); slot.setItem(item); this.setupDragEvents(item); item.updateCountDisplay(); } } removeItem(item) { const slot = this.getSlotContainingItem(item); if (slot) { slot.clearItem(); item.destroy(); } this.scene.children.remove(item.sprite); this.scene.children.remove(item.countText); } getSlotAtPosition(x, y) { return this.slots.find(slot => slot.containsPoint(x, y)); } getItemAtPosition(x, y) { const slot = this.getSlotAtPosition(x, y); return slot ? slot.getItem() : null; } toggleVisibility() { this.visible = !this.visible; this.background.setVisible(this.visible); this.slots.forEach(slot => { slot.graphics.setVisible(this.visible); if (slot.getItem()) { slot.getItem().sprite.setVisible(this.visible); if (slot.getItem().countText) { slot.getItem().countText.setVisible(this.visible); } } }); this.title.setVisible(true); } getEmptySlot() { return this.slots.find(slot => !slot.getItem()); } getSlotContainingItem(item) { return this.slots.find(slot => slot.getItem() === item); } setupDragEvents(item) { this.scene.input.setDraggable(item.sprite); let startSlot; item.sprite.on('dragstart', () => { item.sprite.setTint(0xaaaaaa); startSlot = this.getSlotContainingItem(item); if (startSlot) { startSlot.clearItem(); } }); item.sprite.on('drag', (pointer, dragX, dragY) => { item.setPosition(dragX, dragY); }); item.sprite.on('dragend', () => { item.sprite.clearTint(); const targetSlot = this.getSlotAtPosition(item.sprite.x, item.sprite.y); if (targetSlot) { const targetItem = targetSlot.getItem(); if (targetItem && targetItem !== item && targetItem.sprite.frame.name === item.sprite.frame.name) { // Merge items if they are the same type const newCount = Math.min(targetItem.count + item.count, 99); const remainingCount = targetItem.count + item.count - newCount; targetItem.count = newCount; targetItem.updateCountDisplay(); if (remainingCount > 0) { item.count = remainingCount; startSlot.setItem(item); item.updateCountDisplay(); } else { this.removeItem(item); } } else if (targetItem && targetItem !== item) { // Swap items if they are different targetSlot.setItem(item); startSlot.setItem(targetItem); } else { // Move item to empty slot targetSlot.setItem(item); } } else { // Check if the item is dropped outside all containers const isOutsideAllContainers = !this.isOverAnyContainer(item.sprite.x, item.sprite.y); if (isOutsideAllContainers) { const isOverShop = this.scene.shop.getSlotAtPosition(item.sprite.x, item.sprite.y); if (isOverShop) { this.scene.shop.sellItem(item); this.removeItem(item); } else { this.showDeleteConfirmation(item, () => { this.removeItem(item); }, () => { // Cancel callback: Return item to start slot startSlot.setItem(item); }); } } else { // If dropped inside any container but not on a slot, return to start slot startSlot.setItem(item); } } }); } isOverAnyContainer(x, y) { // Check if the point is over this container if (x >= this.x && x <= this.x + this.background.width && y >= this.y && y <= this.y + this.background.height) { return true; } // Check if the point is over the inventory if (this.scene.inventory && this.scene.inventory !== this) { if (x >= this.scene.inventory.x && x <= this.scene.inventory.x + this.scene.inventory.background.width && y >= this.scene.inventory.y && y <= this.scene.inventory.y + this.scene.inventory.background.height) { return true; } } // Check if the point is over the bank if (this.scene.bank && this.scene.bank !== this) { if (x >= this.scene.bank.x && x <= this.scene.bank.x + this.scene.bank.background.width && y >= this.scene.bank.y && y <= this.scene.bank.y + this.scene.bank.background.height) { return true; } } return false; } moveItemToStorageContainer(targetStorageContainer, item) { const targetSlot = targetStorageContainer.getEmptySlot(); if (targetSlot) { this.removeItem(item); targetStorageContainer.addItem(item.sprite.frame.name, item.count); } } showDeleteConfirmation(item, onConfirm, onCancel) { const containerWidth = 300; const containerHeight = 200; // Create a container centered on the screen this.deleteConfirmationContainer = this.scene.add.container(400, 300); // Add a background rectangle const confirmationBox = this.scene.add.rectangle(0, 0, containerWidth, containerHeight, 0x000000, 0.8); confirmationBox.setStrokeStyle(2, 0xffffff); // Add title text const titleText = this.scene.add.text(0, -70, 'Delete Item?', { fontSize: '24px', fill: '#ffffff' }).setOrigin(0.5); // Add item text const itemText = this.scene.add.text(0, -30, `${item.getItemName()} x${item.count}`, { fontSize: '18px', fill: '#ffffff' }).setOrigin(0.5); // Add confirm button const confirmButton = this.scene.add.text(-70, 50, 'Confirm', { fontSize: '18px', fill: '#ffffff', backgroundColor: '#aa0000', padding: { x: 10, y: 5 } }).setOrigin(0.5).setInteractive(); confirmButton.on('pointerdown', () => { onConfirm(); this.hideDeleteConfirmation(); }); // Add cancel button const cancelButton = this.scene.add.text(70, 50, 'Cancel', { fontSize: '18px', fill: '#ffffff', backgroundColor: '#0000aa', padding: { x: 10, y: 5 } }).setOrigin(0.5).setInteractive(); cancelButton.on('pointerdown', () => { onCancel(); this.hideDeleteConfirmation(); }); // Add all elements to the container this.deleteConfirmationContainer.add([confirmationBox, titleText, itemText, confirmButton, cancelButton]); // Center the container on the screen this.deleteConfirmationContainer.setPosition( this.scene.sys.game.config.width / 2, this.scene.sys.game.config.height / 2 ); } hideDeleteConfirmation() { if (this.deleteConfirmationContainer) { this.deleteConfirmationContainer.destroy(); this.deleteConfirmationContainer = null; } } } class Item { constructor(scene, x, y, frame, count = 1, scale = 1) { this.scene = scene; this.sprite = scene.add.sprite(x, y, 'tomes', frame).setInteractive(); this.sprite.setScale(scale); this.count = count; this.countText = scene.add.text(x, y, count.toString(), { fontSize: `${6 * scale}px`, fill: '#ffffff' }); this.countText.setOrigin(1, 0); this.updateCountDisplay(); } updateCountDisplay() { this.countText.setText(this.count > 1 ? this.count.toString() : ''); const offsetX = 9 * this.sprite.scaleX; const offsetY = -9 * this.sprite.scaleY; this.countText.setPosition(this.sprite.x + offsetX, this.sprite.y + offsetY); } setPosition(x, y) { this.sprite.setPosition(x, y); this.updateCountDisplay(); } destroy() { if (this.sprite) { this.sprite.destroy(); this.sprite = null; } if (this.countText) { this.countText.destroy(); this.countText = null; } } getItemName() { const frameNumber = parseInt(this.sprite.frame.name); const itemName = Object.keys(itemDictionary).find(key => itemDictionary[key].iconIndex === frameNumber); if (!itemName) { console.warn(`No matching item found for frame number ${frameNumber}`); } return itemName || 'Unknown Tome'; } getItemStats() { const itemName = this.getItemName(); return itemDictionary[itemName]?.stats || { power: 0, intelligence: 0, defence: 0 }; } } class ItemCard { constructor(scene, x, y) { this.scene = scene; this.x = x; this.y = y; this.width = 210; // Increased width by 10px this.height = 140; this.padding = 10; this.background = scene.add.rectangle(x, y, this.width, this.height, 0x000000, 0.8); this.background.setOrigin(0); this.background.setStrokeStyle(1, 0xffffff); this.nameText = scene.add.text(x + this.padding, y + this.padding, '', { fontSize: '16px', fill: '#ffffff', wordWrap: { width: this.width - this.padding * 2 - 32 // Adjusted for icon space } }); this.typeText = scene.add.text(x + this.padding, y + this.padding, '', { fontSize: '12px', fill: '#cccccc' }); this.statsText = scene.add.text(x + this.padding, y + this.padding, '', { fontSize: '12px', fill: '#ffffff' }); this.valueText = scene.add.text(x + this.padding, y + this.padding, '', { fontSize: '12px', fill: '#ffff00' }); this.itemIcon = scene.add.image(x + this.width - this.padding - 16, y + this.padding + 16, 'tomes', 0); this.itemIcon.setScale(2); this.container = scene.add.container(0, 0, [this.background, this.nameText, this.typeText, this.statsText, this.valueText, this.itemIcon]); this.container.setDepth(500); this.container.setVisible(false); } show(item, isInventoryOrBank = true) { const itemName = item.getItemName(); const itemType = itemDictionary[itemName]?.type || 'Unknown Type'; this.nameText.setText(wordWrap(itemName, 20)); this.typeText.setText(itemType); const stats = item.getItemStats(); this.statsText.setText(`Power: ${stats.power}\nIntelligence: ${stats.intelligence}\nDefence: ${stats.defence}`); // Set the correct frame for the item icon this.itemIcon.setFrame(item.sprite.frame.name); // Display item value if in inventory or bank if (isInventoryOrBank) { const itemData = itemDictionary[itemName]; if (itemData && itemData.price) { const sellPrice = Math.floor(itemData.price * this.scene.shop.sellPriceRatio); this.valueText.setText(`Value: ${sellPrice} gold`); this.valueText.setVisible(true); } else { this.valueText.setVisible(false); } } else { this.valueText.setVisible(false); } // Adjust positions based on nameText height const nameTextHeight = this.nameText.height; this.typeText.setPosition(this.x + this.padding, this.y + this.padding + nameTextHeight + 5); this.statsText.setPosition(this.x + this.padding, this.y + this.padding + nameTextHeight + 25); if (this.valueText.visible) { this.valueText.setPosition(this.x + this.padding, this.y + this.padding + nameTextHeight + this.statsText.height + 30); } // Adjust background height const totalHeight = nameTextHeight + 25 + this.statsText.height + (this.valueText.visible ? this.valueText.height + 5 : 0) + this.padding * 2; this.background.setSize(this.width, totalHeight); this.container.setVisible(true); this.container.setDepth(500); } hide() { this.container.setVisible(false); } setPosition(x, y) { this.container.setPosition(x, y); } } class InventorySlot { constructor(scene, x, y, size) { this.scene = scene; this.x = x; this.y = y; this.size = size; this.item = null; this.graphics = this.createGraphics(); this.isLeftMouseButtonDown = false; this.setupMouseEvents(); } createGraphics() { const graphics = this.scene.add.graphics(); graphics.lineStyle(1, 0xffffff, 0.5); graphics.strokeRect(this.x, this.y, this.size, this.size); return graphics; } setupMouseEvents() { this.scene.input.on('pointerdown', (pointer) => { if (pointer.leftButtonDown()) { this.isLeftMouseButtonDown = true; this.hideItemCard(); } }); this.scene.input.on('pointerup', (pointer) => { if (!pointer.leftButtonDown()) { this.isLeftMouseButtonDown = false; } }); } setItem(item) { if (this.item && this.item.sprite) { // Remove hover events from the old item this.item.sprite.off('pointerover'); this.item.sprite.off('pointerout'); } this.item = item; if (item && item.sprite) { item.setPosition(this.x + this.size / 2, this.y + this.size / 2); // Ensure the item's sprite is above the graphics in the display list this.scene.children.bringToTop(item.sprite); if (item.countText) { this.scene.children.bringToTop(item.countText); } // Set up hover events on the item sprite item.sprite.setInteractive(); item.sprite.on('pointerover', () => { if (!this.isLeftMouseButtonDown) { this.showItemCard(); } }); item.sprite.on('pointerout', () => { this.hideItemCard(); }); } } getItem() { return this.item; } clearItem() { if (this.item && this.item.sprite) { // Remove hover events when clearing the item this.item.sprite.off('pointerover'); this.item.sprite.off('pointerout'); } this.item = null; } containsPoint(x, y) { return x >= this.x && x < this.x + this.size && y >= this.y && y < this.y + this.size; } showItemCard() { if (!this.item) return; this.hideItemCard(); // Hide any existing item card let x = this.x + this.size + 10; let y = this.y; this.scene.itemCard.show(this.item, true); // Adjust for right edge if (x + this.scene.itemCard.width > this.scene.sys.game.config.width) { x = this.x - this.scene.itemCard.width - 10; } // Adjust for bottom edge if (y + this.scene.itemCard.height > this.scene.sys.game.config.height) { y = this.y - this.scene.itemCard.height + this.size; } this.scene.itemCard.setPosition(x, y); } hideItemCard() { if (this.scene.itemCard) { this.scene.itemCard.hide(); } } } class Inventory extends StorageContainer { constructor(scene, x, y, rows, cols, scale = 2) { super(scene, x, y, rows, cols, scale); this.goldAmount = 1000; // Starting gold amount this.createGoldPanel(); this.title.setText(this.visible ? 'Inventory' : 'Show Inventory'); } createGoldPanel() { const panelHeight = 15 * this.scale; const panelY = this.y + this.background.height; const panelWidth = this.background.width; this.goldPanel = this.scene.add.rectangle(this.x, panelY, panelWidth, panelHeight, 0x4a4a4a); this.goldPanel.setOrigin(0, 0); this.goldPanel.setStrokeStyle(1 * this.scale, 0xffffff, 1); this.goldText = this.scene.add.text(this.x + 10, panelY + panelHeight / 2, `Gold: ${this.goldAmount}`, { fontSize: `${7 * this.scale}px`, fill: '#ffff00' }); this.goldText.setOrigin(0, 0.5); // Adjust background height to include gold panel this.background.height += panelHeight; } toggleVisibility() { super.toggleVisibility(); this.goldPanel.setVisible(this.visible); this.goldText.setVisible(this.visible); this.title.setText(this.visible ? 'Inventory' : 'Show Inventory'); } updateGold(amount) { this.goldAmount = amount; this.goldText.setText(`Gold: ${this.goldAmount}`); } setupDragEvents(item) { super.setupDragEvents(item); item.sprite.on('dragend', (pointer) => { const targetSlot = this.getSlotAtPosition(pointer.x, pointer.y); if (!targetSlot) { const bankSlot = this.scene.bank.getSlotAtPosition(pointer.x, pointer.y); if (bankSlot) { this.scene.bank.addItemToSlot(bankSlot, item.sprite.frame.name, item.count); this.removeItem(item); } else { const startSlot = this.getSlotContainingItem(item); if (startSlot) { startSlot.setItem(item); } } } else { targetSlot.setItem(item); } }); } } class Bank extends StorageContainer { constructor(scene, x, y, numSlots, scale = 2) { const cols = 8; // Fixed number of columns const rows = Math.ceil(numSlots / cols); super(scene, x, y, rows, cols, scale); this.numSlots = numSlots; this.createOpenBankButton(); } createStorageContainer() { super.createStorageContainer(); this.title.setText('Bank'); this.background.setFillStyle(0x333333); } createOpenBankButton() { this.openBankButton = this.scene.add.text(this.x + this.padding, this.y - 30, 'Open Bank', { fontSize: '24px', fill: '#ffffff' }).setInteractive(); this.openBankButton.on('pointerdown', () => this.toggleVisibility()); this.openBankButton.setVisible(false); } toggleVisibility() { super.toggleVisibility(); this.openBankButton.setVisible(!this.visible); } setupDragEvents(item) { super.setupDragEvents(item); item.sprite.on('dragend', (pointer) => { const targetSlot = this.getSlotAtPosition(pointer.x, pointer.y); if (!targetSlot) { const inventorySlot = this.scene.inventory.getSlotAtPosition(pointer.x, pointer.y); if (inventorySlot) { this.scene.inventory.addItemToSlot(inventorySlot, item.sprite.frame.name, item.count); this.removeItem(item); } else { const startSlot = this.getSlotContainingItem(item); if (startSlot) { startSlot.setItem(item); } } } else { targetSlot.setItem(item); } }); } } class Shop { constructor(scene, x, y, rows, cols, scale = 2, sellPriceRatio = 0.5) { this.scene = scene; this.x = x; this.y = y; this.rows = rows; this.cols = cols; this.scale = scale; this.cellSize = 18 * scale; this.padding = 2 * scale; this.spacing = 4 * scale; this.verticalSpacing = 10 * scale; // Additional vertical spacing for price tags this.slots = []; this.priceTags = []; this.itemQuantities = { ...shopItemQuantities }; // Copy the quantities this.sellPriceRatio = Math.max(0, Math.min(1, sellPriceRatio)); // Ensure the ratio is between 0 and 1 this.restockTimers = {}; // New property to track restock timers this.restockTime = 60000; // Restock time in milliseconds (1 minute) this.createBackground(); this.createCloseButton(); this.createSlots(); this.createTitle(); this.createOpenShopButton(); this.populateShop(); this.setVisible(true); // Initially show the shop } getSlotAtPosition(x, y) { return this.slots.find(slot => slot.containsPoint(x, y)); } sellItem(item) { const itemName = item.getItemName(); const itemData = itemDictionary[itemName]; if (itemData && itemData.price) { const sellPrice = Math.floor(itemData.price * this.sellPriceRatio); // Sell price based on the ratio this.scene.playerGold += sellPrice * item.count; this.scene.inventory.updateGold(this.scene.playerGold); // Update shop quantity if (this.itemQuantities[itemName]) { this.itemQuantities[itemName] += item.count; } else { this.itemQuantities[itemName] = item.count; } // Refresh shop display this.refreshShopDisplay(); // Show sell confirmation this.showSellConfirmation(itemName, item.count, sellPrice * item.count); } else { console.error(`Item ${itemName} has no price defined`); this.showSellConfirmation(itemName, item.count, 0); } } showSellConfirmation(itemName, quantity, totalPrice) { const text = totalPrice > 0 ? `Sold ${quantity} ${itemName} for ${totalPrice} gold` : `Sold ${quantity} ${itemName}`; const confirmation = this.scene.add.text(this.scene.cameras.main.centerX, this.scene.cameras.main.centerY, text, { fontSize: '18px', fill: '#ffffff', backgroundColor: '#000000', padding: { x: 10, y: 5 } }).setOrigin(0.5); this.scene.time.delayedCall(2000, () => { confirmation.destroy(); }); } setVisible(visible) { this.background.setVisible(visible); this.title.setVisible(visible); this.closeButton.setVisible(visible); this.closeButtonText.setVisible(visible); this.slots.forEach(slot => { slot.graphics.setVisible(visible); if (slot.getItem()) { slot.getItem().sprite.setVisible(visible); if (slot.getItem().countText) { slot.getItem().countText.setVisible(visible); } } }); this.priceTags.forEach(priceTag => priceTag.setVisible(visible)); } openShop() { this.setVisible(true); this.openShopButton.setVisible(false); } createCloseButton() { const buttonSize = 12; const buttonX = this.x + this.background.width - 10; // Moved 10 pixels to the left const buttonY = this.y - buttonSize; this.closeButton = this.scene.add.rectangle(buttonX, buttonY, buttonSize, buttonSize, 0xff0000); this.closeButtonText = this.scene.add.text(buttonX, buttonY - 2, 'X', { // Moved up 2 pixels fontSize: '10px', color: '#ffffff' }).setOrigin(0.5); this.closeButton.setInteractive(); this.closeButton.on('pointerdown', () => this.closeShop()); } closeShop() { this.setVisible(false); this.openShopButton.setVisible(true); this.scene.onShopClosed(); } createOpenShopButton() { this.openShopButton = this.scene.add.text(this.x + this.padding, this.y - 30, 'Open Shop', { fontSize: '24px', fill: '#ffffff' }).setInteractive(); this.openShopButton.on('pointerdown', () => this.openShop()); this.openShopButton.setVisible(false); } createBackground() { const width = this.cols * this.cellSize + (this.cols - 1) * this.spacing + this.padding * 2; const height = this.rows * (this.cellSize + this.verticalSpacing) + (this.rows - 1) * this.spacing + this.padding * 2; this.background = this.scene.add.rectangle(this.x, this.y, width, height, 0x4a4a4a, 1); this.background.setOrigin(0, 0); this.background.setStrokeStyle(1 * this.scale, 0xffffff, 1); } createSlots() { for (let row = 0; row < this.rows; row++) { for (let col = 0; col < this.cols; col++) { const slotX = this.x + this.padding + col * (this.cellSize + this.spacing); const slotY = this.y + this.padding + row * (this.cellSize + this.spacing + this.verticalSpacing); const slot = new InventorySlot(this.scene, slotX, slotY, this.cellSize); this.slots.push(slot); } } } createTitle() { this.title = this.scene.add.text(this.x + this.padding, this.y - 30, 'Shop', { fontSize: '24px', fill: '#ffffff' }); } populateShop() { const shopItems = Object.keys(itemDictionary).slice(0, this.rows * this.cols); shopItems.forEach((itemName, index) => { const item = itemDictionary[itemName]; const slot = this.slots[index]; const quantity = this.itemQuantities[itemName] || 0; if (quantity > 0 && item && item.iconIndex !== undefined) { const shopItem = new Item(this.scene, slot.x + this.cellSize / 2, slot.y + this.cellSize / 2, item.iconIndex, quantity, this.scale); if (shopItem && shopItem.sprite) { slot.setItem(shopItem); const price = item.price || this.calculateDefaultPrice(item); this.createPriceTag(slot, price); this.setupItemClick(shopItem, itemName, price); this.updateItemQuantityDisplay(shopItem, quantity); } else { console.error(`Failed to create shop item for ${itemName}`); } } else { slot.clearItem(); if (this.priceTags[index]) { this.priceTags[index].destroy(); this.priceTags[index] = null; } } }); } calculateDefaultPrice(item) { // Calculate a default price based on item stats if no price is defined return Math.floor((item.stats.power + item.stats.intelligence + item.stats.defence) * 2); } updateItemQuantityDisplay(item, quantity) { if (item.countText) { item.countText.setText(quantity > 1 ? quantity.toString() : ''); } else { item.countText = this.scene.add.text(item.sprite.x, item.sprite.y, quantity > 1 ? quantity.toString() : '', { fontSize: `${6 * this.scale}px`, fill: '#ffffff' }); item.countText.setOrigin(1, 0); } const offsetX = 9 * this.scale; // Increased from 6 to 9 const offsetY = -9 * this.scale; // Changed from -6 to -9 item.countText.setPosition(item.sprite.x + offsetX, item.sprite.y + offsetY); } setupItemClick(item, itemName, price) { item.sprite.setInteractive(); item.sprite.on('pointerdown', () => { const availableQuantity = this.itemQuantities[itemName]; if (availableQuantity > 0) { this.scene.scene.pause('Game'); this.scene.scene.launch('ConfirmationScene', { itemName, itemPrice: price, parentScene: this.scene, maxQuantity: availableQuantity }); } }); } updateItemQuantity(itemName, purchasedQuantity) { this.itemQuantities[itemName] -= purchasedQuantity; const shopItem = this.slots.find(slot => { const item = slot.getItem(); return item && item.sprite && item.sprite.frame && item.getItemName() === itemName; })?.getItem(); if (shopItem) { if (this.itemQuantities[itemName] <= 0) { // Remove the item from the shop this.removeItemFromShop(itemName); // Start the restock timer this.startRestockTimer(itemName); } else { this.updateItemQuantityDisplay(shopItem, this.itemQuantities[itemName]); } } this.refreshShopDisplay(); } removeItemFromShop(itemName) { const slotIndex = this.slots.findIndex(slot => { const item = slot.getItem(); return item && item.sprite && item.sprite.frame && item.getItemName() === itemName; }); if (slotIndex !== -1) { const slot = this.slots[slotIndex]; if (slot.getItem()) { slot.getItem().destroy(); } slot.clearItem(); if (this.priceTags[slotIndex]) { this.priceTags[slotIndex].destroy(); this.priceTags[slotIndex] = null; } } } startRestockTimer(itemName) { if (this.restockTimers[itemName]) { this.scene.time.removeEvent(this.restockTimers[itemName]); } this.restockTimers[itemName] = this.scene.time.delayedCall(this.restockTime, () => { this.restockItem(itemName); }); } restockItem(itemName) { this.itemQuantities[itemName] = shopItemQuantities[itemName] || 1; this.refreshShopDisplay(); delete this.restockTimers[itemName]; } refreshShopDisplay() { this.slots.forEach(slot => { if (slot.getItem()) { slot.getItem().destroy(); if (slot.getItem().countText) { slot.getItem().countText.destroy(); } } }); this.populateShop(); } createPriceTag(slot, price) { const priceTag = this.scene.add.text(slot.x, slot.y + this.cellSize + 2, `${price}g`, { fontSize: '12px', fill: '#ffff00' }); priceTag.setOrigin(0, 0); this.priceTags.push(priceTag); } startPeriodicUpdate() { this.scene.time.addEvent({ delay: 1000, // Check every second callback: this.checkForRestockedItems, callbackScope: this, loop: true }); } checkForRestockedItems() { let updated = false; Object.keys(this.itemQuantities).forEach(itemName => { if (this.itemQuantities[itemName] <= 0 && !this.restockTimers[itemName]) { this.restockItem(itemName); updated = true; } }); if (updated) { this.refreshShopDisplay(); } } getItemAtPosition(x, y) { const slot = this.getSlotAtPosition(x, y); return slot ? slot.getItem() : null; } } class ConfirmationScene extends Phaser.Scene { constructor() { super('ConfirmationScene'); } init(data) { this.itemName = data.itemName; this.itemPrice = data.itemPrice; this.parentScene = data.parentScene; this.maxQuantity = data.maxQuantity; } create() { const width = this.scale.width; const height = this.scale.height; // Add semi-transparent background this.add.rectangle(0, 0, width, height, 0x000000, 0.7).setOrigin(0); // Add confirmation box const confirmationBox = this.add.rectangle(width / 2, height / 2, 300, 200, 0x4a4a4a).setStrokeStyle(2, 0xffffff); // Add text this.add.text(width / 2, height / 2 - 70, `Buy ${this.itemName}?`, { fontSize: '24px', fill: '#ffffff' }).setOrigin(0.5); this.add.text(width / 2, height / 2 - 30, `Price: ${this.itemPrice} gold`, { fontSize: '18px', fill: '#ffffff' }).setOrigin(0.5); // Add quantity selector this.quantityText = this.add.text(width / 2, height / 2 + 10, 'Quantity: 1', { fontSize: '18px', fill: '#ffffff' }).setOrigin(0.5); const minusButton = this.add.text(width / 2 + 30, height / 2 + 15, '-', { fontSize: '24px', fill: '#ffffff' }) .setInteractive() .on('pointerdown', () => this.updateQuantity(-1)); const plusButton = this.add.text(width / 2 + 60, height / 2 + 15, '+', { fontSize: '24px', fill: '#ffffff' }) .setInteractive() .on('pointerdown', () => this.updateQuantity(1)); // Add total cost text this.totalCostText = this.add.text(width / 2, height / 2 + 50, '', { fontSize: '18px', fill: '#ffff00' }).setOrigin(0.5); // Add confirm button const confirmButton = this.add.text(width / 2 - 120, height / 2 + 70, 'Confirm', { fontSize: '18px', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: 5 }) .setInteractive() .on('pointerdown', () => this.confirmPurchase()); // Add cancel button const cancelButton = this.add.text(width / 2 + 50, height / 2 + 70, 'Cancel', { fontSize: '18px', fill: '#ffffff', backgroundColor: '#4a4a4a', padding: 5 }) .setInteractive() .on('pointerdown', () => this.closeConfirmationScene()); this.quantity = 1; this.updateTotalCost(); } closeConfirmationScene() { this.scene.stop(); this.scene.resume('Game'); } updateQuantity(change) { this.quantity = Math.max(1, Math.min(this.maxQuantity, this.quantity + change)); this.quantityText.setText(`Quantity: ${this.quantity}`); this.updateTotalCost(); } updateTotalCost() { const totalCost = this.itemPrice * this.quantity; this.totalCostText.setText(`Total Cost: ${totalCost} gold`); } confirmPurchase() { const totalCost = this.itemPrice * this.quantity; if (this.parentScene.playerGold >= totalCost) { this.parentScene.playerGold -= totalCost; this.parentScene.inventory.updateGold(this.parentScene.playerGold); const itemFrame = itemDictionary[this.itemName].iconIndex; this.parentScene.inventory.addItem(itemFrame, this.quantity); this.parentScene.shop.updateItemQuantity(this.itemName, this.quantity); this.closeConfirmationScene(); } else { this.add.text(this.scale.width / 2, this.scale.height / 2 + 100, 'Not enough gold!', { fontSize: '18px', fill: '#ff0000' }).setOrigin(0.5); } } } class Game extends Phaser.Scene { constructor() { super('Game'); this.inventory = null; this.bank = null; this.shop = null; this.itemCard = null; this.playerGold = 1000; // Starting gold amount this.isShopOpen = true; // Set initial shop state to open this.activeItemCard = null; // Track which item card is currently active this.about = null; // About panel } onShopClosed() { console.log('Shop closed'); this.isShopOpen = false; // Update shop state when closed } toggleShop() { if (this.isShopOpen) { this.shop.closeShop(); } else { this.shop.openShop(); this.isShopOpen = true; } } toggleInventory() { this.inventory.toggleVisibility(); } toggleBank() { this.bank.toggleVisibility(); } preload() { this.load.image('lakeNight', 'https://play.rosebud.ai/assets/LakeNight.png?jtLO'); this.load.spritesheet('tomes', 'https://play.rosebud.ai/assets/tomes.png?7uIY', { frameWidth: 16, frameHeight: 16 }); } create() { this.add.image(400, 300, 'lakeNight'); this.inventory = new Inventory(this, 20, 50, 6, 8); this.bank = new Bank(this, 420, 50, 30); this.itemCard = new ItemCard(this, 0, 0); this.shop = new Shop(this, 20, 400, 3, 8, 2, 0.5); this.shop.startPeriodicUpdate(); // Start periodic updates for the shop this.playerGold = 1000; this.inventory.updateGold(this.playerGold); const bankWidth = this.bank.background.width; this.about = new About(this, 420, 330, bankWidth); this.inventory.addItem(0, 1); this.inventory.addItem(5, 5); this.inventory.addItem(10, 50); this.bank.addItem(15, 1); this.bank.addItem(20, 10); // Add keyboard input listener for 'S' key this.input.keyboard.on('keydown-S', () => { this.toggleShop(); }); // Add keyboard input listener for 'I' key this.input.keyboard.on('keydown-I', () => { this.toggleInventory(); }); // Add keyboard input listener for 'B' key this.input.keyboard.on('keydown-B', () => { this.toggleBank(); }); // Add button to add random items to inventory const addItemButton = this.add.text(20, 350, 'Add Random Item to Inventory', { fill: '#ffffff', fontSize: '14px' }) .setInteractive() .on('pointerdown', () => this.addRandomItem(this.inventory)); // Add button to add random items to bank const addBankItemButton = this.add.text(420, 230, 'Add Random Item to Bank', { fill: '#ffffff', fontSize: '14px' }) .setInteractive() .on('pointerdown', () => this.addRandomItem(this.bank)); this.inventory.visible = true; // Use toggleVisibility to show the inventory if it's not already visible if (!this.inventory.visible) { this.inventory.toggleVisibility(); } } addRandomItem(container) { if (!container) { console.error('Container is undefined'); return; } const validItems = Object.values(itemDictionary).filter(item => item.iconIndex !== undefined); if (validItems.length === 0) { console.error('No valid items found in itemDictionary'); return; } const randomItem = validItems[Math.floor(Math.random() * validItems.length)]; const randomCount = Math.floor(Math.random() * 5) + 1; container.addItem(randomItem.iconIndex, randomCount); } } // Phaser window config. const config = { type: Phaser.WEBGL, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, fps: 60, backgroundColor: '#000000', scene: [Game, ConfirmationScene], dom: { createContainer: true }, render: { pixelArt: true, antialias: false }, physics: { default: 'arcade', arcade: { debug: false } } }; // Set willReadFrequently for the 2D context const canvas = document.createElement('canvas'); canvas.getContext('2d', { willReadFrequently: true }); window.phaserGame = new Phaser.Game(config); console.log('Phaser game instance created');