From 652a3deb4fcb47d5be3edbf549f9079bf1f67e69 Mon Sep 17 00:00:00 2001 From: Nathan Date: Tue, 12 Nov 2024 00:29:28 +0000 Subject: [PATCH] Add a basic 'interactionMenu' for entities --- public/js/canvas/draw.js | 90 +++++++++++++++++++++++++++++++-- public/js/canvas/interaction.js | 77 ++++++++++++++++++++++++++-- public/js/game/components.js | 3 ++ 3 files changed, 163 insertions(+), 7 deletions(-) diff --git a/public/js/canvas/draw.js b/public/js/canvas/draw.js index 830af62..12133ff 100644 --- a/public/js/canvas/draw.js +++ b/public/js/canvas/draw.js @@ -129,6 +129,11 @@ function drawEntities(){ drawCardInHand(key); } + if(key in gameData.inInteractionMenu){ + // Add the menu with 'play', 'activate effect', 'inspect', etc. + drawInteractionMenu(key); + } + } } @@ -186,7 +191,7 @@ function drawCardInHand(entity){ // The draw all the card data, name, colour, etc. function drawCardDetails(entity){ - console.log(gameData.cardData[entity]); + //console.log(gameData.cardData[entity]); drawCardImage(entity); // TODO: Use a sprite per card, not just temp. drawCardText(entity); /* @@ -347,8 +352,6 @@ function drawCardBack(entity){ // console. An issue that comes with making this in JS... function drawFakeHand(){ - console.log('Draw FAKE hand'); - // itemList length is the count (/highest listPosition) in the hand in this case // i is the listPosition of the entity (which since this isn't using the entities at the mo...) @@ -393,3 +396,84 @@ function drawFakeHand(){ } +function clearInteractionMenu(){ + // Clear the existing interaction menu + gameData.inInteractionMenu = {}; + gameData.interactionOption = {}; + drawGameBoard(); +} +function openInteractionMenu(entity){ + // Only one interaction menu up at once (for now) + clearInteractionMenu(); + + // Add the 'new' entity interactionMenu + gameData.inInteractionMenu[entity] = entity; + + // Add the available interaction(s) with size+positions + + // TODO: Actually add the corresponding interactions depending on card, and boardElement + gameData.interactionOption['Play to Board'] = { + x: gameData.position[entity][0] + gameData.size[entity][0]*.1/2, + y: gameData.position[entity][1] + gameData.size[entity][1] - (35 * (Object.entries(gameData.interactionOption).length + 1)), + width: gameData.size[entity][0]*.9, + height: 30 + } + gameData.interactionOption['Play as Mana'] = { + x: gameData.position[entity][0] + gameData.size[entity][0]*.1/2, + y: gameData.position[entity][1] + gameData.size[entity][1] - (35 * (Object.entries(gameData.interactionOption).length + 1)), + width: gameData.size[entity][0]*.9, + height: 30 + } + + // Interact + // Attack + // Tap + // Do, x/y + // Yadda yadda + + // Add interaction options for effects of the card + if(gameData.cardData[entity] !== undefined && gameData.cardData[entity].effect.length > 0){ + + for(let i = 0; i < gameData.cardData[entity].effect.length; i++){ + gameData.interactionOption['Trigger Effect '+(i+1)] = { + x: gameData.position[entity][0] + gameData.size[entity][0]*.1/2, + y: gameData.position[entity][1] + gameData.size[entity][1] - (35 * (Object.entries(gameData.interactionOption).length + 1)), + width: gameData.size[entity][0]*.9, + height: 30 + } + } + + } + + drawGameBoard(); +} + +function drawInteractionMenu(entity){ + // Draws the interactable options availabe for an entity + // TODO: Draw atop/below depening on position, etc. + + for (const [key, value] of Object.entries(gameData.interactionOption)) { + + // Draw the interaction box (TODO: make much better); + let menuItem = new Shape({ + x: value.x, + y: value.y, + width: value.width, + height: value.height, + fillStyle: '#DDD', + strokeStyle: '#666' + }); + menuItem.draw(); + + // Add the text + printText( + key + ,value.x + value.width/2 + ,value.y + value.height/2 + , 'center', 'middle', 'normal', 'normal', 8, 'Arial', '#333', false, false, false + ); + + } + +} + diff --git a/public/js/canvas/interaction.js b/public/js/canvas/interaction.js index a284756..ebf5026 100644 --- a/public/js/canvas/interaction.js +++ b/public/js/canvas/interaction.js @@ -1,12 +1,22 @@ // Clickable checks, event listeners, etc. -function clickableCheck(cursorX,cursorY,entity){ +function clickableCheck(cursorX,cursorY,entity = null, positions = null){ + + if(entity == null && positions == null){ return false; } + if(entity != null){ + positions = { + 'x': gameData.position[entity][0], + 'y': gameData.position[entity][1], + 'width': gameData.size[entity][0], + 'height': gameData.size[entity][0] + } + } // 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] + cursorY > positions['y'] && cursorY < positions['y'] + positions['height'] + && cursorX > positions['x'] && cursorX < positions['x'] + positions['width'] ) { return true; @@ -16,6 +26,20 @@ function clickableCheck(cursorX,cursorY,entity){ } +function interactionMenuAvailable(){ + + if(Object.entries(gameData.inInteractionMenu).length == 0){ + return false; + } + + if(Object.entries(gameData.interactionOption).length == 0){ + return false; + } + + return true; + +} + // Left click canvas.addEventListener('click', function(event) { @@ -25,6 +49,32 @@ canvas.addEventListener('click', function(event) { console.log('LEFT CLICK X: '+x+' Y: '+y); + // First check for interaction menu and options and interact + // with them if they exist + if(interactionMenuAvailable()){ + + // Loop interaction menu positions and 'trigger' the event + for (const [key, value] of Object.entries(gameData.interactionOption)) { + + // If one of the options is clicked, trigger it + // Passes x,y,w,h of the interactionOption + if(!clickableCheck(x,y,null,value)){ + continue; + } + + console.log(key); + + // Then return true to prevent another interaction + return true; + } + + } + + // If ANYWHERE but an interactionOption selected, close the interactionMenu + clearInteractionMenu(); + + // Loop the entities that are interactable + // I.e. Have size, and positions for (const [key, value] of Object.entries(gameData.size)) { // Key is item here @@ -38,14 +88,33 @@ canvas.addEventListener('click', function(event) { continue; } - // If it's deck atm + // TODO: Other checks, in event/animation, can be interacted with + // etc, etc. + + // If it's deck if(gameData.deck[key] !== undefined){ // If deck belongs to player if(gameData.player[key] == gameData.playerId){ requestDrawACard(); } + return true; } + // Card in hand + if(gameData.hand[key] !== undefined){ + // If entity belongs to player (for now, will be able to use + // opponents hand at certain times in future) + if(gameData.player[key] == gameData.playerId){ + console.log(key); + openInteractionMenu(key); + } + + return true; + } + + // TODO:If clicked anywhere but an interaction option, + // close interaction option + } }); diff --git a/public/js/game/components.js b/public/js/game/components.js index f368fe7..bfd019b 100644 --- a/public/js/game/components.js +++ b/public/js/game/components.js @@ -17,6 +17,9 @@ let gameData = { hand : {}, }, + inInteractionMenu : {}, + interactionOption : {}, + // Real components from here? listPosition : {},