twelve-heroes/src/view/PhaserGame.js

import Phaser from "phaser";
import logoImg from "../assets/twelveHeroes_cover.png";

function addCard(x, y, game,heroName,heroCost,heroPower,heroDesc) {
  let textStyle = {
    font: "normal 12px Arial",
    fill: '#000000',
    align: 'center',
    boundsAlignH: "center", // bounds center align horizontally
    boundsAlignV: "middle" // bounds center align vertically
  };
  let graphics = game.add.graphics(0, 0);
  let color = 0xffff00;
  let thickness = 2;
  let alpha = 1;

  graphics.lineStyle(thickness, color, alpha);
  graphics.strokeRect(0, 0, 100, 160);
  let text = `${heroName}
  cost : ${heroCost}
  power : ${heroPower}
  ${heroDesc}`;
  let label = game.add.text(3, 3, text, textStyle);
  label.setOrigin(0, 0);
  let container = game.add.container(x,y, [graphics, label]).setSize(5, 5);
  // container.setOrigin(0, 0);
}

export default class PhaserGameScene {
  constructor(heroesSet) {
    this.heroesSet = heroesSet;
    // create a new scene named "Game"
    this.gameScene = new Phaser.Scene('Game');

    this.gameScene.preload = function () {
      this.load.image("logo", logoImg);

    };

    this.gameScene.create = function () {
      let i = 0;
      heroesSet.forEach(hero => {

        addCard(10+(i*100),10,this,hero.name,hero.cost,hero.power,hero.ability.description);
        i++;
      });
    };

    // our game's configuration
    let config = {
      type: Phaser.AUTO,  //Phaser will decide how to render our game (WebGL or Canvas)
      width: 1200, // game width
      height: 550, // game height
      scene: this.gameScene, // our newly created scene
      backgroundColor: 'rgba(173,216,230 ,1 )'
    };

    // create the game, and pass it the configuration
    this.game = new Phaser.Game(config);
  }

}