feat: implemented status bars for player

src/Wolfie2D/Nodes/Graphics/Rect.ts

@@ -11,12 +11,15 @@ export default class Rect extends Graphic {
     /** The width of the border */
     borderWidth: number;
 
+    fillWidth: number;
+
     constructor(position: Vec2, size: Vec2){
         super();
         this.position = position;
         this.size = size;
         this.borderColor = Color.TRANSPARENT;
         this.borderWidth = 0;
+        this.fillWidth = null;
     }
 
     /**

src/Wolfie2D/Rendering/CanvasRendering/GraphicRenderer.ts

@@ -59,8 +59,12 @@ export default class GraphicRenderer {
         // Draw the interior of the rect
         if(rect.color.a !== 0){
             this.ctx.fillStyle = rect.color.toStringRGB();
+            if (rect.fillWidth !== null) {
+                this.ctx.fillRect((-rect.size.x/2)*zoom, (-rect.size.y/2)*zoom, rect.fillWidth*zoom, rect.size.y*zoom);
+            } else {
                 this.ctx.fillRect((-rect.size.x/2)*zoom, (-rect.size.y/2)*zoom, rect.size.x*zoom, rect.size.y*zoom);
             }
+        }
 
         // Draw the border of the rect if it isn't transparent
         if(rect.borderColor.a !== 0){

src/shattered_sword/Scenes/GameLevel.ts

@@ -70,11 +70,14 @@ export default class GameLevel extends Scene {
 
     // Health UI
     protected healthLabel: Label;
+    protected healthBar: Rect;
     //exp label
     protected expLabel : Label;
+    protected expBar: Rect;
 
     //shield label
     protected shieldLabel : Label;
+    protected shieldBar: Rect;
 
     //seed UI
     protected seedLabel: Label;   
@@ -333,14 +336,32 @@ export default class GameLevel extends Scene {
         //update health UI 
         let playerAI = (<PlayerController>this.player.ai);
         this.healthLabel.text = "Health: "+ playerAI.CURRENT_HP +'/' + (playerAI.MAX_HP +playerAI.CURRENT_BUFFS.hp );
+        this.healthBar.size.set(playerAI.MAX_HP*2, 10);
+        this.healthBar.position.set(playerAI.MAX_HP+50, 20);
+        this.healthBar.fillWidth = playerAI.CURRENT_HP*2;
+        if (playerAI.CURRENT_HP/playerAI.MAX_HP >= 2/3) {
+            this.healthBar.color = Color.GREEN;
+            this.healthLabel.textColor = Color.GREEN;
+        }
+        else if (playerAI.CURRENT_HP/playerAI.MAX_HP >= 1/3) {
+            this.healthBar.color = Color.YELLOW;
+            this.healthLabel.textColor = Color.YELLOW;
+        }
+        else {
+            this.healthBar.color = Color.RED;
+            this.healthLabel.textColor = Color.RED;
+        }
         // this.healthLabel.sizeToText();
 
         //update shield ui
         this.shieldLabel.text = "Shield: "+ playerAI.CURRENT_SHIELD +'/' + (playerAI.MAX_SHIELD);
+        this.shieldBar.size.set(playerAI.CURRENT_SHIELD*2, 10);
+        this.shieldBar.position.set(playerAI.CURRENT_SHIELD+50, 60);
         // this.shieldLabel.sizeToText();
 
         //update exp ui
         this.expLabel.text = "EXP: "+ playerAI.CURRENT_EXP +'/' + (playerAI.MAX_EXP);
+        this.expBar.fillWidth = (playerAI.CURRENT_EXP/playerAI.MAX_EXP)*200;
         // this.expLabel.sizeToText();
 
         
@@ -448,23 +469,35 @@ export default class GameLevel extends Scene {
      */
     protected addUI(){
         // In-game labels
-        this.healthLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 30), text: "Player Health: "+ (<PlayerController>this.player.ai).CURRENT_HP });
+        this.healthLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 40), text: "Player Health: "+ (<PlayerController>this.player.ai).CURRENT_HP });
         this.healthLabel.size.set(200, 50);
         this.healthLabel.setHAlign(HAlign.LEFT);
-        this.healthLabel.textColor = Color.WHITE;
+        this.healthLabel.textColor = Color.GREEN;
         this.healthLabel.font = "PixelSimple";
+        this.healthBar = <Rect>this.add.graphic(GraphicType.RECT, "UI", {position: new Vec2(100+150, 20), size: new Vec2(400, 10)});
+        this.healthBar.borderColor = Color.BLACK;
+        this.healthBar.borderWidth = 3;
+        this.healthBar.color = Color.GREEN;
 
-        this.shieldLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 50), text: "shield: "+ (<PlayerController>this.player.ai).CURRENT_SHIELD });
+        this.shieldLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 80), text: "shield: "+ (<PlayerController>this.player.ai).CURRENT_SHIELD });
         this.shieldLabel.size.set(200, 50);
         this.shieldLabel.setHAlign(HAlign.LEFT);
-        this.shieldLabel.textColor = Color.WHITE;
+        this.shieldLabel.textColor = Color.ORANGE;
         this.shieldLabel.font = "PixelSimple";
+        this.shieldBar = <Rect>this.add.graphic(GraphicType.RECT, "UI", {position: new Vec2(100+150, 60), size: new Vec2(400, 10)});
+        this.shieldBar.borderColor = Color.BLACK;
+        this.shieldBar.borderWidth = 3;
+        this.shieldBar.color = Color.ORANGE;
 
-        this.expLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 70), text: "EXP: "+ (<PlayerController>this.player.ai).CURRENT_EXP });
+        this.expLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 120), text: "EXP: "+ (<PlayerController>this.player.ai).CURRENT_EXP });
         this.expLabel.size.set(200, 50);
         this.expLabel.setHAlign(HAlign.LEFT);
-        this.expLabel.textColor = Color.WHITE;
+        this.expLabel.textColor = Color.BLUE;
         this.expLabel.font = "PixelSimple";
+        this.expBar = <Rect>this.add.graphic(GraphicType.RECT, "UI", {position: new Vec2(150, 100), size: new Vec2(200, 10)});
+        this.expBar.borderColor = Color.BLACK;
+        this.expBar.borderWidth = 3;
+        this.expBar.color = Color.BLUE;