// Over a few chapters, we are working up to a "Battleship" style Websocket game.

// Ch.2
// Getting used to coding.

// Getting the student more used to coding with a variant of the single block World, before we do more advanced things.
// Will now have two blocks with two textures.
// Will introduce the concept of an "if" statement.


// TOP TIPS FOR CODERS:
// do not open run window each time
// keep run window open and "reload" when you make a change
// keep the JavaScript "console" open in the run window so you can see syntax errors 



// === start of code ===========================================================================================================


 const TEXTURE_WALL 	= '/uploads/chapters/stone.png' ;
 const TEXTURE_SHIP 	= '/uploads/chapters/ship.png' ;
 
// credit:
// https://commons.wikimedia.org/wiki/File:Square_stone_brick_Texture.jpg
// https://commons.wikimedia.org/wiki/File:Regina_Maris.JPG
 

	ABWorld.init3d ( 500, 2000, 'lightyellow'  );           

// loading two textures is more complex
// we will separate it into a function that we will call "loadTextures", and we will define it later
// note you can move pretty much any code into a function and give it a name

    loadTextures();
     
     
// put a note in the "run header" to show the user they can move the camera 					
 
    AB.msg ( "Drag and scroll the mouse to move and zoom the camera.");		 

 


// these are "global" variables - any part of the program can access these
// they are used to keep track of whether the textures have loaded yet or not 

var ship_texture;       // default value is "undefined" - when this has a value, we know ship texture has loaded
var wall_texture;


	
function loadTextures()		  
{
	var loader1 = new THREE.TextureLoader();
	var loader2 = new THREE.TextureLoader();
	
	// the two images will load from file
	// we are not actually sure which one will finish first 
	// this is "asynchronous" coding - it can take a bit of getting used to!
		
	loader1.load ( TEXTURE_SHIP, function ( texture )  	 
	{
		ship_texture = texture;                 // ship_texture now has a value
		if ( wall_texture )	makeBlocks();		// if both textures have loaded we can make the blocks 
	});	

  // if ( wall_texture ) ...
  // An "if" statement checks if some condition is true and then executes some code if it is
  // https://www.w3schools.com/jsref/jsref_if.asp

	loader2.load ( TEXTURE_WALL, function ( texture )  		
	{
		wall_texture = texture;                 // wall_texture now has a value
		if ( ship_texture )	makeBlocks();		// if both textures have loaded we can make the blocks 
	});	
}

	
function makeBlocks()	
// this is called when we have finished loading BOTH textures
{
     // define all the variables we will use 
     // don't have to define all these in one place but sometimes it makes the code tidier 
     var shape, position, ship, wall; 
     
	 shape   = new THREE.BoxGeometry ( 100, 100, 100 );		// shape parameters are: width, height, depth  

// put the ship block in the scene:	 
	 ship = new THREE.Mesh( shape );                     
 	 ship.material = new THREE.MeshBasicMaterial( { map: ship_texture } );     
 	 position = new THREE.Vector3 ( 0, 0, 0 );          // position in 3D space - parameters are x,y,z numbers 
 	 ship.position.copy ( position ); 
	 ABWorld.scene.add(ship);  
	 
// put the wall block in the scene:	 
	 wall = new THREE.Mesh( shape );                     
 	 wall.material = new THREE.MeshBasicMaterial( { map: wall_texture } );     
 	 position = new THREE.Vector3 ( 200, 200, 200 );          // position in 3D space - parameters are x,y,z numbers 
 	 wall.position.copy ( position ); 
	 ABWorld.scene.add(wall);                       
}


// === end of code ===========================================================================================================



 
// Exercises:
// Make two blocks with two textures.
// Change to your own wall image and ship image
// Try putting blocks at position that goes off screen.
// Advanced exercise: Put blocks at randomly generated locations each time (see "Randomisation functions" in Docs)
// Advanced exercise: Make 3 blocks with 3 textures. Careful with your "if" statements trying to figure out if all 3 have loaded. 
 

// Outcomes: Student can:
// Understand how JavaScript has to wait until resources are loaded.
// Learn how to use an if statement.
// Learn how to look at bounds for function parameters.
// Learn how to use help files while coding.