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

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

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

document.getElementById('version').textContent = 'Phaser v' + Phaser.VERSION;

var controls;
var debugGraphics;

function preload() {
  this.load.tilemapTiledJSON(
    'map',
    'assets/tilemaps/maps/tileset-collision-property-v12.json'
  );
  this.load.image(
    'kenny_platformer_64x64',
    'assets/tilemaps/tiles/kenny_platformer_64x64.png'
  );
}

function create() {
  var map = this.make.tilemap({ key: 'map' });

  var tileset = map.addTilesetImage('kenny_platformer_64x64');

  var layer = map.createDynamicLayer(0, tileset, 0, 0);
  layer.setCollisionByProperty({ collides: true });

  debugGraphics = this.add.graphics();

  var help = this.add.text(0, 0, '', { font: '48px monospace' });

  var cursors = this.input.keyboard.createCursorKeys();

  controls = new Phaser.Cameras.Controls.FixedKeyControl({
    camera: this.cameras.main,
    left: cursors.left,
    right: cursors.right,
    up: cursors.up,
    down: cursors.down,
    speed: 0.5
  });

  this.input.on('pointerdown', function onPointerDown(pointer) {
    var tile = getTileAtPointer(pointer, layer);
    
    if (!tile) return;
    
    console.log(`(${tile.x}, ${tile.y}) on ${tile.layer.name}`, tile);
  });

  this.input.on('pointermove', function onPointerMove(pointer) {
    var tile = getTileAtPointer(pointer, layer);

    if (!tile) return;

    help.setText(tile.index).setPosition(tile.pixelX, tile.pixelY);

    drawDebug(tile);
  });
}

function update(time, delta) {
  controls.update(delta);
}

function getTileAtPointer(pointer, layer) {
  return layer.getTileAtWorldXY(pointer.worldX, pointer.worldY, true);
}

function drawDebug(tile) {
  const { width, height, pixelX, pixelY } = tile;
  const left = pixelX;
  const top = pixelY;
  const right = pixelX + width;
  const bottom = pixelY + height;

  debugGraphics
    .clear()
    .fillStyle(0x666666, 0.6)
    .fillRect(left, top, width, height)
    .lineStyle(8, 0xff0000, 0.8);
  
  // `tile.face*` are the computed faces, from `tile.collide*`

  if (tile.faceLeft) debugLine(left, top, 0, height);
  if (tile.faceTop) debugLine(left, top, width, 0);
  if (tile.faceRight) debugLine(right, top, 0, height);
  if (tile.faceBottom) debugLine(left, bottom, width, 0);
}

function debugLine(x, y, dx, dy) {
  debugGraphics.lineBetween(x, y, x + dx, y + dy);
}

var config = {
  type: Phaser.CANVAS,
  pixelArt: true,
  scene: {
    preload: preload,
    create: create,
    update: update
  },
  loader: {
    baseURL: 'https://labs.phaser.io',
    crossOrigin: 'anonymous'
  }
};

new Phaser.Game(config);