twelve-heroes/src/view/phaser-renderer.js

'use strict'

import Renderer from './renderer';


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 = 0x654321;
  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 PhaserRenderer extends Renderer {
  constructor() {
    super();
  }

  render(game, heroesSet) {

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

        i++;
      }

    });
  }




  getInput(question) {
    return prompt(question);
  }
}