a very messy scene

SocialEngine.ts

const Colyseus = require('colyseus.js')
const Store = require('electron-store');
const store = new Store();
var client = new Colyseus.Client('ws://localhost:2567');

function round(value, precision) {
    var multiplier = Math.pow(10, precision || 0);
    return Math.round(value * multiplier) / multiplier;
}


// joinOrCreate(IslandId)
client.joinOrCreate("Island-Jericho-City-UK").then(room => {
    console.log(room.sessionId, "joined", room.name);
    //room.onStateChange((state) => {console.log(room.name, "has new state:", state);});
    messageLog = []
    room.onMessage("server-message", (message) => {console.log("The server said " + message.data);});
    room.onMessage("player-message", (data) => messageLog.push([data.username, data.message, data.power]));
    room.onError((code, message) => {console.log(client.id, "couldn't join", room.name);});
    room.onLeave((code) => {console.log(client.id, "left", room.name);});
    var config = {
        type: Phaser.AUTO,
        parent: 'phaser-example',
        width: window.innerWidth,
        height: window.innerHeight,
        scale:{
          parent: 'parentDiv',
          autoCenter: Phaser.Scale.CENTER_BOTH,
          mode: Phaser.Scale.RESIZE,
          width: document.getElementById("parentDiv").clientWidth,
          height: document.getElementById("parentDiv").clientHeight
        },
        physics: {
            default: 'arcade',
        },
        dom:{
          createContainer: true
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };
    game = new Phaser.Game(config);

    SocialSpace = {}
    /*
    TODO: https://roadmap.socialislands.net/todo/
    */
    var LocalPlayer =  function (_username, _avatar, _power, _team){
      // Fetchables
      // I will need to create private constants for image locations
      this.PosX; // X
      this.PosY; // Y
      this.Local = true;
      this.username = _username ? _username : "Player1";// default :
      this.avatar = _avatar ? _avatar : "cache/default.png"; // Or default
      this.avatarScale = 0.3;
      this.power = _power ? _power : 0; // remove
      this.team = _team ? _team : "Default";
      this.Create = function(){
        // create as in render and shiz
        console.log("Creating Player " + username);
      };
      this.GetPos = function(){
        return [this.PosX, this.PosY];
      }
      room.send("setPlayerDetails", { username: this.username, avatar: this.avatar, avatarScale: this.avatarScale, power: this.power, team: this.team });
    }

    var Preloader = function (){
      this.GameAssets = [];
      this.GamePages = [];
      this.LoadImage = function(_spriteName,_url){
        var SingleLoader = [_spriteName, _url];
        console.log("Pushing asset '"+ _spriteName + "' into GameAssets");
        this.GameAssets.push(SingleLoader);
      }
      this.LoadPage = function(_pageName,_url){
        var SingleLoader = [_pageName, _url];
        console.log("Pushing asset '"+ _pageName + "' into GamePages");
        this.GamePages.push(SingleLoader);
      }
    }

    var Player =  function (_id, _username, _avatar, _power, _team){
      // Fetchables
      // I will need to create private constants for image locations
      this.userId = _id;
      this.PosX; // X
      this.PosY; // Y
      this.username = _username ? _username : "Player1";// default :
      this.avatar = _avatar ? _avatar : "cache/default.png"; // Or default
      if(this.avatar != "cache/default.png"){
        game.load.image(this.username, _avatar);
        game.load.start();
      }
      this.avatarScale = 0.3;
      this.power = _power ? _power : 0 // remove
      this.team = _team ? _team : "Default";
      this.gameObj = null;
      this.Create = function(){
        this.gameObj = game.scene.keys.default.physics.add.image(400.5, 301.3, this.username);
        this.gameObj.setScale(0.3).setScrollFactor(1);
        console.log("kiddo created");
        //game.scene.keys.default.cameras.main.add(this.gameObj);
      }
      this.Render = function(){
        // create as in render and shiz
          console.log("Rendering " + this.username);
      };
    }

    var Leaderboard = function(){
      this.Teams = [];
      this.AddPlayer = function(_team, _player){
        var Player = [_team, _player];
        console.log("Adding " + _player.username + " to " + _team + " Team");
        var t = this.GetTeam(_team);
        t[2].push(_player);
        _player.Create();
      }
      this.RemovePlayer = function(_team, _player){
        console.log("Removing " + _player.username + " from " + _team + " Team");
        var t = this.GetTeam(_team);
      }
      this.CreateTeam = function(_name, _color){
        var Team = [_name,_color,[]];
        this.Teams.push(Team);
      }
      this.GetTeam = function(_name){
        var t = null;
        this.Teams.forEach(team => {
          if(team[0] == _name){
            t = team;
          }
        });
        if(t != null){
          return t;
        }else{
          return null;
        }
      }
    }
    SocialSpace.Leaderboard = new Leaderboard();
    SocialSpace.Leaderboard.CreateTeam("Default","white");

    var Gui = function(){
      this.Hud = [];
      this.ScreenWidth = window.innerWidth;
      this.ScreenHeight = window.innerHeight;
      this.Add = function(_obj){
        this.Hud.push(_obj);
        _obj.setScrollFactor(0);
      }
    }

    SocialSpace.Leaderboard = new Leaderboard();
    SocialSpace.Leaderboard.CreateTeam("Default","white");
    SocialSpace.LocalPlayer = new LocalPlayer("LocalPlayer", "cache/default.png", 1, "Default");
    //SocialSpace.Leaderboard.AddPlayer("Default", SocialSpace.LocalPlayer);
    SocialSpace.Preloader = new Preloader();
    SocialSpace.Gui = new Gui();

    // Asset Names
    // Rename to localplayer ?
    var player; // This variables and others like this will be used for Social Script

    // Keys
    var keyA;
    var keyD;
    var keyW;
    var keyS;

    // misc
    zoom = 0.75;

    // Create LocalPlayer
    // Add all classes to namespace ?

    // Load in single loaders
    SocialSpace.Preloader.LoadImage(SocialSpace.LocalPlayer.username, SocialSpace.LocalPlayer.avatar);
    SocialSpace.Preloader.LoadImage('map',  'cache/island.png');// we will fetch the map with game api. for now use default
    SocialSpace.Preloader.LoadImage('tool', 'cache/tool.png');
    //SocialSpace.Preloader.LoadPage('chatinput', 'assets/pages/chat.html');
    function preload ()
    {
        SocialSpace.Preloader.GameAssets.forEach(asset => {
          this.load.image(asset[0], asset[1]);
        });
        SocialSpace.Preloader.GamePages.forEach(asset => {
          this.load.html(asset[0], asset[1]);
        });
        this.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');
        this.load.plugin('rexinputtextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexinputtextplugin.min.js', true);
    }

    function create ()
    {
        //var gui = new dat.GUI();
        //this.cameras.main.setBounds(0, 0, 1024, 2048);
        this.cameras.main.setName('main');
        // create chat box
        map = this.add.image(0, 0, 'map').setOrigin(0).setName("map");//.setScrollFactor(1);
        cursors = this.input.keyboard.createCursorKeys();
        player = this.physics.add.image(400.5, 301.3, SocialSpace.LocalPlayer.username);
        player.setScale(SocialSpace.LocalPlayer.avatarScale);
        inputText = this.add.rexInputText(235, 750, 1366, 35, {placeholder: "Send a message to others!", id: 'chat', backgroundColor: 'white', color: 'black', padding: '10px', fontSize: '24px' });
        // chatArea = get the last 4-6
        itf = false; inputText.setInteractive().on('focus', () => game.input.keyboard.enabled = false)
        function f(){if(inputText.text == ""){return;}else{console.log("Sending message"); room.send("sendPlayerMessage", {message: inputText.text}); inputText.setBlur(); inputText.setText(""); game.input.keyboard.enabled = true;}}
        sendchatbutton = this.add.text(1146,739,'SEND',{fontSize:'38px',backgroundColor:'white',color:'black'}).setInteractive().on('pointerdown',()=>f()); // localplayer

        // position doesnt matter, it will be set in update
        chatline1 = this.add.text(-200, -80, null, {fontSize: '24px', fontFamily: 'Tahoma, Geneva, sans-serif', color: 'white'}); SocialSpace.Gui.Add(chatline1);
        chatline2 = this.add.text(-200, -50, null, {fontSize: '24px', fontFamily: 'Tahoma, Geneva, sans-serif', color: 'white'}); SocialSpace.Gui.Add(chatline2);
        chatline3 = this.add.text(-200, -20, null, {fontSize: '24px', fontFamily: 'Tahoma, Geneva, sans-serif', color: 'white'}); SocialSpace.Gui.Add(chatline3);
        chatline4 = this.add.text(-200, 10, null, {fontSize: '24px', fontFamily: 'Tahoma, Geneva, sans-serif', color: 'white'}); SocialSpace.Gui.Add(chatline4);
        chatline5 = this.add.text(-200, 40, null, {fontSize: '24px', fontFamily: 'Tahoma, Geneva, sans-serif', color: 'white'}); SocialSpace.Gui.Add(chatline5);
        chatline6 = this.add.text(-200, 70, null, {fontSize: '24px', fontFamily: 'Tahoma, Geneva, sans-serif', color: 'white'}); SocialSpace.Gui.Add(chatline6);


        playerUsername =  this.add.text(0, 0, SocialSpace.LocalPlayer.username, { fontFamily: 'Tahoma, Geneva, sans-serif', color: 'white', paddingTop: '1px'});
        for (i = 0; i < 10; i++) {
          var x = (i * 130) - 185;//
          SocialSpace.Gui.Add(this.add.image(x, 685,'tool').setScrollFactor(0).setName("tool" + i.toString()));
        }
        var shh = (SocialSpace.Gui.ScreenHeight / 100); leaderboardy = SocialSpace.Gui.ScreenHeight - (SocialSpace.Gui.ScreenHeight - (shh * -10));
        leaderboard = this.add.text((SocialSpace.Gui.ScreenWidth + 30),leaderboardy, "Leaderboard", { fontFamily: 'Tahoma, Geneva, sans-serif', color: 'white', scale: 2 });
        leaderboard.setFontSize(30);
        SocialSpace.Gui.Add(leaderboard);
        SocialSpace.Gui.Add(inputText)
        SocialSpace.Gui.Add(sendchatbutton)
        //leaderboard.fixedToCamera(true);
        //playerUsername.anchg
        // player = this.add.image(400.5, 301.3, 'player');
        this.cameras.main.startFollow(player, true, 0.09, 0.09);
        //this.cameras.main.roundPixels = true;

        this.cameras.main.setZoom(zoom);
        hudcam = this.cameras.add(0,0,SocialSpace.Gui.ScreenWidth,SocialSpace.Gui.ScreenHeight).setName('hudcam');
        hudcam.startFollow(player, true, 0.09, 0.09);
        hudcam.setZoom(zoom);
        nonhudobjs = this.add.container();
        this.cameras.main.ignore(SocialSpace.Gui.Hud);
        nonhudobjs.add([map,player,playerUsername]); hudcam.ignore(nonhudobjs);

        keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
        keyS = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
        keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
        keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);

        this.input.on('wheel', function (pointer, gameObjects, deltaX, deltaY, deltaZ) {
            var d = ((deltaY / 100) /10)
            zoom -= d;
            if(zoom < 0.4){
              zoom += d;
            }

            if(zoom > 3){
              zoom += d;
            }
            //console.log("Mouse Zoom is " + zoom);
            this.cameras.main.setZoom(zoom);

            SocialSpace.Leaderboard.Teams[0][2].forEach(plr => {
              if(plr.local == null){
                //plr.gameObj.setScale(zoom - 0.3);
              }
            });

            // ZOOM GUIS
            // if deltaY == 100 wheel going down. else going up
        });
    }


    function update ()
    {
      room.onMessage("player-joined", (data) => {
        var plr = new Player(0, data.username, data.avatar, data.power, data.team);
        console.log(plr.username + " has joined!");
        SocialSpace.Leaderboard.AddPlayer(plr.team, plr);
        //plr.Create();
        //SocialSpace.Leaderboard.Teams[]
      });
      room.onMessage("player-leave", (data) => {
        //SocialSpace.Leaderboard.AddPlayer(plr.team, plr)
      });
      
        //console.log(player.x + " | " + player.y);
        // Update our position
        SocialSpace.LocalPlayer.PosX = player.x; SocialSpace.LocalPlayer.PosY = player.y;
        SocialSpace.Gui.ScreenWidth = window.innerWidth;
        SocialSpace.Gui.ScreenHeight = window.innerHeight;
        // Loop through teams
        // work on dis massively
        var playerList = ""; SocialSpace.Leaderboard.Teams.forEach(team => {
          // Will work on teams later, for now just echo players
          team[2].forEach(plr => {
            playerList += plr.username + "\n";
          });
        });

        // loop through teams once teams are fully implemented
        SocialSpace.Leaderboard.Teams[0][2].forEach(plr => {
          if(plr.local == null){
            //plr.Create();
            plr.Render();
          }
        });

        leaderboard.setText(playerList);
        if(messageLog[(messageLog.length - 6)] != undefined){
          if(messageLog[(messageLog.length - 6)][2] == 1){
            chatline1.setColor("red");
          }
          if(messageLog[(messageLog.length - 6)][2] == 2){
            chatline1.setStroke("red",3)
          }
          chatline1.setText(messageLog[(messageLog.length - 6)][0] + ": " + messageLog[(messageLog.length - 6)][1]);
        }
        if(messageLog[(messageLog.length - 5)] != undefined){
          if(messageLog[(messageLog.length - 5)][2] == 1){
            chatline2.setColor("red");
          }
          if(messageLog[(messageLog.length - 5)][2] == 2){
            chatline2.setStroke("red",3)
          }
          chatline2.setText(messageLog[(messageLog.length - 5)][0] + ": " + messageLog[(messageLog.length - 5)][1]);
        }
        if(messageLog[(messageLog.length - 4)] != undefined){
          if(messageLog[(messageLog.length - 4)][2] == 1){
            chatline3.setColor("red");
          }
          if(messageLog[(messageLog.length - 4)][2] == 2){
            chatline3.setStroke("red",3)
          }
          chatline3.setText(messageLog[(messageLog.length - 4)][0] + ": " + messageLog[(messageLog.length - 4)][1]);
        }
        if(messageLog[(messageLog.length - 3)] != undefined){
          if(messageLog[(messageLog.length - 3)][2] == 1){
            chatline4.setColor("red");
          }
          if(messageLog[(messageLog.length - 3)][2] == 2){
            chatline4.setStroke("red",3)
          }
          chatline4.setText(messageLog[(messageLog.length - 3)][0] + ": " + messageLog[(messageLog.length - 3)][1]);
        }
        if(messageLog[(messageLog.length - 2)] != undefined){
          if(messageLog[(messageLog.length - 2)][2] == 1){
            chatline5.setColor("red");
          }
          if(messageLog[(messageLog.length - 2)][2] == 2){
            chatline5.setStroke("red",3)
          }
          chatline5.setText(messageLog[(messageLog.length - 2)][0] + ": " + messageLog[(messageLog.length - 2)][1]);
        }
        if(messageLog[(messageLog.length - 1)] != undefined){
          if(messageLog[(messageLog.length - 1)][2] == 1){
            chatline6.setColor("red");
          }
          if(messageLog[(messageLog.length - 1)][2] == 2){
            chatline6.setStroke("red",3)
          }
          chatline6.setText(messageLog[(messageLog.length - 1)][0] + ": " + messageLog[(messageLog.length - 1)][1]);
        }

        //chatline2.setText(messageLog[(messageLog.length - 4)][0])
        //this.add.text(0, (10 * i), messageLog[(messageLog.length - i)][0] + ": " + messageLog[(messageLog.length - i)][1]).setScrollFactor(0).setName("chattext");

        // update our gui
        playerUsername.x = player.x - (playerUsername.width / 2) ;//- (player.width / 2);// - 40;
        playerUsername.y = player.y - 80;
        //playerUsername.text = SocialSpace.LocalPlayer.username; // Incase localplayer want name change?!?!?
        player.setVelocity(0);
        if(itf == false){
          if (keyA.isDown)
          {
              player.setVelocityX(-200);
              room.send("setPlayerX", { v: round(player.x, 2) });
          }
          else if (keyD.isDown)
          {
              player.setVelocityX(200);
              room.send("setPlayerX", { v: round(player.x, 2) });
          }

          if (keyW.isDown)
          {
              player.setVelocityY(-200);
              room.send("setPlayerY", { v: round(player.y, 2) });
          }
          else if (keyS.isDown)
          {
              player.setVelocityY(200);
              room.send("setPlayerY", { v: round(player.y, 2) });
          }
        }
    }

}).catch(e => {
    console.log("JOIN ERROR", e);
    document.getElementById("cc").style.display = "block";
});