entities/interaction.js

// Which interaction occurred for logic checks
const INTERACTION = {
	 'left_click'	: 0
	, 0				: 'left_click'
	,'right_click'	: 1
	, 1				: 'right_click'
};

// Mouse data
const MOUSE = {
	down	: false
	,x		: 0
	,y		: 0
	,button	: [0,0,0] // Left, Middle, Right
};

// Keypress data
const KEYPRESS = {
	 w		: 0
	,a		: 0
	,s		: 0
	,d		: 0
	,shift	: 0
}


// MOUSE
// https://stackoverflow.com/a/29957988
canvas.addEventListener('mousedown', function(event) {
	MOUSE.button[event.button] = 1; // Button down bool
	MOUSE.down = true;
});
canvas.addEventListener('mouseup', function(event) {
	MOUSE.button[event.button] = 0; // Button not down bool
	MOUSE.down = false;
});
canvas.addEventListener('mouseout', function(event) {
	MOUSE.down = false;
});
canvas.addEventListener('mousemove', function(event) {
	MOUSE.x = event.pageX - canvasLeft;
	MOUSE.y = event.pageY - canvasTop;
});


// Left click
canvas.addEventListener('click', function(event) {

	entityInteractionCheck(
		event.pageX - canvasLeft,
		event.pageY - canvasTop,
		INTERACTION.left_click
	);

});

// Right click
canvas.addEventListener('contextmenu', function(event) {

	event.preventDefault();

	entityInteractionCheck(
		event.pageX - canvasLeft,
		event.pageY - canvasTop,
		INTERACTION.right_click
	);

});


// Check if something has been clicked (via position)
// Allows to pass an entity OR an area to check
function clickableCheck(cursorX,cursorY,entity = null, area = null){

	if(entity == null && area == null){ return false; }
	if(entity != null){
		// Set area to size/pos of entity
		area = {
			'x': position[entity].x,
			'y': position[entity].y,
			'width': size[entity].width,
			'height': size[entity].height
		}
	}

	// Collision detection between clicked offset and clickableItems
	// https://stackoverflow.com/a/9880302
	if(
		cursorY > area['y'] && cursorY < area['y'] + area['height']
		&& cursorX > area['x'] && cursorX < area['x'] + area['width']
	)
	{
		return true;
	}

	return false;
	
}


// KEYBOARD
window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);

function onKeyDown(event) {

	if(event.shiftKey){ KEYPRESS.shift = true; }

	var keyCode = event.keyCode;
	switch (keyCode) {
		case 87:
			KEYPRESS.w = true;
			break;
		case 65:
			KEYPRESS.a = true;
			break;
		case 83:
			KEYPRESS.s = true;
			break;
		case 68:
			KEYPRESS.d = true;
			break;
		
	}
}

function onKeyUp(event) {

	if(event.shiftKey){ KEYPRESS.shift = false; }

	var keyCode = event.keyCode;
	switch (keyCode) {
		case 87:
			KEYPRESS.w = false;
			break;
		case 65:
			KEYPRESS.a = false;
			break;
		case 83:
			KEYPRESS.s = false;
			break;
		case 68:
			KEYPRESS.d = false;
			break;
		
	}
}


// HELPERS (Should be for all)
function entityInteractionCheck(x,y,interaction){

	// Loop the entities that are interactable
	// I.e. Have size, and positions

	console.log('Interaction: '+INTERACTION[interaction]);
	console.log('Positions; X: '+x+' Y: '+y);


	for (const [entity] of Object.entries(size)) {
		
		// If there's no position (or size), skip
		if(position[entity] === undefined){ continue; }

		// If the X/Y of cursor isn't within the shape's bounds can't interact
		if(!clickableCheck(x,y,entity)){
			continue;
		}

		console.log('Entity: '+entity);
		console.log('Entities Total live: '+entityLive);
		console.log('Entities Total overall: '+entityCount);

		switch (interaction) {
			case INTERACTION.left_click:
				
				break;
		
			default:
				break;
		}
		

	}

}