<template>
  <div id="phaser-container"></div>
</template>

<script lang="ts">

// import 'phaser';
import Phaser from 'phaser';

import CreateScrollablePanel from './CreateScrollablePanel';

class Demo extends Phaser.Scene {
  rexUI: any;

  constructor() {
    super({
      key: 'examples',
    });
  }

  preload() {
    this.load.scenePlugin(
      'rexuiplugin',
      'rexuiplugin.min.js',
      'rexUI',
      'rexUI',
    );
  }

  create(): void {
    const itemCountArray: number[] = [20, 5, 10, 0, 10];
    //@ts-ignore
    const topPanel = CreateScrollablePanel(this, itemCountArray)
      .setPosition(400, 300)
      .layout();
    // .drawBounds(this.add.graphics(), 0xff0000)
  }

}

const config: Phaser.Types.Core.GameConfig = {

  type: Phaser.AUTO,
  parent: 'phaser-container',
  width: 1280,
  height: 720,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  scene: Demo,
  plugins: {
    // scene: [
    //   {
    //     key: 'rexUI',
    //     plugin: RexUIPlugin,
    //     mapping: 'rexUI',
    //   },
    //   // ...
    // ],
  },

};

export default {
  name: 'YourComponentName',
  mounted() {
    const game = new Phaser.Game(config);

  },
};

</script>