export function createSceneLoader(scene: Phaser.Scene) {
  const width = scene.cameras.main.width
  const height = scene.cameras.main.height

  const progressBox = scene.add.graphics()
  const progressBar = scene.add.graphics()
  progressBox.fillStyle(0x222222, 0.8)
  progressBox.fillRect(width / 2 - 180, height / 2, 320, 50)

  const loadingText = scene.make.text({
    x: width / 2,
    y: height / 2 - 50,
    text: 'Loading...',
    style: {
      font: '20px monospace',
      // @ts-ignore
      fill: '#ffffff'
    }
  })
  loadingText.setOrigin(0.5, 0.5)

  scene.load.on(Phaser.Loader.Events.PROGRESS, function (value: any) {
    progressBar.clear()
    progressBar.fillStyle(0x368f8b, 1)
    progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
  })

  scene.load.on(Phaser.Loader.Events.COMPLETE, function () {
    progressBar.destroy()
    progressBox.destroy()
    loadingText.destroy()
    return true
  })
}