From 85b0704a4efb1fa3a2fd7a65433aa312117e108b Mon Sep 17 00:00:00 2001 From: Nathan Date: Fri, 11 Oct 2024 16:42:14 +0100 Subject: [PATCH] Add item size and position to eventHandler --- public/board.js | 41 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/public/board.js b/public/board.js index 042a3aa..61fd6c9 100644 --- a/public/board.js +++ b/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