update code

src/health_bar/app.js

@@ -76,7 +76,7 @@ function initLevel() {
   Game.objects.attackButton.y = 300;
 
   Game.objects.attackButton.interactive = true;
-  Game.objects.attackButton.buttonMode = true;
+  Game.objects.attackButton.cursor = 'pointer';
   Game.objects.attackButton.on('click', (event) => {
     if (Game.enemyHp >= 10)
       Game.enemyHp -= 10;
@@ -84,12 +84,20 @@ function initLevel() {
       Game.enemyHp = 100;
   });
 
+  Game.objects.buttonText = new PIXI.Text('Attack!');
+  Game.objects.buttonText.style.fontSize = 30;
+  Game.objects.buttonText.style.fontStyle = 'bold';
+  Game.objects.buttonText.anchor.set(0.5);
+  Game.objects.buttonText.x = app.screen.width / 2;
+  Game.objects.buttonText.y = Game.objects.attackButton.y - 4;
+
   Game.objects.fillContainer.addChild(Game.objects.hpFill);
   app.stage.addChild(Game.objects.hpBar);
   app.stage.addChild(Game.objects.fillContainer);
   app.stage.addChild(Game.objects.label);
   app.stage.addChild(Game.objects.hpText);
   app.stage.addChild(Game.objects.attackButton);
+  app.stage.addChild(Game.objects.buttonText);
 
   app.ticker.add(gameLoop);
 }
@@ -100,10 +108,10 @@ function gameLoop(delta) {
   Game.objects.hpText.text = `Enemy HP: ${Game.enemyHp}`;
 
   Game.objects.fillContainer.mask = new PIXI.Graphics()
-     .beginFill(0xffffff)
-     .drawRect(Game.objects.hpFill.x - (Game.objects.hpFill.width / 2),
+    .beginFill(0xffffff)
+    .drawRect(Game.objects.hpFill.x - (Game.objects.hpFill.width / 2),
       Game.objects.hpFill.y - (Game.objects.hpFill.height / 2),
-        (Game.enemyHp * Game.objects.hpFill.width / 100),
-        Game.objects.hpFill.height)
-     .endFill();
+      Game.enemyHp * Game.objects.hpFill.width / 100,
+      Game.objects.hpFill.height)
+    .endFill();
 }