Add item size and position to eventHandler

public/board.js

@@ -880,6 +880,32 @@ canvas.addEventListener('click', function(event) {
 	var x = event.pageX - canvasLeft,
 	    y = event.pageY - canvasTop;
 
+
+	// Check clicks against itemKey position+size
+	// Will be the new way
+	// TODO:Maybe write this into a function? If XY WH is hit return true, and the itemKey
+	// then it can be re-used in contextclick, hover, etc without rewrite
+	//console.log('X: '+x+' Y: '+y);
+	for(let itemKey = 0; itemKey < item.length; itemKey++){
+
+		if(elements[itemKey] == 'deck'){
+			continue;
+		}
+
+		// Check the item has a size and position
+		if(itemKey in size && itemKey in position){
+			// Compare the event XY position to the item
+			if(clickableCheck(x,y,false,itemKey)){
+				cardStatus[itemKey] = 'tapped';
+			}
+		}
+
+		board.drawBoard();
+
+	}
+
+
+
 	// Collision detection between clicked offset and clickableItems
 	// https://stackoverflow.com/a/9880302
 
@@ -979,7 +1005,20 @@ canvas.addEventListener('click', function(event) {
 
 }, false);
 
-function clickableCheck(x,y,clickable){
+function clickableCheck(x,y,clickable=false,itemKey=false){
+
+	// Temp solution to add the check while the old way also exists
+	// simultaneously. It works, so that's nice
+	if(clickable === false && itemKey !== false){
+		clickable = {};
+		console.log(clickable);
+		console.log(itemKey);
+		clickable.x = position[itemKey][0];
+		clickable.y = position[itemKey][1];
+		clickable.width = size[itemKey][0];
+		clickable.height = size[itemKey][1];
+		console.log(clickable);
+	}
 
 	// Debug Stuff
 	let debug = false