twelve-heroes/src/view/WorldGameView.js

'use strict';

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, 80, 120);
  let text = `${heroName}\ncost : ${heroCost}\npower : ${heroPower}`;
  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 World extends Phaser.Scene {

  constructor() {
    super({ key: 'World', active: false });
    console.log('constructor');
  }

  init(data){
    console.log('Init');
    this.heroesSet = data.heroesSet;
  }
  preload() {
    console.log('Preload');

  }

  create() {
    console.log('create');
    let i = 0;
    let j = 0;
    this.heroesSet.forEach(hero => {
      let x = 10 + (i * 80) + 5;
      let y = 10 + (j * 120) + 5;
      addCard(x, y, this, hero.name, hero.cost, hero.power, hero.ability.description);
      console.log(x, ' ', y);
      if (x >= 1040) {
        i = 0;
        j++;
      } else {

        i++;
      }

    });
  }

  update() {
    console.log('update');

  }
}