class Example extends Phaser.Scene {
  preload() {
    this.load.image("bg", "https://assets.codepen.io/9367036/bg2.png");
  }

  create() {
    this.cursors = this.input.keyboard.createCursorKeys();

    const hw = config.width / 2;
    const hh = config.height / 2;

    this.positionText = this.add
      .text(10, 10, "", {
        fontSize: "15px",
        fontFamily: "monospace",
        fill: "#fff"
      })
      .setOrigin(0, 0)
      .setDepth(1000);

    let img = this.add.image(hw, hh, "bg").setOrigin(0.5, 0.5);
    let scaleX = config.width / img.width;
    let scaleY = config.height / img.height;
    let scale = Math.max(scaleX, scaleY);
    img.setScale(scale);

    this.player = this.add.circle(hw, hh, 10, 0xcccc00);

    this.physics.add.existing(this.player);
    this.player.body.setCollideWorldBounds(false);

    this.player.body.setBounce(0.8);
    this.speed = 200;
  }

  update() {
    this.move();
    this.wrapAround();
    this.updateStats();
  }

  move() {
    // Mouvement horizontal
    if (this.cursors.left.isDown) {
      this.player.body.setVelocityX(-this.speed);
    } else if (this.cursors.right.isDown) {
      this.player.body.setVelocityX(this.speed);
    } else {
      this.player.body.setVelocityX(0);
    }

    // Mouvement vertical
    if (this.cursors.up.isDown) {
      this.player.body.setVelocityY(-this.speed);
    } else if (this.cursors.down.isDown) {
      this.player.body.setVelocityY(this.speed);
    } else {
      this.player.body.setVelocityY(0);
    }
  }

  wrapAround() {
    this.physics.world.wrap(this.player, 10);
  }

  updateStats() {
    this.positionText.setText(
      "Position : (" +
        parseInt(this.player.x) +
        ", " +
        parseInt(this.player.y) +
        ")"
    );
  }
}

const config = {
  width: 800,
  height: 400,
  scene: Example,
  physics: {
    default: "arcade",
    arcade: {
      debug: true,
      gravity: {
        x: 0,
        y: 0
      }
    }
  }
};

const game = new Phaser.Game(config);

// Controls

document.querySelector(".controls").classList.remove("hide");
document.querySelectorAll(".left, .right, .up, .down").forEach((element) => {
  element.setAttribute("on", "true");
});