Show health status for planet

resources/js/game/objects/Planet.js

@@ -6,7 +6,10 @@ const DEFAULT_HEALTH = 100,
   DEFAULT_HIT_BOX_RADIUS = 270,
   DEFAULT_HIT_BOX_RADIUS = 270,
   DEFAULT_PLANET_COLOR = "#900c47",
   DEFAULT_PLANET_COLOR = "#900c47",
   DEFAULT_PLANET_BORDER_COLOR = "#dafffe",
   DEFAULT_PLANET_BORDER_COLOR = "#dafffe",
-  DEFAULT_PLANET_BORDER_WIDTH = "20";
+  DEFAULT_PLANET_BORDER_WIDTH = "20",
+  DEFAULT_PLANET_TEXT_OFFSET = 20,
+  DEFAULT_PLANET_TEXT_FONT = "32px ShareTech",
+  DEFAULT_PLANET_TEXT_COLOR = "#FFF";
 
 
 class Planet extends GameObject {
 class Planet extends GameObject {
 
 
@@ -20,6 +23,7 @@ class Planet extends GameObject {
 
 
   draw(context) {
   draw(context) {
     context.save();
     context.save();
+    // Draw planet
     context.fillStyle = this.color;
     context.fillStyle = this.color;
     context.strokeStyle = this.borderColor;
     context.strokeStyle = this.borderColor;
     context.lineWidth = this.borderWidth;
     context.lineWidth = this.borderWidth;
@@ -29,6 +33,14 @@ class Planet extends GameObject {
     context.closePath();
     context.closePath();
     context.fill();
     context.fill();
     context.stroke();
     context.stroke();
+    // Draw current shield/health status
+    context.beginPath();
+    context.font = DEFAULT_PLANET_TEXT_FONT;
+    context.fillStyle = DEFAULT_PLANET_TEXT_COLOR;
+    context.textAlign = "center";
+    context.fillText(`Shields at ${this.health}%`, this.x, this.y -
+      DEFAULT_PLANET_TEXT_OFFSET);
+    context.closePath();
     context.restore();
     context.restore();
   }
   }