Add basic interaction to 'new' canvas

public/index.html

@@ -130,6 +130,7 @@
 		<script src="/js/canvas/main.js"></script>
 		<script src="/js/canvas/helpers.js"></script>
 		<script src="/js/canvas/draw.js"></script>
+		<script src="/js/canvas/interaction.js"></script>
 
 		<script src="/js/shapes.js"></script>
 
@@ -137,7 +138,7 @@
 		<!-- Sockets likely rely on other things existing -->
 		<script src="/js/game/socket.js"></script>
 
-		<script src="/js/board.js"></script>
+		<!-- <script src="/js/board.js"></script> -->
 		<script src="/js/helper.js"></script>
 		<script src="/js/effect.js"></script>
 		<script src="/js/debug.js"></script>

public/js/canvas/interaction.js

@@ -0,0 +1,63 @@
+// Clickable checks, event listeners, etc.
+
+function clickableCheck(cursorX,cursorY,entity){
+
+	// Collision detection between clicked offset and clickableItems
+	// https://stackoverflow.com/a/9880302
+	if(
+		cursorY > gameData.position[entity][1] && cursorY < gameData.position[entity][1] + gameData.size[entity][1]
+		&& cursorX > gameData.position[entity][0] && cursorX < gameData.position[entity][0] + gameData.size[entity][0]
+	)
+	{
+		return true;
+	}
+
+	return false;
+	
+}
+
+// Left click
+canvas.addEventListener('click', function(event) {
+
+	var x = event.pageX - canvasLeft,
+	    y = event.pageY - canvasTop;
+
+
+	console.log('LEFT CLICK X: '+x+' Y: '+y);
+
+	for (const [key, value] of Object.entries(gameData.size)) {
+		// Key is item here
+		
+		// If there's no position data skip, can't interact
+		if(gameData.position === undefined){
+			continue;
+		}
+
+		// If the X/Y of cursor isn't within the shape's bounds can't interact
+		if(!clickableCheck(x,y,key)){
+			continue;
+		}
+
+		// If it's deck atm
+		if(gameData.deck[key] !== undefined){
+			// If deck belongs to player
+			if(gameData.player[key] == gameData.playerId){
+				requestDrawACard();
+			}
+		}
+
+	}
+
+});
+
+// Right click
+canvas.addEventListener('contextmenu', function(event) {
+	event.preventDefault();
+
+	var x = event.pageX - canvasLeft,
+	    y = event.pageY - canvasTop;
+
+	console.log('RIGHT CLICK X: '+x+' Y: '+y);
+
+});
+