Why wont my phaser script output the map I created?

Question

Here is my code: https://replit.com/@JackF99/test-2d-array (Bug is in script.js)

This code is supposed to output the game screen with the map.

let mapArr;
let drawX=0;
let drawY=0;
//map is declared as variable in map.js
class gameScene extends Phaser.Scene {
    //Constructor with config var declared at bottom
    constructor(config) {
        super(config);
    }
    //Preload aspects for gameScene 
    preload() {
        //Preloading images
        this.load.atlas("player", "assets/temp.png");
        this.load.image("spike", "assets/spike.png");

        this.load.image("floor", "assets/floor.png");
        this.load.image("wallLeft", "assets/wallLeft.png");
        this.load.image("wallRight", "assets/wallRight.png");
        this.load.image("WallBottom", "assets/wallBottom.png");
        this.load.image("wallTop", "assets/wallTop.png");
        this.load.image("bg", "assets/bg.png");
    }
    //Create function for gameScene
    create() {
        this.floor = this.physics.add.staticGroup();
        this.wallTop = this.physics.add.staticGroup();
        this.wallBottom = this.physics.add.staticGroup();
        this.wallLeft = this.physics.add.staticGroup();
        this.wallRight = this.physics.add.staticGroup();
        this.bg = this.physics.add.staticGroup();
        //Splitting the map string by into array variables
        let mapArr = map.split('.');
        //For each loop goes through each row of mapArr
        mapArr.forEach(row => {
            //Setting pixel value X to 0 when its a new row
            drawX = 0;
            //Goes through each variable in the row and creates image in its place
            for (let i = 0; i < row.length; i++) {
                if (row.charAt(i) === '7') {
                    this.floor.create(drawX, drawY, "floor");
                } else if (row.charAt(i) === '9') {
                    this.wallTop.create(drawX, drawY, "wallTop");
                } else if (row.charAt(i) === '8') {
                    this.wallBottom.create(drawX, drawY, "wallBottom");
                } else if (row.charAt(i) === '5') {
                    this.wallLeft.create(drawX, drawY, "wallLeft");
                } else if (row.charAt(i) === '6') {
                    this.wallRight.create(drawX, drawY, "wallRight");
                } else if (row.charAt(i) === '1') {
                    this.floor.create(drawX, drawY, "floor");
                    //Creating player variables
                    //  this.player = this.add(drawX, drawY, "player");
                    // this.player.body.setGravityY(0);
                    // this.physics.add.collider(this.player, this.wallLeft);
                    //  this.physics.add.collider(this.player, this.wallRight);
                    //  this.physics.add.collider(this.player, this.wallTop);
                    //  this.physics.add.collider(this.player, this.wallBottom);
                    // this.cameras.main.startFollow(this.player);
                    // this.player.score = 0;
                    // this.scoreText = this.add.text(0, 0, "Score: "+this.player.score, {
                    //  fill:"#000000",
                    //  fontSize:"20px",
                    //  fontFamily:"Arial Black"
                    // }).setScrollFactor(0).setDepth(200);
                } else {
                    this.bg.create(drawX, drawY, "bg");
                }
                //Add 16 each time a image is added (16by16 pixel images)
                drawX += 16
            }
            //Add 16 each time a new row is entered (16by16 pixel images)
            drawY += 16;
        });
    }
    //update function for gameScene
    update() {

    }

}
//END OF GAME SCENES

//Var config to create game screen
var config = {
    type: Phaser.AUTO,
    width: 3000,
    height: 1500,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {
                y: 0
            },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

//Run actual game
var game = new Phaser.Game(config);
//Create new screens and scenes
game.scene.add("load", loadScene);
game.scene.add("game", mainScene);
game.scene.add("end", endScene);
//start with this scene
game.scene.start("game");

I wanted to output the randomized dungeon created in 2D array format and returned as a string. I wanted to output it as images based on the values in the string.

Answer 1

The map is not shown, because the GameScene is never loaded. Just some minor tweaks, are needed to make it visible. See below for details.

    class GameScene extends Phaser.Scene {
        constructor(){
            // set the scene key name
            super('Game');
        }
        ...
    }
    ...
    // add the scene
    game.scene.add('Game', GameScene);
    // start the scene, this key should be the same of the `constructor`
    game.scene.start('Game');

btw.: for map's in phaser, you could use phaser's TileMap. checkout this officials tutorials, if you are interested.

A better solution might even be, to add all scenes into the config object, like so:

var config = {
    type: Phaser.AUTO,
    width: 3000,
    height: 1500,
    ...    
    scene: [loadScene, mainScene, endScene]
 };

Info: The first Scene in the list will be loaded, the other scenes are only started, if in their config the property active is set to true. Details to the GameConfig documentation.