Code viewer for World: Websockets Project (clone ...

// Cloned by Jack on 17 Nov 2022 from World "Websockets Project" by Gareth Hogan 
// Please leave this clone trail here.
 
// Cloned by Gareth Hogan on 12 Nov 2022 from World "Websockets boxes" by Starter user 
// Please leave this clone trail here.

//--------------------------------------------------------------------------------------------------------------
// CONSTS AND VARS
//--------------------------------------------------------------------------------------------------------------

AB.clockTick = 100;  // Speed of run: Step every n milliseconds. Default 100.
AB.maxSteps = 200;  // Length of run: Maximum length of run in steps. Default 1000.
AB.screenshotStep = 100;  // Take screenshot on this step. (All resources should have finished loading.) Default 50.

//  '/uploads/gareth22/Barry_Benson_TradingCard.jpg'
const FILE_ARRAY = [
		"/uploads/gareth22/dirt.jpg",
		"/uploads/gareth22/diamond.jpg",
		"/uploads/gareth22/redstone.jpg",
		"/uploads/gareth22/redglass.jpg",
		"/uploads/gareth22/blueglass.jpg",
        "/uploads/gareth22/blorb.jpg",
        "/uploads/gareth22/rorb.jpg"
		];
const SKYCOLOR 	= 0x87CEEB;				// a number, not a string 
const ARMYSIZE = 100;       // an "army" of objects 
const gridsize = 10;			// number of squares along side of world	   
const objectsize = 100;
const NumBoxes = gridsize*gridsize;
const MAXPOS = gridsize * objectsize;            // start things within these bounds                    
const startRadiusConst = MAXPOS;	// distance from centre to start the camera at
const maxRadiusConst = MAXPOS * 5 ;		// maximum distance from camera we will render things

const GRID_BLANK = 0;
const GRID_USER1 = 1; 
const GRID_USER2 = 4; 
const GRID_COLOUR1 = 2;
const GRID_COLOUR2 = 3;

const ACTION_LEFT = 0;		   
const ACTION_RIGHT = 1;
const ACTION_UP = 2;		 
const ACTION_DOWN = 3;


ABHandler.MAXCAMERAPOS = MAXPOS; 
ABWorld.drawCameraControls = false; 
AB.drawRunControls = false;
ABHandler.GROUNDZERO = true;	

var step;
var textureArray = new Array(FILE_ARRAY.length);
var GRID = new Array(gridsize);
var ai, aj; //player 1
var bi, bj; //player 2 
var player1, player2; // the orb objects

//--------------------------------------------------------------------------------------------------------------
// PRELOAD RESOURCES
//--------------------------------------------------------------------------------------------------------------

function loadResources() // asynchronous file loads - call initScene() when all finished 
{
	for ( var i = 0; i < FILE_ARRAY.length; i++ ) 
	    startFileLoad ( i ); // launch n asynchronous file loads
}

function startFileLoad ( n ) // asynchronous file load of texture n 
{
	var loader = new THREE.TextureLoader();

	loader.load ( FILE_ARRAY[n], function ( thetexture )  	 
	{
		thetexture.minFilter  = THREE.LinearFilter;
		textureArray[n] = thetexture;
		if(asynchFinished()) 
            initScene();
	});	
}
 
function asynchFinished() // all file loads returned 
{
	for ( var i = 0; i < FILE_ARRAY.length; i++ )
    { 
		if(!textureArray[i]) 
			return false;
    }
	return true;
}

//--------------------------------------------------------------------------------------------------------------
// SETUP GRID
//--------------------------------------------------------------------------------------------------------------

function initScene() // called when all textures ready 
{
    var i, j, shape, theobject, borb, rorb;

    for (i = 0; i < gridsize ; i++) 
        GRID[i] = new Array(gridsize);	
    

    // MAKING CUBES

    for (i = 0; i < gridsize ; i++){
        for (j = 0; j < gridsize ; j++){
            GRID[i][j] = GRID_BLANK;
            shape = new THREE.BoxGeometry(objectsize, objectsize, objectsize);
            theobject = new THREE.Mesh(shape);
            
            theobject.material = new THREE.MeshBasicMaterial({map: textureArray[0]});   
              
            theobject.position.copy(translate(i,j)); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates 
            ABWorld.scene.add(theobject);
        }
    }

    // PLAYER ORBS
    borb = new THREE.SphereGeometry(50,32,16);
    rorb = new THREE.SphereGeometry(50,32,16);
    player1 = new THREE.Mesh(borb);
    player2 = new THREE.Mesh(rorb);
    player1.material = new THREE.MeshBasicMaterial({map: textureArray[5]});   
    player2.material = new THREE.MeshBasicMaterial({map: textureArray[6]}); 
    
    position1 = translateOrb(0,0)
    player1.position.copy(position1)

    position2 = translateOrb(9,9)
    player2.position.copy(position2)

    ABWorld.scene.add(player1);
    ABWorld.scene.add(player2);

    ai = 0;
    aj = 0;
    bi = 9;
    bj = 9;

    GRID[ai][aj] = GRID_USER1;
    GRID[bi][bj] = GRID_USER2;

    console.log(GRID);
    // can start the run loop
  
	ABWorld.render();		
	AB.removeLoading();
  	AB.runReady = true; 
}

function translate(i, j)			
{
	var v = new THREE.Vector3();
	
	v.y = 0;	
	v.x = (i * objectsize) - (MAXPOS/2);   		 
	v.z = (j * objectsize) - (MAXPOS/2);   	
	
	return v;
}

function translateOrb(i, j)			
{
	var v = new THREE.Vector3();
	
	v.y = 100;	
	v.x = (i * objectsize) - (MAXPOS/2);   		 
	v.z = (j * objectsize) - (MAXPOS/2);   	
	
	return v;
}


function occupied(i, j)		// is this square occupied
{
    return(GRID[i][j] == GRID_USER1 || GRID[i][j] == GRID_USER2);
}

//--------------------------------------------------------------------------------------------------------------
// MOVEMENT
//--------------------------------------------------------------------------------------------------------------

// arrow keys : LEFT, UP, RIGHT, DOWN, A, W, D, S
var OURKEYS = [ 37, 38, 39, 40, 65, 87, 68, 83];

function ourKeys(event) { 
    return(OURKEYS.includes(event.keyCode)); 
}
function keyHandler(event)		
{
	if(!AB.runReady)return true;
	if(!ourKeys(event)) return true;
	

	if(event.keyCode == 65) moveUser(ACTION_LEFT, 1); 
    if(event.keyCode == 87) moveUser(ACTION_DOWN, 1); 
    if(event.keyCode == 68) moveUser(ACTION_RIGHT, 1); 
    if(event.keyCode == 83) moveUser(ACTION_UP, 1); 

	if(event.keyCode == 37) moveUser(ACTION_LEFT, 2);   
    if(event.keyCode == 38) moveUser(ACTION_DOWN, 2); 	 
    if(event.keyCode == 39) moveUser(ACTION_RIGHT, 2); 	 
    if(event.keyCode == 40) moveUser(ACTION_UP, 2);   
	
    AB.socketStart(event)

	event.stopPropagation(); event.preventDefault(); return false;
}

function moveUser(action, player)			 
{ 
    if(player == 1){ // ai aj is where the player was, i j will be where they move to
        var i = ai;
        var j = aj;
    }
    else if(player == 2){
        var j = bj;
        var i = bi;
    }		 

    if (action == ACTION_LEFT ){
        if(i > 0) i--;
        else return;
    }
    else if (action == ACTION_RIGHT ){
        if(i < 9) i++;
        else return;
    }
    else if (action == ACTION_UP ){
        if(j < 9) j++;
        else return;
    }
    else if (action == ACTION_DOWN){
        if(j > 0) j--;
        else return;
    }

    if (!occupied(i,j)) // else just miss a turn 
    {
        if(player == 1){ //diamond
            GRID[ai][aj] = GRID_COLOUR1;
            shape = new THREE.BoxGeometry(objectsize, objectsize, objectsize);
            theobject = new THREE.Mesh(shape);
            theobject.material = new THREE.MeshBasicMaterial({map: textureArray[1]});
            theobject.position.copy(translate(ai,aj)); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates 
            ABWorld.scene.add(theobject);
            
            position = translateOrb(i,j)
            player1.position.copy(position)
        
            GRID[i][j] = GRID_USER1;
            shape = new THREE.BoxGeometry(objectsize, objectsize, objectsize);
            theobject = new THREE.Mesh(shape);
            theobject.material = new THREE.MeshBasicMaterial({map: textureArray[4]}); // where user is
            theobject.position.copy(translate(i,j)); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates 
            ABWorld.scene.add(theobject);
        }
        else if(player == 2){ //redstone
            GRID[bi][bj] = GRID_COLOUR2;
            shape = new THREE.BoxGeometry(objectsize, objectsize, objectsize);
            theobject = new THREE.Mesh(shape);
            theobject.material = new THREE.MeshBasicMaterial({map: textureArray[2]});
            theobject.position.copy(translate(bi,bj)); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates 
            ABWorld.scene.add(theobject);
                        
            position = translateOrb(i,j)
            player2.position.copy(position)

            GRID[i][j] = GRID_USER2;
            shape = new THREE.BoxGeometry(objectsize, objectsize, objectsize);
            theobject = new THREE.Mesh(shape);
            theobject.material = new THREE.MeshBasicMaterial({map: textureArray[3]}); // where user is
            theobject.position.copy(translate(i,j)); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates 
            ABWorld.scene.add(theobject);
        }	

        if(player == 1){
            ai = i;
            aj = j;
        }
        else if(player == 2){
            bi = i;
            bj = j;
        }	
        //theagent.position.copy(translate(ai,aj)); 		  	// translate my (i,j) grid coordinates to three.js (x,y,z) coordinates 
    }

    console.log(GRID)
}

//--------------------------------------------------------------------------------------------------------------
// AB WORLD FUNCTIONS
//--------------------------------------------------------------------------------------------------------------

AB.socketStart();

if ( AB.socket )
  if ( AB.socket.connected )
    AB.socketOut ( data );

AB.world.newRun = function() 
{
	AB.loadingScreen();
	AB.runReady = false;  
	ABWorld.init3d(startRadiusConst, maxRadiusConst, SKYCOLOR ); 
	loadResources();		// aynch file loads, calls initScene() when it returns 
    document.onkeydown = keyHandler;
    step = 0;
};

function updatestatus(){
    var status = "<font size=5 face=verdana> Time: <br>" + step + "</font>" ; 
    $("#user_span3").html(status);
};

AB.world.nextStep = function()
{
    step++;
    updatestatus();
};

function countScore(){
    scoreP1 = 1;
    scoreP2 = 1;

    for (i = 0; i < gridsize ; i++){
        for (j = 0; j < gridsize ; j++){

            if (GRID[i][j] == 2){
                scoreP1 += 1;
            }
            else if(GRID[i][j] == 3){
                scoreP2 += 1;
            }
        }
    }
    console.log(scoreP1)
    console.log(scoreP2)

    if(scoreP1 > scoreP2){
        winner = "<br> <font color=blue> <B> The winner is ... PLAYER 1 </B> </font>"
    }
    else if (scoreP2 > scoreP1){
        winner = "<br> <font color=red> <B> The winner is ... PLAYER 2 </B> </font>"
    }
    else{
        winner = "<br> <font color=red> <B> The game was a Draw</B> </font>"
    }
    return(winner);
}

AB.world.endRun = function()
{
    if(step == 200)
    {
       $("#user_span4").html("<font size=5 face=verdana> <B>TIME UP</B> </font>");
    }
    winner = countScore();
    AB.msg(winner, 7)
};
//--------------------------------------------------------------------------------------------------------------
// SOCKETS
//--------------------------------------------------------------------------------------------------------------

// function baby()  
// {    
//     changeBox(5);    
//     AB.socketOut(5); 
// }
// function skull() 
// {    
//     changeBox(6);    
//     AB.socketOut(6); 
// }

// function changeBox(n)   // change a random box to texture n (5 or 6) 
// {
//     var i = AB.randomIntAtoB (0, THEARMY.length - 1);     // pick a random box to change 
//     THEARMY[i].material =  new THREE.MeshBasicMaterial ( { map: textureArray[n] } );   
// }

AB.socketIn = function(n)       // incoming data on socket, i.e. clicks of other player 
{
    keyHandler(n);
};