/*

// code of keys
https://gcctech.org/csc/javascript/javascript_keycodes.htm

arrow left 	37
arrow up 	38
arrow right 39
arrow down 	40

w 	87
s 	83
a 	65
d 	68

*/


x1 = 20;
y1 = 30;

x1_old = 20;
y1_old = 30;

x2 = 80;
y2 = 50;

//let isCollision = false;

let collisionLeft = false;
let collisionRight = false;
let collisionUp = false;
let collisionDown = false;


document.onkeydown = function(e) {
	let info = document.getElementById("info");
	let napis1 = document.getElementById("napis1");
	let napis2 = document.getElementById("napis2");	
	


		switch (e.keyCode) {
			case 37:
				//alert('left');
				if(!checkCollision("left", napis1, napis2, info)){
					x1 -= 1;
				}
				
				break;
			case 38:
				//alert('up');
				if(!checkCollision("up", napis1, napis2, info)){
					y1 -= 1;
				}
				break;
			case 39:
				//alert('right');
				if(!checkCollision("right", napis1, napis2, info)){
					x1 +=1;
				}
				break;
			case 40:
				//alert('down');
				if(!checkCollision("down", napis1, napis2, info)){
					y1 +=1;
				}
				break;
			case 65:
				//alert('a');
				if(!checkCollision("left", napis2, napis1, info)){
					x2 -= 1;
				}
				break;
			case 87:
				//alert('w');
				if(!checkCollision("up", napis2, napis1, info)){
					y2 -= 1;
				}
				break;
			case 68:
				//alert('d');
				if(!checkCollision("right", napis2, napis1, info)){
					x2 +=1;
				}
				break;
			case 83:
				//alert('s');
				if(!checkCollision("down", napis2, napis1, info)){
					y2 +=1;
				}
				break;
		}
		//napis1.style.left = x1;

		napis1.style.setProperty("left", x1 + "px");
		napis1.style.setProperty("top", y1 + "px");

		napis2.style.setProperty("left", x2 + "px");
		napis2.style.setProperty("top", y2 + "px");

	
// collision
// https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

// wymiary elementu
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect


};



function checkCollision(direction, napis1, napis2, info){

	let isCollision = false;
	let rect1 = napis1.getBoundingClientRect();
	let rect2 = napis2.getBoundingClientRect();

    rect1_width =  Math.round(rect1.width);
	rect1_height = Math.round(rect1.height);
	rect1_left = Math.round(rect1.left);
	rect1_top = Math.round(rect1.top);

	rect2_width =  Math.round(rect2.width);
	rect2_height = Math.round(rect2.height);
	rect2_left = Math.round(rect2.left);
	rect2_top = Math.round(rect2.top);

	info.innerHTML = rect1_width + " " 
					+ rect1_height + " " 
					+ rect1_left + " " +  rect1_top 
					+ "<br>"  + rect2_width
					+  rect2_height  
					+ " " + rect2_left + " " +  rect2_top;

	
	switch (direction){
		case "right":
			if (rect1_left + rect1_width + 1 > rect2_left &&  // right
				rect1_top + rect1_height > rect2_top &&   // down
				rect2_top + rect2_height > rect1_top &&   // up
				rect1_left < rect2_left){                 // rect1 is on the left of rect2 
				isCollision = true;
				info.innerHTML += " collision right";
			}else{
				isCollision = false;
			}
			break;
		case "up":
			if (rect1_left + rect1_width > rect2_left && 	// right
				rect2_left + rect2_width > rect1_left && 	// left
				rect2_top + rect2_height + 1 > rect1_top && // up
				rect1_top > rect2_top){						// rect 1 is below rect 2 
				isCollision = true;
				info.innerHTML += " collision up";
			}else{
				isCollision = false;
			}
			break;
		case "left":
			if (rect2_left + rect2_width + 1 > rect1_left &&  // left
				rect1_top + rect1_height > rect2_top &&   // down
				rect2_top + rect2_height > rect1_top &&   // up
				rect1_left > rect2_left){                 // rect1 is on the right of rect2    
				isCollision = true;
				info.innerHTML += " collision left";
			}else{
				isCollision = false;
			}
			break;
		case "down":
			if (rect1_left + rect1_width > rect2_left &&  	// right
				rect2_left + rect2_width > rect1_left &&  	// left
				rect1_top + rect1_height + 1 > rect2_top && // down
				rect1_top < rect2_top){						// rect 1 is above rect 2
				isCollision = true;
				info.innerHTML += " collision down";
			}else{
				isCollision = false;
			}
			break;
	}				

	console.log("right: " + (rect1_left + rect1_width + 1) +  " > " + rect2_left);
	console.log("left: " + (rect2_left + rect2_width + 1) +  " > " + rect1_left);
	console.log("down: " + (rect1_top + rect1_height + 1) +  " > " + rect2_top);
	console.log("up: " + (rect2_top + rect2_height) +  " > " + rect1_top);
	
	return isCollision;
}