Crafty.viewport.clampToEntities = false;

Crafty.viewport.follow(
  Crafty.e("2D, Color, Canvas")
    .attr({
      x: 0,
      y: 0,
      w: 1* CONF.playmat.w,
      h: 2* CONF.playmat.h,
    })
    .color("teal")
    .origin("center")
);

Crafty.bind("ViewportResize", function () {
  let sX = this.viewport._width / 1600,
      sY = this.viewport._height / 1800;

  this.viewport.scale(Math.min(sX, sY));
});

Crafty.trigger("ViewportResize");

// Testing playmat

Crafty.sprite(997, 582, "//i.imgur.com/cwGQdAS.png", { playmat: [0, 0] });

Crafty.e("playmat, 2D, Canvas")
  .attr({ x: 0, y: 900, w: 1600, h: 900 });

Crafty.e("playmat, 2D, Canvas")
  .attr({ x: 0, y: 900, w: 1600, h: 900 })
  .origin("top middle")
  .attr({ rotation:180 });

// Testing some entities

Crafty.sprite(480, 670, "//www.fftcgmognet.com/images/cards/hd/1/1/107.jpg", { shantotto: [0, 0] });

let card = Crafty.e("shantotto, AllyCard")
  .attr({ x: 0, y: 0 })
  .bind("DoubleClick", function () {
    this.destroy();
  });

Crafty.e("shantotto, AllyCard")
  .place(300, 0);

Crafty.e("shantotto, AllyCard")
  .place(600, 0);

Crafty.e("shantotto, EnemyCard")
  .place(900, 0);

// Crafty.e("shantotto, AllyCard")
//   .attr({ x: 0, y: 0, w: 1200, h: 1675 });