diff --git a/public/index.html b/public/index.html
index e3e7560..c637292 100644
--- a/public/index.html
+++ b/public/index.html
@@ -130,6 +130,7 @@
+
@@ -137,7 +138,7 @@
-
+
diff --git a/public/js/canvas/interaction.js b/public/js/canvas/interaction.js
new file mode 100644
index 0000000..a284756
--- /dev/null
+++ b/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);
+
+});
+