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

<script lang="ts">
import 'phaser';
// import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin';
import CreateScrollablePanel from './CreateScrollablePanel';

class Demo extends Phaser.Scene {
  rexUI: any;
    constructor() {
        super({
            key: 'examples'
        });
    }

    preload() {
        this.load.scenePlugin({
            key: 'rexuiplugin',
            url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js',
            sceneKey: 'rexUI'
        });
    }

    create(): void {
        const itemCountArray: number[] = [20, 5, 10, 0, 10];
        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',

            mapping: 'rexUI'
        }]
    }
};

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

  }
}
</script>

