const config = {
  type: Phaser.WEBGL,
  width: 375,
  height: 812,
  scene: {
    preload: preload,
    create: create,
    update: update
  }
}
function preload() {
      this.load.image('tiles', '../pt.png');
      this.load.tilemapTiledJSON('tilemap', '../final.json');
      var url = 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexpinchplugin.min.js';
      this.load.plugin('rexpinchplugin', url, true);
    }

function create() {
      window.addEventListener('resize', resize);
      resize();
      this.add.image(0, 0, 'map').setOrigin(0);

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

      var tiles = map.addTilesetImage('pt', 'tiles');

      const layer = map.createStaticLayer(0, tiles);
     // const layer1 = map.createStaticLayer(1, tiles);

      var cam = this.cameras.main;
      // cam.setBounds(0, 0, map.displayWidth, map.displayHeight);

      this.input.on('pointermove', function (p) {
        if (!p.isDown) return;
        cam.scrollX -= (p.position.x - p.prevPosition.x) / 4;
        cam.scrollY -= (p.position.y - p.prevPosition.y) / 4;
      });
}

function update() {
}

function resize() {
    var canvas = game.canvas, width = window.innerWidth, height = window.innerHeight;
    var wratio = width / height, ratio = canvas.width / canvas.height;

    if (wratio < ratio) {
        canvas.style.width = width + "px";
        canvas.style.height = (width / ratio) + "px";
    } else {
        canvas.style.width = (height * ratio) + "px";
        canvas.style.height = height + "px";
    }
}

window.game = new Phaser.Game(config);