Code viewer for World: Online Tower Builder (clon...

// Cloned by John Lasis on 5 Dec 2022 from World "Online Tower Builder" by Joseph Adedayo 
// Please leave this clone trail here.
 
// Joseph Adedayo 20303853 & Colin Ekedigwe 20403046 - Online Tower Builder 

AB.newSplash (" <H2> PRESS SPACE TO START GAME ! </H2>"); // Load Screen

const MUSIC_BACK  = ' /uploads/j0euro/beat.mp3 ' ; // Music

 const SKYBOX_ARRAY = [										 
                "/uploads/starter/dawnmountain-xpos.png",
                "/uploads/starter/dawnmountain-xneg.png",
                "/uploads/starter/dawnmountain-ypos.png",
                "/uploads/starter/dawnmountain-yneg.png",
                "/uploads/starter/dawnmountain-zpos.png",
                "/uploads/starter/dawnmountain-zneg.png"
                ]; // Mountain Background
                
const objectsize    = 5;                  // size of object   
const startRadius   = 400;                 // distance from centre we start the camera at
const maxRadius     = startRadius * 10;     // maximum distance from camera we render things 

//Initialise variables
var timer = true; 
var users = 1; 
var higher = 0; // Used to move box higher across y-axis and to count up score
var higher2 = 0; // Opponents score

AB.socketStart();

// Tells users when time is up
function codingCourse() {
  AB.msg ( `<H1> Your Score:  ${higher} </H1>  <H1> Opponent Score: ${higher2} </H1>  <H1> TIME IS UP ! </H1>` );
  timer = false;
}

AB.world.newRun = function() 
{
    
    ABWorld.init3d ( startRadius, maxRadius); // start a 3D scene: 
    AB.msg ( `<H2> PRESS SPACE TO START GAME ! </H2>` );
    
    let items = ["black", "yellow", "green", "pink", "purple", "orange", "white", "grey", "blue"]; // random colours

    // When webpage is pressed and time is not up -> pick a random colour -> create shape -> stack it higher above last shape
    document.body.onkeyup = function(e) { 
     if ( ((e.key == " " || e.code == "Space" || e.keyCode == 32 )  && timer)
    ) {
    var boxcolor = items[Math.floor(Math.random()*items.length)]; // pick random colour
    var shape       = new THREE.SphereGeometry ( objectsize, objectsize, objectsize );
    var material    = new THREE.MeshBasicMaterial ( { color: boxcolor.toLowerCase() } );
    var theobject   = new THREE.Mesh ( shape, material );
    
    higher = higher + 5;
    theobject.position.y = higher; // stack above last shape

    AB.msg ( `<H1> Users: ${users}/2 </H1> <H1> Your Score:  ${higher} </H1>  <H1 id="cool"> Opponent Score: ${higher2} </H1>`);
    
       if (higher >= 5) // first space start game and remove load screen
   {
    setTimeout(codingCourse, 10000);
    AB.removeSplash();  
   }
    ABWorld.scene.add ( theobject );
    sendscore(higher); // send score to user
    
    AB.socketIn = function(data) // takes in oppenent score and builds opponent tower next to user
{
   higher2 = data.line; 
   var boxcolor = "red";
    var shape       = new THREE.SphereGeometry ( objectsize, objectsize, objectsize );
    var material    = new THREE.MeshBasicMaterial ( { color: boxcolor.toLowerCase() } );
    var theobject   = new THREE.Mesh ( shape, material ); // build opennent tower
    
    theobject.position.y = higher2; // Increase tower height each time
    theobject.position.x = 50; // put towers side by side
     ABWorld.scene.add ( theobject );
};
  }
}

    function sendscore(score)
{
  var theline = score;
  
  var data = 
  {
    line:       theline
  };
  
  AB.socketOut ( data ); // server gets this, and sends the data to all clients running this World
}

AB.socketUserlist = function ( a )  // get information of users available
{ 
    console.log ( "Got user list: " );
    console.log ( JSON.stringify ( a, null, ' ' ) );

    if ( a.length <= 2 )  
    { 
        console.log ( "no users");
        AB.msg ( `<H1> Users: ${users}/2 </H1> <H1> Your Score:  ${higher} </H1>  <H1 id="cool"> Opponent Score: ${higher2} </H1>` );
        
        return; 
    }
    else
    {
        users = 2; // 2 users available to play
          AB.msg ( `<H1> Users: ${users}/2 </H1> <H1> Your Score:  ${higher} </H1>  <H1 id="cool"> Opponent Score: ${higher2} </H1>` );
    }
};


ABWorld.scene.background = new THREE.CubeTextureLoader().load ( SKYBOX_ARRAY,	function() // render background image
	 { 
		ABWorld.render(); 
		AB.removeLoading();
		AB.runReady = true; 		
	 });
	 
var backmusic = AB.backgroundMusic ( MUSIC_BACK ); // play music
	
function musicPlay()   { backmusic.play();  }
function musicPause()  { backmusic.pause(); }
     
};