96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
import Phaser from "phaser";
|
|
|
|
export class PersistentButtonsComponent {
|
|
private scene: Phaser.Scene;
|
|
private container!: Phaser.GameObjects.Container;
|
|
|
|
constructor(scene: Phaser.Scene) {
|
|
this.scene = scene;
|
|
}
|
|
|
|
create() {
|
|
const { height } = this.scene.scale;
|
|
this.container = this.scene.add.container(20, height - 20);
|
|
|
|
this.container.setScrollFactor(0).setDepth(1500);
|
|
|
|
const btnStyle = {
|
|
fontSize: "14px",
|
|
color: "#ffffff",
|
|
backgroundColor: "#1a1a1a",
|
|
padding: { x: 10, y: 6 },
|
|
fontStyle: "bold"
|
|
};
|
|
|
|
const createBtn = (x: number, text: string, event: string) => {
|
|
const btn = this.scene.add.text(x, 0, text, btnStyle)
|
|
.setOrigin(0, 1)
|
|
.setInteractive({ useHandCursor: true });
|
|
|
|
btn.on("pointerover", () => btn.setBackgroundColor("#333333"));
|
|
btn.on("pointerout", () => btn.setBackgroundColor("#1a1a1a"));
|
|
btn.on("pointerdown", () => {
|
|
btn.setBackgroundColor("#444444");
|
|
const gameScene = this.scene.scene.get("GameScene");
|
|
gameScene.events.emit(event);
|
|
});
|
|
btn.on("pointerup", () => btn.setBackgroundColor("#333333"));
|
|
|
|
this.container.add(btn);
|
|
return btn;
|
|
};
|
|
|
|
createBtn(0, "MENU (ESC)", "toggle-menu");
|
|
createBtn(105, "STATS (C)", "toggle-character");
|
|
createBtn(200, "BACKPACK (I)", "toggle-inventory");
|
|
createBtn(320, "MAP (M)", "toggle-minimap");
|
|
|
|
// Right-aligned buttons
|
|
const rightContainer = this.scene.add.container(this.scene.scale.width - 20, height - 20);
|
|
rightContainer.setScrollFactor(0).setDepth(1500);
|
|
|
|
const waitBtn = this.scene.add.text(0, 0, "🕒", {
|
|
fontSize: "24px",
|
|
color: "#ffffff",
|
|
backgroundColor: "#1a1a1a",
|
|
padding: { x: 10, y: 6 },
|
|
fontStyle: "bold"
|
|
})
|
|
.setOrigin(1, 1)
|
|
.setInteractive({ useHandCursor: true });
|
|
|
|
const searchBtn = this.scene.add.text(-40, 0, "🔍", { // Offset to the left of wait button
|
|
fontSize: "24px",
|
|
color: "#ffffff",
|
|
backgroundColor: "#1a1a1a",
|
|
padding: { x: 10, y: 6 },
|
|
fontStyle: "bold"
|
|
})
|
|
.setOrigin(1, 1)
|
|
.setInteractive({ useHandCursor: true });
|
|
|
|
waitBtn.on("pointerover", () => waitBtn.setBackgroundColor("#333333"));
|
|
waitBtn.on("pointerout", () => waitBtn.setBackgroundColor("#1a1a1a"));
|
|
waitBtn.on("pointerdown", () => {
|
|
waitBtn.setBackgroundColor("#444444");
|
|
const gameScene = this.scene.scene.get("GameScene");
|
|
gameScene.events.emit("player-wait");
|
|
});
|
|
waitBtn.on("pointerup", () => waitBtn.setBackgroundColor("#333333"));
|
|
|
|
searchBtn.on("pointerover", () => searchBtn.setBackgroundColor("#333333"));
|
|
searchBtn.on("pointerout", () => searchBtn.setBackgroundColor("#1a1a1a"));
|
|
searchBtn.on("pointerdown", () => {
|
|
searchBtn.setBackgroundColor("#444444");
|
|
// Implementing search visual logic later, for now just log
|
|
console.log("Searching...");
|
|
const gameScene = this.scene.scene.get("GameScene");
|
|
gameScene.events.emit("player-search");
|
|
});
|
|
searchBtn.on("pointerup", () => searchBtn.setBackgroundColor("#333333"));
|
|
|
|
rightContainer.add(waitBtn);
|
|
rightContainer.add(searchBtn);
|
|
}
|
|
}
|