/*

// 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

*/


x = 0;
y = 0;
let speed = 10;

document.onkeydown = function(e) {

	let ludzik = document.getElementById("ludzik");
	
	switch (e.keyCode) {
		case 37:
			//alert('left');
			x -= speed;
			nextCostiume("left");
			break;
		case 38:
			//alert('up');
			y -= speed;
			nextCostiume("up");
			break;
		case 39:
			//alert('right');
			x += speed;
			nextCostiume("right");
			break;
		case 40:
			//alert('down');
			y += speed;
			nextCostiume("down");
			break;
	}

	ludzik.style.setProperty("left", x + "px");
	ludzik.style.setProperty("top", y + "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
	
	//if(checkCollision(ludzik,napis2)){
	//	napis2.style.display = "none";
	//	//napis1.style.display = "none";
	//}

}


let checkCollision = function(napis1,napis2){
	isCollision = false;

	let rect1 = napis1.getBoundingClientRect();
	let rect2 = napis2.getBoundingClientRect();
	
	var leftToRight = rect1.left + rect1.width > rect2.left;
	var rightToLeft = rect2.left + rect2.width > rect1.left;
	var upToDown = rect1.top + rect1.height > rect2.top;
	var DownToUp = rect2.top + rect2.height > rect1.top;
	
	if (leftToRight && rightToLeft && upToDown && DownToUp){
		isCollision = true;	
	}
	
	return isCollision;
};

let flag = true;

function nextCostiume(direction){	
	
	if (flag){
		ludzik.src = "ludzik2.png";
		flag = false;
	}else{
		ludzik.src = "ludzik1.png";
		flag = true;
	}
	switch(direction){
		case "left":
			ludzik.style.transform = 'scaleX(-1)';
			break;
		case "right":
			ludzik.style.transform = 'scaleX(1)';
			break;
		case "up":
			ludzik.style.transform = 'rotate(270deg)';
			break;
		case "down":
			ludzik.style.transform = 'rotate(90deg)';
			break;	
	}
}