const armor = { "Leather Platebody": { "precursor_items": { "Leather Hide": 5, "Thread": 2, "Needle": 1 } }, "Iron Platebody": { "precursor_items": { "Iron Ingot": 5, "Leather Strap": 2, "Coal": 3 } }, "Copper Platebody": { "precursor_items": { "Copper Ingot": 5, "Leather Strap": 2, "Coal": 2 } }, "Bronze Platebody": { "precursor_items": { "Bronze Ingot": 5, "Leather Strap": 2, "Coal": 3 } }, "Steel Platebody": { "precursor_items": { "Steel Ingot": 5, "Leather Strap": 2, "Coal": 5 } }, "Iron Helmet": { "precursor_items": { "Iron Ingot": 2, "Leather Strap": 1, "Coal": 1 } }, "Copper Helmet": { "precursor_items": { "Copper Ingot": 2, "Leather Strap": 1, "Coal": 1 } }, "Bronze Helmet": { "precursor_items": { "Bronze Ingot": 2, "Leather Strap": 1, "Coal": 1 } }, "Steel Helmet": { "precursor_items": { "Steel Ingot": 2, "Leather Strap": 1, "Coal": 2 } }, "Iron Boots": { "precursor_items": { "Iron Ingot": 2, "Leather Hide": 2, "Coal": 1 } }, "Copper Boots": { "precursor_items": { "Copper Ingot": 2, "Leather Hide": 2, "Coal": 1 } }, "Bronze Boots": { "precursor_items": { "Bronze Ingot": 2, "Leather Hide": 2, "Coal": 1 } }, "Steel Boots": { "precursor_items": { "Steel Ingot": 2, "Leather Hide": 2, "Coal": 2 } }, "Wooden Shield": { "precursor_items": { "Wooden Plank": 4, "Iron Ingot": 2 } }, }; const weapons = { "Iron Dagger": { "precursor_items": { "Iron Ingot": 3, "Wooden Handle": 1, "Coal": 1 } }, "Copper Sword": { "precursor_items": { "Copper Ingot": 3, "Wooden Hilt": 1, "Coal": 1 } }, "Bronze Sword": { "precursor_items": { "Bronze Ingot": 3, "Wooden Hilt": 1, "Coal": 2 } }, "Steel Sword": { "precursor_items": { "Steel Ingot": 3, "Wooden Hilt": 1, "Coal": 3 } }, "Stone Axe": { "precursor_items": { "Stone Head": 2, "Wooden Handle": 1 } }, "Iron Axe": { "precursor_items": { "Iron Ingot": 2, "Wooden Handle": 1, "Coal": 1 } }, "Copper Axe": { "precursor_items": { "Copper Ingot": 2, "Wooden Handle": 1, "Coal": 1 } }, "Bronze Axe": { "precursor_items": { "Bronze Ingot": 2, "Wooden Handle": 1, "Coal": 2 } }, "Steel Axe": { "precursor_items": { "Steel Ingot": 2, "Wooden Handle": 1, "Coal": 3 } }, "Iron Pickaxe": { "precursor_items": { "Iron Ingot": 2, "Wooden Handle": 1, "Coal": 1 } }, "Copper Pickaxe": { "precursor_items": { "Copper Ingot": 2, "Wooden Handle": 1, "Coal": 1 } }, "Bronze Pickaxe": { "precursor_items": { "Bronze Ingot": 2, "Wooden Handle": 1, "Coal": 2 } }, "Steel Pickaxe": { "precursor_items": { "Steel Ingot": 2, "Wooden Handle": 1, "Coal": 3 } }, }; const materials = { "Leather Hide": { basePrice: 10, tier: 1 }, "Thread": { basePrice: 2, tier: 2 }, "Needle": { basePrice: 5, tier: 2 }, "Iron Ore": { basePrice: 15, tier: 1 }, "Copper Ore": { basePrice: 10, tier: 1 }, "Tin Ore": { basePrice: 12, tier: 1 }, "Coal": { basePrice: 5, tier: 1 }, "Iron Ingot": { basePrice: 20, tier: 2 }, "Copper Ingot": { basePrice: 15, tier: 2 }, "Bronze Ingot": { basePrice: 25, tier: 2 }, "Steel Ingot": { basePrice: 30, tier: 2 }, "Leather Strap": { basePrice: 8, tier: 2 }, "Wood": { basePrice: 3, tier: 1 }, "Wooden Plank": { basePrice: 5, tier: 2 }, "Wooden Handle": { basePrice: 7, tier: 2 }, "Wooden Hilt": { basePrice: 8, tier: 2 }, "Stone": { basePrice: 2, tier: 1 }, "Stone Head": { basePrice: 3, tier: 2 } }; class Listing { constructor(id, item, price, quantity, createdAt) { this.id = id; this.item = item; this.price = price; this.quantity = quantity; this.createdAt = createdAt; this.elementPositions = { itemIcon: { x: 5, y: 5 }, itemName: { x: 35, y: 6 }, quantity: { x: 395, y: 6 }, price: { x: 470, y: 6 }, buyButton: { x: 638, y: 5 } }; } display(scene, container, x, y) { const background = scene.add.image(x, y, 'listingBackground'); background.setOrigin(0, 0); container.add(background); // Item icon placeholder (you may want to add actual item icons later) const itemIcon = scene.add.rectangle(x + this.elementPositions.itemIcon.x, y + this.elementPositions.itemIcon.y, 16, 16, 0xcccccc); itemIcon.setOrigin(0); container.add(itemIcon); // Item name const itemNameText = scene.add.text(x + this.elementPositions.itemName.x, y + this.elementPositions.itemName.y, this.item, { fontFamily: 'PixelifySans-Regular', fontSize: '14px', fill: '#000000' }); container.add(itemNameText); // Quantity const quantityText = scene.add.text(x + this.elementPositions.quantity.x, y + this.elementPositions.quantity.y, `Qty: ${this.quantity}`, { fontFamily: 'PixelifySans-Regular', fontSize: '12px', fill: '#000000' }); container.add(quantityText); // Price const priceText = scene.add.text(x + this.elementPositions.price.x, y + this.elementPositions.price.y, `Price: ${this.price}`, { fontFamily: 'PixelifySans-Regular', fontSize: '12px', fill: '#000000' }); container.add(priceText); // Buy button const buyButton = scene.add.text(x + this.elementPositions.buyButton.x, y + this.elementPositions.buyButton.y, 'Buy', { fontFamily: 'PixelifySans-Regular', fontSize: '16px', fill: '#00b309' }) .setInteractive() .on('pointerdown', () => scene.buyListing(this.id)); buyButton.setOrigin(0.5, 0); container.add(buyButton); } } class PurchaseConfirmScene extends Phaser.Scene { constructor() { super('PurchaseConfirmScene'); this.elementPositions = { addButtons: { x: 300, y: 330, offSet: 50 } }; } init(data) { this.listing = data.listing; this.parentScene = data.parentScene; this.playerBalance = data.playerBalance; } create() { // Add the 'Confirmation' image as background this.bkgrnd = this.add.rectangle(0, 0, 800, 600, 0x000000).setOrigin(0, 0).setDepth(0); this.bkgrnd.setAlpha(0.7); this.add.image(400, 300, 'Confirmation').setOrigin(0.5); this.add.text(400, 180, 'Confirm Purchase', { fontSize: '24px', fill: '#000' }).setOrigin(0.5); this.add.text(400, 230, `Item: ${this.listing.item}`, { fontSize: '18px', fill: '#000' }).setOrigin(0.5); this.add.text(400, 250, `Price: $${this.listing.price}`, { fontSize: '18px', fill: '#000' }).setOrigin(0.5); this.quantityText = this.add.text(400, 300, 'Quantity: 1', { fontSize: '18px', fill: '#000' }).setOrigin(0.5); this.totalPriceText = this.add.text(400, 390, `Total: $${this.listing.price}`, { fontSize: '18px', fill: '#000' }).setOrigin(0.5); const minusButton = this.add.text(360, 305, '-', { fontSize: '24px', fill: '#000' }) .setInteractive() .on('pointerdown', () => this.changeQuantity(-1)); const plusButton = this.add.text(418, 305, '+', { fontSize: '24px', fill: '#000' }) .setInteractive() .on('pointerdown', () => this.changeQuantity(1)); // New buttons const plus10Button = this.add.text(this.elementPositions.addButtons.x, this.elementPositions.addButtons.y, '+10', { fontSize: '16px', fill: '#000' }) .setInteractive() .on('pointerdown', () => this.changeQuantity(10)); const plus50Button = this.add.text(this.elementPositions.addButtons.x + (this.elementPositions.addButtons.offSet * 1), this.elementPositions.addButtons.y, '+50', { fontSize: '16px', fill: '#000' }) .setInteractive() .on('pointerdown', () => this.changeQuantity(50)); const plus100Button = this.add.text(this.elementPositions.addButtons.x + (this.elementPositions.addButtons.offSet * 2), this.elementPositions.addButtons.y, '+100', { fontSize: '16px', fill: '#000' }) .setInteractive() .on('pointerdown', () => this.changeQuantity(100)); const maxButton = this.add.text(this.elementPositions.addButtons.x + (this.elementPositions.addButtons.offSet * 3), this.elementPositions.addButtons.y, 'Max', { fontSize: '16px', fill: '#000' }) .setInteractive() .on('pointerdown', () => this.setMaxQuantity()); const buyButton = this.add.text(300, 420, 'Buy', { fontSize: '20px', fill: '#00b309' }) .setOrigin(0.5) .setInteractive() .on('pointerdown', () => this.confirmPurchase()); const cancelButton = this.add.text(500, 420, 'Cancel', { fontSize: '20px', fill: '#f00' }) .setOrigin(0.5) .setInteractive() .on('pointerdown', () => this.scene.stop()); this.quantity = 1; } changeQuantity(amount) { const maxAffordable = Math.floor(this.playerBalance / this.listing.price); const maxAvailable = this.listing.quantity; if (amount > 1) { // For +10, +50, +100 buttons this.quantity = Math.min(amount, maxAffordable, maxAvailable); } else { // For +1 and -1 buttons const newQuantity = this.quantity + amount; this.quantity = Phaser.Math.Clamp(newQuantity, 1, Math.min(maxAffordable, maxAvailable)); } this.updateQuantityDisplay(); } setMaxQuantity() { const maxAffordable = Math.floor(this.playerBalance / this.listing.price); const maxAvailable = this.listing.quantity; this.quantity = Math.min(maxAffordable, maxAvailable); this.updateQuantityDisplay(); } updateQuantityDisplay() { this.quantityText.setText(`Quantity: ${this.quantity}`); this.totalPriceText.setText(`Total: $${this.quantity * this.listing.price}`); } confirmPurchase() { this.parentScene.completePurchase(this.listing.id, this.quantity); this.scene.stop(); } } class AuctionHouse extends Phaser.Scene { constructor() { super('AuctionHouse'); this.listings = []; this.virtualUsers = []; this.playerBalance = 5000; this.maxListings = 1000; this.listingCounter = 0; this.listingsPerPage = 50; this.currentPage = 1; this.simQuantity = 500; this.loadingBar = null; } preload() { this.load.image('listingBackground', 'https://play.rosebud.ai/assets/ListingBackground.png?wpFP'); this.load.image('Confirmation', 'https://play.rosebud.ai/assets/Confirmation.png?WExr'); this.load.script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js'); } create() { console.log('AuctionHouse scene created'); this.scene.add('PurchaseConfirmScene', PurchaseConfirmScene, false); WebFont.load({ google: { families: ['Pixelify Sans'] }, active: () => { this.fontLoaded(); } }); } fontLoaded() { this.add.rectangle(0, 0, 800, 600, 0x000000).setOrigin(0, 0).setDepth(0); this.add.text(400, 50, 'Auction House', { fontFamily: 'Pixelify Sans', fontSize: '32px', fill: '#fff' }).setOrigin(0.5).setDepth(3); this.balanceText = this.add.text(550, 80, `Balance: $${this.playerBalance}`, { fontFamily: 'Pixelify Sans', fontSize: '16px', fill: '#fff' }).setOrigin(0, 0.5).setDepth(3); this.listingsCountText = this.add.text(10, 80, `Listings: ${this.listings.length}/${this.maxListings}`, { fontFamily: 'Pixelify Sans', fontSize: '16px', fill: '#fff' }).setOrigin(0, 0.5).setDepth(3); this.pageText = this.add.text(400, 520, `Page ${this.currentPage}/${Math.ceil(this.listings.length / this.listingsPerPage)}`, { fontFamily: 'Pixelify Sans', fontSize: '24px', fill: '#fff' }).setOrigin(0.5).setDepth(3); this.scrollableArea = this.add.container(0, 100); this.scrollableArea.setDepth(2); const mask = this.add.graphics() .fillStyle(0xffffff) .fillRect(0, 100, 800, 400); mask.setDepth(1); this.scrollableArea.setMask(new Phaser.Display.Masks.GeometryMask(this, mask)); // Add a background for the scrollable area const background = this.add.rectangle(0, 0, 800, 400, 0xd1c396); background.setOrigin(0) this.scrollableArea.add(background); // Initialize the listings container this.listingsContainer = this.add.container(50, 0); this.scrollableArea.add(this.listingsContainer); // Add pagination buttons this.prevButton = this.add.text(50, 520, '< Prev', { fontFamily: 'Pixelify Sans', fontSize: '24px', fill: '#fff' }) .setInteractive() .on('pointerdown', () => this.changePage(-1)) .setOrigin(0.5); this.nextButton = this.add.text(750, 520, 'Next >', { fontFamily: 'Pixelify Sans', fontSize: '24px', fill: '#fff' }) .setInteractive() .on('pointerdown', () => this.changePage(1)) .setOrigin(0.5); // Add refresh button this.refreshButton = this.add.text(400, 80, 'Refresh', { fontFamily: 'Pixelify Sans', fontSize: '24px', fill: '#fff' }) .setInteractive() .on('pointerdown', () => this.refreshListings()) .setOrigin(0.5); this.input.on('wheel', (pointer, gameObjects, deltaX, deltaY, deltaZ) => { const totalHeight = 50 * 30; const visibleHeight = 400; if (totalHeight > visibleHeight) { const newY = this.listingsContainer.y - deltaY; const maxY = 0; const minY = visibleHeight - totalHeight; this.listingsContainer.y = Phaser.Math.Clamp(newY, minY, maxY); } }); this.createVirtualUsers(); this.createInitialListings(); } changePage(direction) { const totalPages = Math.ceil(this.listings.length / this.listingsPerPage); this.currentPage += direction; if (this.currentPage < 1) this.currentPage = 1; if (this.currentPage > totalPages) this.currentPage = totalPages; this.listingsContainer.y = 0; this.updateListingsDisplay(); this.updatePageText(); } updatePageText() { const totalPages = Math.ceil(this.listings.length / this.listingsPerPage); this.pageText.setText(`Page ${this.currentPage}/${totalPages}`); } createVirtualUsers() { const names = ['Alice', 'Bob', 'Charlie', 'David', 'Eve']; for (let i = 0; i < 5; i++) { this.virtualUsers.push({ name: names[i], balance: Phaser.Math.Between(1000, 5000) }); } } createInitialListings() { for (let i = 0; i < 10; i++) { this.addRandomListing(); } } addRandomListing() { const itemType = Math.random() < 0.5 ? 'armor' : 'weapon'; const itemName = Phaser.Utils.Array.GetRandom(Object.keys(itemType === 'armor' ? armor : weapons)); const price = this.calculateItemPrice(itemType, itemName); const quantity = Phaser.Math.Between(1, 10); this.addListing(itemName, price, quantity); } calculateItemPrice(itemType, itemName) { const recipe = itemType === 'armor' ? armor[itemName].precursor_items : weapons[itemName].precursor_items; let totalPrice = 0; for (const [precursor, quantity] of Object.entries(recipe)) { totalPrice += materials[precursor].basePrice * quantity; } const markup = 1 + Math.random() * 0.4 + 0.1; return Math.round(totalPrice * markup); } addListing(item, price, quantity) { if (this.listings.length >= this.maxListings - 5) { this.removeOldestListing(); } this.listingCounter++; const newListing = new Listing(this.listingCounter, item, price, quantity, this.time.now); this.listings.push(newListing); this.updateListingsDisplay(); this.updateListingsCountDisplay(); this.updatePageText(); } removeOldestListing() { if (this.listings.length > 0) { this.listings.sort((a, b) => a.createdAt - b.createdAt); this.listings.shift(); } } updateListingsDisplay() { this.listingsContainer.removeAll(true); const startIndex = (this.currentPage - 1) * this.listingsPerPage; const endIndex = Math.min(startIndex + this.listingsPerPage, this.listings.length); for (let i = startIndex; i < endIndex; i++) { const listing = this.listings[i]; const y = (i - startIndex) * 30; listing.display(this, this.listingsContainer, 0, y); } // Maintain scroll position const totalHeight = this.listings.length * 30; const visibleHeight = 400; const maxY = 0; const minY = visibleHeight - totalHeight; this.listingsContainer.y = Phaser.Math.Clamp(this.listingsContainer.y, minY, maxY); } buyListing(id) { const listing = this.listings.find(l => l.id === id); if (listing) { this.scene.launch('PurchaseConfirmScene', { listing: listing, parentScene: this, playerBalance: this.playerBalance }); } } completePurchase(id, quantity) { const index = this.listings.findIndex(listing => listing.id === id); if (index === -1) return; const listing = this.listings[index]; const totalPrice = listing.price * quantity; if (this.playerBalance >= totalPrice) { this.playerBalance -= totalPrice; console.log(`Player bought ${quantity} ${listing.item}(s) for $${totalPrice}`); listing.quantity -= quantity; if (listing.quantity <= 0) { this.listings.splice(index, 1); } this.updateListingsDisplay(); this.updateBalanceDisplay(); this.updateListingsCountDisplay(); this.updatePageText(); } else { console.log("Not enough balance to buy this item"); } } updateBalanceDisplay() { this.balanceText.setText(`Balance: $${this.playerBalance}`); } simulateTransaction() { const user = this.getRandomUser(); if (Math.random() > 0.7) { this.addRandomListing(); } else { this.simulatePurchase(user); } } updateListingsCountDisplay() { this.listingsCountText.setText(`Listings: ${this.listings.length}/${this.maxListings}`); } refreshListings() { const batchSize = 100; const totalBatches = Math.ceil(this.simQuantity / batchSize); // Show loading bar this.createLoadingBar(); // Disable the refresh button while processing this.refreshButton.disableInteractive(); const simulateBatch = (batchIndex) => { const start = batchIndex * batchSize; const end = Math.min(start + batchSize, this.simQuantity); for (let i = start; i < end; i++) { this.simulateTransaction(); } // Update loading bar progress this.loadingBar.setProgress((batchIndex + 1) / totalBatches); if (batchIndex < totalBatches - 1) { // Schedule next batch this.time.delayedCall(10, () => simulateBatch(batchIndex + 1)); } else { // All batches complete this.updateListingsDisplay(); this.updateListingsCountDisplay(); this.updatePageText(); // Hide loading bar this.loadingBar.destroy(); this.loadingBar = null; // Re-enable the refresh button this.refreshButton.setInteractive(); } }; // Start the first batch simulateBatch(0); } createLoadingBar() { const width = 400; const height = 40; const x = this.cameras.main.width / 2; const y = this.cameras.main.height / 2; // Create a container for the loading bar this.loadingBar = this.add.container(x, y); this.loadingBar.setDepth(1000); // Ensure it's above other elements // Add a semi-transparent background const background = this.add.rectangle(0, 0, this.cameras.main.width, this.cameras.main.height, 0x000000, 0.7); this.loadingBar.add(background); // Create the gray background of the loading bar const barBackground = this.add.rectangle(0, 0, width, height, 0x808080); this.loadingBar.add(barBackground); // Create the green part of the loading bar (initially empty) const bar = this.add.rectangle(-width / 2, 0, 0, height, 0x00ff00); bar.setOrigin(0, 0.5); this.loadingBar.add(bar); // Add loading text const loadingText = this.add.text(0, -50, 'Loading...', { fontFamily: 'Pixelify Sans', fontSize: '24px', fill: '#ffffff' }).setOrigin(0.5); this.loadingBar.add(loadingText); // Set the progress method this.loadingBar.setProgress = (value) => { bar.width = width * value; }; this.loadingBar.setProgress(0); } simulatePurchase(user) { if (this.listings.length > 0) { const listingIndex = Math.floor(Math.random() * this.listings.length); const listing = this.listings[listingIndex]; if (user.balance >= listing.price) { user.balance -= listing.price; listing.quantity--; if (listing.quantity <= 0) { this.listings.splice(listingIndex, 1); } } } } getRandomUser() { return this.virtualUsers[Math.floor(Math.random() * this.virtualUsers.length)]; } } const container = document.getElementById('renderDiv'); const config = { type: Phaser.WEBGL, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 } } }, scene: [AuctionHouse], canvas: document.createElement('canvas'), canvasStyle: 'display: block; width: 100%; height: 100%;', backgroundColor: '#000000' }; config.canvas.willReadFrequently = true; window.phaserGame = new Phaser.Game(config);