caa-game/src/helpers/stats.js

const { Container, TileSprite, Rect, Texture, Text } = require("asdf-games");
const tilemapFrames = require("../../res/tilemap.js");

const tilemap = new Texture("res/tilemap.png");
const tileSize = 32;
const fillStyle = {fill: "#ffffff", font: "24px Arial"};

class Stats extends Container {
  constructor(player) {
    super();

    this.player = player;

    const background = new Rect(640, 42, {fill: "rgba(0,0,0, 0.5)"});
    background.pos = {x: 0, y: 280};

    const livesText = new Text("LIVES:", fillStyle);
    livesText.pos = {x: 10, y: 310};

    const livesCounter = new Text(player.lives, fillStyle);
    livesCounter.pos = {x: 90, y: 310};

    const heart = new TileSprite(tilemap, tileSize, tileSize);
    heart.frame = {x: tilemapFrames[42].x / tileSize, y:  tilemapFrames[42].y / tileSize};
    heart.pos = {x: 104, y: 284};

    const staminaText = new Text("| STAMINA:", fillStyle);
    staminaText.pos = {x: 140, y: 310};

    this.children = [
      background,
      livesText,
      livesCounter,
      heart,
      staminaText
      // Stamina is added afterward
    ];

    Array(5).fill().forEach((_val, index) => {
      const sprite = new TileSprite(tilemap, tileSize, tileSize);
      sprite.frame = {x: tilemapFrames[44].x / tileSize, y: tilemapFrames[44].y / tileSize};
      sprite.pos = {x: index * 26 + 270, y: 286};
      this.children.push(sprite);
    });
  }

  update() {
    this.children[2].text = this.player.lives;

    Array(5).fill().forEach((_val, index) => {
      //console.log(Math.round(this.player.stamina.current) - 1, index);
      this.children[index + 5].frame = 
        (Math.round(this.player.stamina.current)) <= index
          ? {x: tilemapFrames[45].x / tileSize, y: tilemapFrames[45].y / tileSize}
          : {x: tilemapFrames[44].x / tileSize, y: tilemapFrames[44].y / tileSize};
    });
  }
}

module.exports = Stats;