<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: 4px;
  top: 320px;
}

function preload() {
  this.load.audioSprite("sfx", "assets/audio/SoundEffects/fx_mixdown.json", [
    "assets/audio/SoundEffects/fx_mixdown.ogg",
    "assets/audio/SoundEffects/fx_mixdown.mp3"
  ]);

  this.load.audio("overture", [
    "assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/Overture.ogg",
    "assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/Overture.mp3"
  ]);
}

function create() {
  this.add
    .text(240, 160, "👆 Tap/click", {
      font: "48px sans-serif",
      fill: colors.cssColors.red
    })
    .setOrigin(0.5);

  this.input
    .once("pointerdown", () => {
      this.game.music.play("overture");
    })
    .on("pointerdown", () => {
      this.sound.playAudioSprite("sfx", "meow");
    });
}

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

new Phaser.Game({
  callbacks: {
    preBoot: function (game) {
      game.music = Phaser.Sound.SoundManagerCreator.create(game);
    }
  },
  width: 480,
  height: 320,
  backgroundColor: colors.hexColors.navy,
  scene: { preload, create },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  plugins: {
    scene: [
      {
        key: "LoaderText",
        plugin: PhaserLoaderPlugin.LoaderTextPlugin,
        start: true
      }
    ]
  }
});