Another refactor

src/ui/components/PersistentButtonsComponent.ts

@@ -0,0 +1,48 @@
+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");
+  }
+}