<footer><div id=version></div></footer>

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111 url(https://labs.phaser.io/assets/sprites/phaser3-logo-small.png) no-repeat 0 20px;
  color: #eee;
  font: caption;
}

#version {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.5)
}

/* global colors, Phaser */

class Unit extends Phaser.GameObjects.Sprite {
  constructor(config) {
    super(config.scene, config.x, config.y, config.key);
    this.key = config.key;
    this.makeSelectable();
    this.scene.add.existing(this);
  }

  makeSelectable() {
    this.setInteractive();
    this.selected = false;

    this.scene.input.enableDebug(this, 0xffff00);

    this.on("pointerover", () => {
      if (!this.selected) {
        this.tint = 0xff0000;
      }
    });
    this.on("pointerout", () => {
      if (!this.selected) {
        this.tint = 0x00ff00;
      }
    });
    this.on("pointerdown", () => {
      this.selected = true;
      this.tint = 0x0000ff;
    });
  }
}

function preload() {
  this.load.image("human", "assets/sprites/clown.png");
  this.load.image("orc", "assets/sprites/wabbit.png");
}

function create() {
  let units = [];

  units.push(
    new Unit({
      scene: this,
      x: 47,
      y: 34,
      key: "orc"
    })
  );
  units.push(
    new Unit({
      scene: this,
      x: 32,
      y: 15,
      key: "human"
    })
  );
}

function update() {}

document.getElementById("version").textContent = `Phaser v${Phaser.VERSION}`;

new Phaser.Game({
  type: Phaser.WEBGL,
  width: 80,
  height: 80,
  zoom: 5,
  backgroundColor: 0x666666,
  scene: { preload, create, update },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
});