Hi all. I’m trying to remove items from an inventory as you use them items, and I’m having some trouble understanding how to get it working.
class Inventory {
constructor() {
this.items = [
{ name: "Potion", quantity: 2 },
{ name: "Remedy", quantity: 3 }
];
// this.addItem({ name: "Potion", quantity: 10 });
}
addItem(item) {
let existingKey = Object.keys(this.items).find(
(key) => this.items[key].name === item.name
);
if (existingKey) {
console.log("key exists");
this.items[existingKey].quantity += item.quantity;
} else {
this.items.push(item);
}
}
removeItem(item) {
let existingKey = Object.keys(this.items).find(
(key) => this.items[key].name === item.name
);
if (existingKey) {
console.log("key exists");
this.items[existingKey].quantity -= item.quantity;
} else {
// something here to delete the item?
}
}
}
let InventoryScene = new Phaser.Class({
Extends: Phaser.Scene,
initialize: function () {
Phaser.Scene.call(this, { key: "InventoryScene" });
},
init: function (data) {
this.inventory = data.inventory.inventory;
},
preload: function () {
this.load.scenePlugin({
key: "rexuiplugin",
url: url,
sceneKey: "rexUI"
});
},
refresh: function () {
this.list = createList(
this,
800 / 2,
60,
this.inventory.items,
(button) => {
let data = { button: button };
this.scene.pause();
this.scene.launch("UseMenuScene", data);
},
() => {
// console.log("outt!!!")
console.log(this.pointer)
}
);
},
create: function () {
this.menuKeys = this.input.keyboard.addKeys("M");
this.text = this.add
.text(800 / 2, 20, "inventory scene")
.setOrigin(0.5, 0.5);
let scene = this;
console.log(this.inventory.items);
this.pointer = this.input.activePointer
this.refresh()
},
update: function () {
if (Phaser.Input.Keyboard.JustDown(this.menuKeys.M)) {
this.scene.wake("InGameMenuScene");
this.scene.resume("InGameMenuScene");
this.scene.sleep();
}
}
});
let UseMenuScene = new Phaser.Class({
Extends: Phaser.Scene,
initialize: function () {
Phaser.Scene.call(this, { key: "UseMenuScene" });
},
init: function (data) {
this.itemPressed = data.button;
this.isTouching = false
},
preload: function () {
this.load.scenePlugin({
key: "rexuiplugin",
url: url,
sceneKey: "rexUI"
});
},
create: function () {
this.menuKeys = this.input.keyboard.addKeys("M");
this.pointer = this.input.activePointer
let items = [{ name: "Use" }, { name: "Equip" }];
this.menu = createUseMenu(this, this.itemPressed.x, this.itemPressed.y, items)
this.menu.on("button.over", (button) => {
button.getElement("background").setStrokeStyle(2, 0xffffff);
this.isTouching = true
})
this.menu.on("button.out", (button) => {
button.getElement("background").setStrokeStyle();
this.isTouching = false
})
this.menu.on("button.click", (button) => {
this.isTouching = false
if (this.itemPressed.childrenMap.text._text == "Potion") {
if (button.childrenMap.text._text == "Use") {
let gameUIScene = this.scene.get("GameUIScene")
gameUIScene.usePotion()
let inventoryScene = this.scene.get("InventoryScene")
console.log("needs to be destroyed")
inventoryScene.inventory.removeItem("Potion")
inventoryScene.refresh()
this.isTouching = false
this.scene.resume("InventoryScene")
this.scene.sleep()
this.menu.destroy()
}
}
})
},
update: function () {
if (this.isTouching == false) {
this.input.on("pointerdown", () => {
this.scene.resume("InventoryScene")
this.scene.sleep()
this.menu.destroy()
})
}
if (this.isTouching == true) {
this.input.off("pointerdown")
}
if (Phaser.Input.Keyboard.JustDown(this.menuKeys.M)) {
this.menu.destroy();
this.scene.resume("InventoryScene");
this.scene.sleep();
}
}
});
I can decrease the quantity of my items inside the click event of the use button by calling the inventory items, but I would assume it would be done in the Inventory class itself. So I made a removeItem function in the inventory class. I already had a addItem function which worked so I used the same code. I had attempted this a few hours earlier but I ran into a problem. I could remove the item from the inventory, but it would not destroy itself in the ui.
I’ve tried it again in codepen, and I’ve gone further away from solving the problem now that I can’t delete it from the inventory but also remove the button graphic that I’m using. This is using the RexRainbow ui plugins incase anyone was wondering. Heres the codepen here
My understanding of model and view concepts applying them in a practical way in JS has been shaky at best and has gotten me more than a bit confused. If anyone could suggest me any help or advice, or some critiquing of my knowledge of any of this, it would help heaps and would be much appreciate it.