brianfertig
/
Fablewood
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated to include inventory and craft boxes

This commit is contained in:
Brian Fertig 2025-08-19 21:53:07 -06:00
parent 8d1b1d8d19
commit 5856c61f67
7 changed files with 213 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/craftDrop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
assets/images/inventory.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

219
src/inventory.js
View File

@ -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.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.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,

2
src/main.js
View File

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

5
src/objects.js
View File

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

3
src/scenes/Game.js
View File

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

8
src/scenes/MenuScene.js
View File

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