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); + +}); +