Phaser 3 modal scene

modal-scene.js

/* "esversion": 6 */
import Phaser from 'phaser';
import constants from '../../../../config/constants';
import _ from 'lodash';
import {
    Styles
} from "../../../utils/styles";

class ModalMissionScene extends Phaser.Scene {
    constructor() {
        super({
            key: 'ModalMissionScene'
        });
    }

    init(data) {
        this.parentScene = data.parentScene;
        this.name = data.name;
    }

    preload() {

    }

    create() {
        // blend modes //
        /*
        ADD: 1
        COLOR: 15
        COLOR_BURN: 8
        COLOR_DODGE: 7
        COPY: 26
        DARKEN: 5
        DESTINATION_ATOP: 24
        DESTINATION_IN: 22
        DESTINATION_OUT: 23
        DESTINATION_OVER: 21
        DIFFERENCE: 11
        ERASE: 17
        EXCLUSION: 12
        HARD_LIGHT: 9
        HUE: 13
        LIGHTEN: 6
        LIGHTER: 25
        LUMINOSITY: 16
        MULTIPLY: 2
        NORMAL: 0
        OVERLAY: 4
        SATURATION: 14
        SCREEN: 3
        SKIP_CHECK: -1
        SOFT_LIGHT: 10
        SOURCE_ATOP: 20
        SOURCE_IN: 18
        SOURCE_OUT: 19
        XOR: 27
        */
        this.events.on('transitionout', function(toScene, duration) {

            this.tweens.add({
                targets: this,
                alpha: 0,
                duration: 800
            });

        }, this);

        var graphics = this.add.graphics({
            lineStyle: {
                width: 2,
                color: 0x000000,
                alpha: 0.7
            },
            fillStyle: {
                color: 0x000000,
                alpha: 0.7
            }
        });

        var modal = new Phaser.Geom.Rectangle();
        modal.width = constants.WIDTH;
        modal.height = constants.HEIGHT;
        graphics.fillRectShape(modal);
        /////

        if (this.locked === true) {
            this.modalPanel = this.add.sprite(0, 0, "missionGUI", "mission_lock_panel");
            this.modalPanel.setScale(0.6, 0.6);
            Phaser.Display.Align.In.Center(this.modalPanel, this.add.zone(constants.WIDTH * 0.5, constants.HEIGHT * 0.5, constants.WIDTH, constants.HEIGHT));

            this.closeBtn = this.add.sprite(0, 0, "missionGUI", "popup_btn_close");
            this.closeBtn.setScale(0.6);
            this.closeBtn.x = this.modalPanel.x + this.modalPanel.displayWidth * 0.5 - 20;
            this.closeBtn.y = this.modalPanel.y - this.modalPanel.displayHeight * 0.5 + 30;
            this.closeBtn.setInteractive({
                useHandCursor: true
            });
            this.closeBtn.on(
                'pointerdown',
                function(pointer, item) {
                    this.scene.stop("ModalMissionScene");
                    this.parentScene.closeModal();
                },
                this
            );

        } else {
            this.modalPanel = this.add.sprite(0, 0, "missionGUI", "mission_panel");
            this.modalPanel.setScale(0.6, 0.6);
            Phaser.Display.Align.In.Center(this.modalPanel, this.add.zone(constants.WIDTH * 0.5, constants.HEIGHT * 0.5, constants.WIDTH, constants.HEIGHT));
            //

            this.closeBtn = this.add.sprite(0, 0, "missionGUI", "popup_btn_close");
            this.closeBtn.setScale(0.6);
            this.closeBtn.x = this.modalPanel.x + this.modalPanel.displayWidth * 0.5 - 20;
            this.closeBtn.y = this.modalPanel.y - this.modalPanel.displayHeight * 0.5 + 30;
            this.closeBtn.setInteractive({
                useHandCursor: true
            });
            this.closeBtn.on(
                'pointerdown',
                function(pointer, item) {
                    this.scene.stop("ModalMissionScene");
                    this.parentScene.closeModal();
                },
                this
            );
            //

            var title = this.add.text(this.modalPanel.x, this.modalPanel.y - this.modalPanel.displayHeight * 0.5, this.difficulty.toUpperCase(), {
                    fontFamily: 'new_rockerregular',
                    fontSize: 32,
                    color: Styles.getColor("title", "string"),
                    fontStyle: 'bold',
                    align: 'center'
                })
                .setShadow(0, 0, '#1e1e1e', 5, false, true);
            Phaser.Display.Align.In.Center(title, this.modalPanel);
            title.y = this.modalPanel.y - this.modalPanel.displayHeight * 0.5 + 14;

            this.addButton("start");
        }

        ////
        this.scene.bringToTop();
    }

    addButton(type) {
        if (type === "start") {
            this.button = this.add.sprite(0, 0, "buttons", "button_green");
            this.button.setScale(0.5);
            this.button.setInteractive({
                useHandCursor: true
            });

            // add interaction //
            this.button.once(
                'pointerdown',
                function(pointer, item) {

                    this.scene.remove("ModalMissionScene");
                },
                this
            );


            this.buttonLabel = this.add.text(0, 0, "START", {
                fontFamily: 'fondamentoregular',
                fontSize: 24,
                color: '#ffffff',
                fontStyle: 'normal',
                align: 'center'
            });

            Phaser.Display.Align.In.BottomCenter(this.button, this.modalPanel, 0, -8);
            this.button.y = this.modalPanel.y + this.modalPanel.displayHeight * 0.5 - this.button.displayHeight - 8;
            Phaser.Display.Align.In.Center(this.buttonLabel, this.button, 0, -4);
        }
    }


   staggeredShow() {}

    update() {}
}

export default ModalMissionScene;