Phaser game using Classes - Unexpected errors

Phaser 3
1

Hello, I seem not to get any error, I cannot get my desired result. I expect to see Play, Options and Credits buttons on the screen but nothing happens.

import 'phaser';

export default class PreloaderScene extends Phaser.Scene {
    constructor () {
        super('Preloader');
    }

    init () {
        this.readyCount = 0;
    }

    preload () {
        // add logo image
        this.add.image(400, 200, 'logo');

        // display progress bar
        var progressBar = this.add.graphics();
        var progressBox = this.add.graphics();
        progressBox.fillStyle(0x222222, 0.8);
        progressBox.fillRect(240, 270, 320, 50);

        var width = this.cameras.main.width;
        var height = this.cameras.main.height;
        var loadingText = this.make.text({
            x: width / 2,
            y: height / 2 - 50,
            text: 'Loading...',
            style: {
                font: '20px monospace',
                fill: '#ffffff'
            }
        });
        loadingText.setOrigin(0.5, 0.5);

        var percentText = this.make.text({
            x: width / 2,
            y: height / 2+ 50,
            text: '',
            style: {
                font: '18px monospace',
                fill: '#ffffff'
            }
        });

        assetText.setOrigin(0.5, 0.5);

        // update progress bar
        this.load.on('progress', function(value) {
            percentText.setText(parseInt(value * 100) + '%');
            progressBar.clear();
            progressBar.fillStyle(0xffffff, 1);
            progressBar.fillRect(250, 280, 300 * value, 30);
        });

        // update file progress text
        this.load.on('fileprogress', function (file) {
            assetText.setText('Loading asset: ' + file.key);
        });

        // remove progress bar when complete
        this.load.on('complete', function () {
            progressBar.destroy();
            progressBox.destroy();
            loadingText.destroy();
            percentText.destroy();
            assetText.destroy();
            this.ready();
        }.bind(this));

        this.timedEvent = this.time.delayedCall(3000, this.ready, [], this);

        // load assets needed in our game
        this.load.image('blueButton1', require('../assets/ui/blue_button02.png'));
        this.load.image('blueButton2', require('../assets/ui/blue_button03.png'));
        this.load.image('phaserLogo', require('../assets/logo.png'));
        this.load.image('box', require('../assets/ui/grey_box.png'));
        this.load.image('checkBox', require('../assets/ui/blue_boxCheckmark.png'));
        this.load.audio('bgMusic', ['../assets/TownTheme.mp3']);

        // this.load.image('blueButton1', 'assets/ui/blue_button02.png');
        // this.load.image('blueButton2', '../assets/ui/blue_button03.png');
        // this.load.image('phaserLogo', '../assets/logo.png');
        // this.load.image('box', '../assets/ui/grey_box.png');
        // this.load.image('checkBox', 'assets/ui/blue_boxCheckmark.png');
        // this.load.audio('bgMusic', ['../assets/TownTheme.mp3']);
    }

    ready () {
        this.scene.start('Options');
        this.readyCount++;
        if (this.readyCount === 2) {
            this.scene.start('Title');
        }
    }
};

Please, find a link to the GitHub repo (GitHub - happiguru/Phaser-Game-Test: Phaser-Game-Test).
Thank you in advance.

2

Use logging to see what’s happening.
Make sure you start the scene. And when you start a scene, the current one ends, so your ready function should probably use launch.