diff --git a/assets/images/craftDrop.png b/assets/images/craftDrop.png new file mode 100644 index 0000000..2688b5d Binary files /dev/null and b/assets/images/craftDrop.png differ diff --git a/assets/images/inventory.png b/assets/images/inventory.png new file mode 100644 index 0000000..2aee984 Binary files /dev/null and b/assets/images/inventory.png differ diff --git a/src/inventory.js b/src/inventory.js index fb9ffe1..f409315 100644 --- a/src/inventory.js +++ b/src/inventory.js @@ -22,7 +22,6 @@ export class InventoryManager { // Add click event to toggle inventory this.backpackIcon.setInteractive(); this.backpackIcon.on('pointerdown', () => { - console.log('hit'); this.toggleInventory(); }); } @@ -30,19 +29,12 @@ export class InventoryManager { createInventoryUI() { const scene = this.scene; - // Create inventory background - this.inventoryUI = scene.add.rectangle( - scene.game.config.width / 2, - scene.game.config.height / 2, - 400, - 300, - 0x2F4F4F - ).setOrigin(0.5).setAlpha(0.9).setScrollFactor(0).setDepth(150); + this.inventoryUI = scene.add.image(1130,570,'inventory').setOrigin(0.5).setScrollFactor(0).setDepth(150).setScale(0); // Create close button this.closeButton = scene.add.rectangle( - scene.game.config.width / 2 + 180, - scene.game.config.height / 2 - 130, + 705, + 85, 30, 30, 0xFF4444 @@ -50,10 +42,14 @@ export class InventoryManager { // Add X to close button this.closeButtonText = scene.add.text( - scene.game.config.width / 2 + 180, - scene.game.config.height / 2 - 130, - 'X', - { fontSize: '24px', fill: '#FFFFFF' } + 668, + 85, + 'Close X', + { + fontSize: '24px', + fill: '#FFFFFF', + fontFamily: 'eraserDust, Arial', + } ).setOrigin(0.5).setScrollFactor(0).setDepth(150); // Hide inventory UI initially @@ -76,26 +72,211 @@ export class InventoryManager { this.scene.player.canMove = false; // Show inventory UI and close button this.inventoryUI.setVisible(true); - this.closeButton.setVisible(true); - this.closeButtonText.setVisible(true); + this.backpackIcon.setVisible(false); + this.scene.tweens.add({ + targets: this.inventoryUI, + scale: 1, + angle: 360, + duration: 400, + x: 640, + y: 360, + onComplete: ()=> { + this.closeButton.setVisible(true); + this.closeButtonText.setVisible(true); + this.showInventory(); + } + }); } else { // Hide inventory UI and close button - this.inventoryUI.setVisible(false); this.closeButton.setVisible(false); this.closeButtonText.setVisible(false); - this.scene.time.delayedCall(200, () => { - this.scene.player.canMove = true; + this.backpackIcon.setVisible(true); + + // Destroy all items in the inventory display group + if (this.inventoryDisplay) { + this.inventoryDisplay.clear(true, true); // Clear group and destroy children + } + + this.scene.tweens.add({ + targets: this.inventoryUI, + scale: 0, + angle: 360, + duration: 400, + x: 1130, + y: 570, + onComplete: () => { + this.inventoryUI.setVisible(false); + this.scene.player.canMove = true; + this.inventoryDisplay = null; + } }); } } + showInventory() { + // Add X to close button + this.inventoryBG = this.scene.add.rectangle( + 225, + 195, + 820, + 200, + 0x000000, + .6 + ).setOrigin(0).setScrollFactor(0).setDepth(155).setAlpha(0.6); + + this.inventoryCraftOne = this.scene.add.image(225,405, 'craftDrop').setOrigin(0).setScrollFactor(0).setDepth(156); + this.inventoryCraftTwo = this.scene.add.image(450,405, 'craftDrop').setOrigin(0).setScrollFactor(0).setDepth(156); + + // Add circular button with plus symbol between craft slots + this.craftButton = this.scene.add.circle( + 437, // Centered between the two craft slots (225 + 225)/2 = 225, but we want it at x=337.5 which is halfway between both slots + 475, + 40, // 100px diameter circle + 0x00FF00, // Green color for the button + 0.6 // Alpha .6 + ).setOrigin(0.5).setScrollFactor(0).setDepth(157); + + this.craftButtonText = this.scene.add.text( + 437, + 475, + 'Craft', + { + fontSize: '28px', + fill: '#FFFFFF', + fontFamily: 'eraserDust, Arial', + } + ).setOrigin(0.5).setScrollFactor(0).setDepth(158); + + // Make the button interactive + this.craftButton.setInteractive(); + this.craftButton.on('pointerdown', () => { + console.log('Craft button clicked'); + // Add craft functionality here + }); + + // Display inventory items + let yPosition = 215; + let xStart = 245; + let row = 0; + + this.inventoryDisplay = this.scene.physics.add.group(); + this.inventoryDisplay.add(this.inventoryBG); + this.inventoryDisplay.add(this.craftButton); + this.inventoryDisplay.add(this.craftButtonText); + this.inventoryDisplay.add(this.inventoryCraftOne); + this.inventoryDisplay.add(this.inventoryCraftTwo); + + for (const [itemType, itemData] of Object.entries(this.inventory)) { + const { amount, sprite } = itemData; + + // Create sprite + const itemSprite = this.scene.physics.add.sprite(xStart, yPosition, 'objects', sprite) + .setOrigin(0.5) + .setScale(0.5) + .setScrollFactor(0) + .setDepth(160); + + // Make the item draggable + itemSprite.setInteractive(); + this.scene.input.setDraggable(itemSprite); + + // Add drag events + itemSprite.on('dragstart', (pointer, dragX, dragY) => { + // Bring to front when dragging + itemSprite.setDepth(200); + + // Create a temporary visual clone for dragging + this.dragClone = this.scene.add.sprite(dragX, dragY, 'objects', sprite) + .setOrigin(0.5) + .setScale(0.5) + .setScrollFactor(0) + .setDepth(210); + }); + + itemSprite.on('drag', (pointer, dragX, dragY) => { + // Move the clone with the mouse + if (this.dragClone) { + this.dragClone.setPosition(dragX, dragY); + } + }); + + itemSprite.on('dragend', (pointer, dragX, dragY) => { + // Remove the clone + if (this.dragClone) { + this.dragClone.destroy(); + this.dragClone = null; + } + + // Reset item depth + itemSprite.setDepth(160); + + // Check if dropped on a craft slot + const craftOneBounds = this.inventoryCraftOne.getBounds(); + const craftTwoBounds = this.inventoryCraftTwo.getBounds(); + + if (Phaser.Geom.Rectangle.ContainsPoint(craftOneBounds, pointer.position)) { + console.log(`Dropped ${itemType} onto Craft Slot 1`); + // Handle drop on craft slot 1 + } else if (Phaser.Geom.Rectangle.ContainsPoint(craftTwoBounds, pointer.position)) { + console.log(`Dropped ${itemType} onto Craft Slot 2`); + // Handle drop on craft slot 2 + } + }); + + // Create item name text + const itemName = this.scene.add.text( + xStart + 40, + yPosition - 10, + itemType.charAt(0).toUpperCase() + itemType.slice(1), + { + fontSize: '16px', + fill: '#FFFFFF', + fontFamily: 'eraserDust, Arial', + } + ).setOrigin(0).setScrollFactor(0).setDepth(160); + + // Create quantity text + const itemQuantity = this.scene.add.text( + xStart + 40, + yPosition + 15, + `x${amount}`, + { + fontSize: '14px', + fill: '#FFFF00', + fontFamily: 'eraserDust, Arial', + } + ).setOrigin(0).setScrollFactor(0).setDepth(160); + + this.inventoryDisplay.add(itemSprite); + this.inventoryDisplay.add(itemName); + this.inventoryDisplay.add(itemQuantity); + + // Move to next row + yPosition += 50; + row ++; + if (row === 3) { + row = 0; + yPosition = 215; + xStart += 200; + } + } + + // Make craft slots interactive for drop targets + this.inventoryCraftOne.setInteractive(); + this.inventoryCraftTwo.setInteractive(); + } + addItem(item) { const type = item.props.type; const amount = item.props.amount; + const sprite = item.props.sprite; if (type in this.inventory) { - this.inventory[type] += amount; + this.inventory[type].amount += amount; } else { - this.inventory[type] = amount; + this.inventory[type] = { + amount: amount, + sprite: sprite + } } this.scene.tweens.add({ targets: this.backpackIcon, diff --git a/src/main.js b/src/main.js index 30579e4..ff8ed72 100644 --- a/src/main.js +++ b/src/main.js @@ -20,7 +20,7 @@ const config = { }, backgroundColor: '#000000', scene: [ - MenuScene, + //MenuScene, // Intro, // Tutorial, Game diff --git a/src/objects.js b/src/objects.js index 63cfcbb..e988bf9 100644 --- a/src/objects.js +++ b/src/objects.js @@ -123,7 +123,7 @@ export class ObjectManager { type: key, health: 1, fullHealth: 1, - yield: 'seaShell', + yield: 'glass', amount: [1,1], doneSprite: null, dropSprite: 18 @@ -255,7 +255,8 @@ export class ObjectManager { this.scene.items.add(drop); drop.props = { type: object.props.yield, - amount: amount + amount: amount, + sprite: sprite }; drop.setInteractive(); } diff --git a/src/scenes/Game.js b/src/scenes/Game.js index 8d3d2d7..a87fb84 100644 --- a/src/scenes/Game.js +++ b/src/scenes/Game.js @@ -25,7 +25,8 @@ export class Game extends Phaser.Scene { // Images this.load.image('terrain-tileset', 'assets/images/terrain.png'); this.load.image('backpack', 'assets/images/backpack.png'); - + this.load.image('inventory', 'assets/images/inventory.png'); + this.load.image('craftDrop', 'assets/images/craftDrop.png'); // FX this.load.audio('chop', 'assets/fx/chop.mp3'); this.load.audio('zip', 'assets/fx/zip.mp3'); diff --git a/src/scenes/MenuScene.js b/src/scenes/MenuScene.js index 7be76cf..335c73c 100644 --- a/src/scenes/MenuScene.js +++ b/src/scenes/MenuScene.js @@ -48,16 +48,16 @@ export class MenuScene extends Phaser.Scene { const logo = this.physics.add.image(610, 225, 'logo').setScale(0).setOrigin(0.5); this.tweens.add({ targets: logo, - angle: 360, scale: .65, duration: 3500, - ease: 'Bounce', + ease: 'Quad', onComplete: () => { this.tweens.add({ targets: logo, scale: .7, y: 250, yoyo: true, + ease: 'Linear', repeat: -1, duration: 3000 }); @@ -68,7 +68,7 @@ export class MenuScene extends Phaser.Scene { { fontFamily: 'eraserDust, Arial', fontSize: '32px', - color: '#ffffff', + color: '#acff93ff', align: 'center' } ); @@ -80,7 +80,7 @@ export class MenuScene extends Phaser.Scene { { fontFamily: 'eraserDust, Arial', fontSize: '32px', - color: '#ffffff', + color: '#f1a9ffff', align: 'center' } );