Updated to include inventory and craft boxes

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.image(1130,570,'inventory').setOrigin(0.5).setScrollFactor(0).setDepth(150).setScale(0);
-        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);
         
         // Create close button
         this.closeButton = scene.add.rectangle(
-            scene.game.config.width / 2 + 180,
+            705,
-            scene.game.config.height / 2 - 130,
+            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,
+            668,
-            scene.game.config.height / 2 - 130,
+            85,
-            'X',
+            'Close  X',
-            { fontSize: '24px', fill: '#FFFFFF' }
+            { 
+                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.backpackIcon.setVisible(false);
-            this.closeButtonText.setVisible(true);
+            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.backpackIcon.setVisible(true);
-                this.scene.player.canMove = 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,

src/main.js

@@ -20,7 +20,7 @@ const config = {
     },
     backgroundColor: '#000000',
     scene: [
-        MenuScene,
+        //MenuScene,
         // Intro,
         // Tutorial,
         Game

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();
                     }

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');

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'
                         }
                     );