diff --git a/gameMod.js b/gameMod.js index ed538fe..50c7eda 100644 --- a/gameMod.js +++ b/gameMod.js @@ -529,6 +529,15 @@ function shuffleDeck(roomId, playerId){ } +function tapCard(roomId, playerId, cardId){ + global.roomData[roomId].itemData.component.cardStatus.tapped[cardId] = cardId; + global.socketResponseTapped(roomId, cardId); +} +function untapCard(roomId, playerId, cardId){ + delete(global.roomData[roomId].itemData.component.cardStatus.tapped[cardId]); + global.socketResponseUntapped(roomId, cardId); +} + // DATA RETURNER DUDES // TODO: Where to put this? Kind of a helper, kind of functionality. Hmmmmm @@ -590,5 +599,8 @@ module.exports = { ,playManaFromHand ,acceptResolveStack ,gameStart + // TEMP + ,tapCard + ,untapCard }; diff --git a/public/index.html b/public/index.html index 5caa311..adde21e 100644 --- a/public/index.html +++ b/public/index.html @@ -131,6 +131,7 @@ + diff --git a/public/js/canvas/draw.js b/public/js/canvas/draw.js index c14b0f8..286280b 100644 --- a/public/js/canvas/draw.js +++ b/public/js/canvas/draw.js @@ -369,6 +369,8 @@ function drawCardOnBoard(entity){ // TODO: Tapped, Attacking, Targettable, Activatable borders // TODO: Passives, flight, etc. effects + let strokeStyle = '#AAA'; + if(entity in gameData.cardStatus.tapped){ strokeStyle = '#555'; } // Draw the card shape let shape = new Shape({ x: gameData.position[entity][0], @@ -376,7 +378,7 @@ function drawCardOnBoard(entity){ width: gameData.size[entity][0], height: gameData.size[entity][1], fillStyle: '#EEE', - strokeStyle: '#AAA', + strokeStyle: strokeStyle, }); shape.draw(); @@ -388,6 +390,20 @@ function drawShield(entity){ // TODO: Tapped drawCardBack(entity); + let strokeStyle = '#AAA'; + if(entity in gameData.cardStatus.tapped){ strokeStyle = '#555'; } + // Draw the card shape + let shape = new Shape({ + x: gameData.position[entity][0], + y: gameData.position[entity][1], + width: gameData.size[entity][0], + height: gameData.size[entity][1], + fillStyle: false, + strokeStyle: strokeStyle, + }); + shape.draw(); + + } function drawMana(entity){ @@ -398,6 +414,19 @@ function drawMana(entity){ // TODO: Tapped drawCardBack(entity); + let strokeStyle = '#AAA'; + if(entity in gameData.cardStatus.tapped){ strokeStyle = '#555'; } + // Draw the card shape + let shape = new Shape({ + x: gameData.position[entity][0], + y: gameData.position[entity][1], + width: gameData.size[entity][0], + height: gameData.size[entity][1], + fillStyle: false, + strokeStyle: strokeStyle, + }); + shape.draw(); + } // The draw all the card data, name, colour, etc. @@ -620,58 +649,6 @@ 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. diff --git a/public/js/canvas/interaction.js b/public/js/canvas/interaction.js index a4b0d8d..b62991e 100644 --- a/public/js/canvas/interaction.js +++ b/public/js/canvas/interaction.js @@ -26,20 +26,6 @@ function clickableCheck(cursorX,cursorY,entity = null, positions = null){ } -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) { @@ -53,6 +39,9 @@ canvas.addEventListener('click', function(event) { // with them if they exist if(interactionMenuAvailable()){ + // TODO: Maybe speed this up, pass the entity clicked and get just iMenu + // data of that entity + // Loop interaction menu positions and 'trigger' the event for (const [key, value] of Object.entries(gameData.interactionOption)) { @@ -62,16 +51,7 @@ canvas.addEventListener('click', function(event) { continue; } - // TODO: Checks for the actual entities position too - if(key == 'Play to Board'){ - requestPlayFromHand(gameData.listPosition[gameData.inInteractionMenu[Object.keys(gameData.inInteractionMenu)[0]]]) - } - - if(key == 'Play as Mana'){ - requestPlayManaFromHand(gameData.listPosition[gameData.inInteractionMenu[Object.keys(gameData.inInteractionMenu)[0]]]) - } - - console.log(key); + doiMenuPressed(key); // After an interaction, clear the menu to prevent redraw clearInteractionMenu(); @@ -123,6 +103,8 @@ canvas.addEventListener('click', function(event) { return true; } + openInteractionMenu(key); + // TODO:If clicked anywhere but an interaction option, // close interaction option diff --git a/public/js/canvas/interactionMenu.js b/public/js/canvas/interactionMenu.js new file mode 100644 index 0000000..0ad0d25 --- /dev/null +++ b/public/js/canvas/interactionMenu.js @@ -0,0 +1,146 @@ +function clearInteractionMenu(){ + // Clear the existing interaction menu + gameData.inInteractionMenu = {}; + gameData.interactionOption = {}; + drawGameBoard(); +} +function openInteractionMenu(entity){ + + console.log('open interaction menu: '+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 + if(entity in gameData.hand){ + 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 + // TAP (TEMP TODO: remove or add in a statement to hide) + if(entity in gameData.cardStatus.tapped){ + gameData.interactionOption['Untap'] = { + 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 + } + }else{ + gameData.interactionOption['Tap'] = { + 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 + } + } + + + let addEffects = true; + if(entity in gameData.shield || entity in gameData.mana){ + addEffects = false; + } + // Add interaction options for effects of the card + if(addEffects && gameData.cardData[entity] !== undefined && gameData.cardData[entity].effect.length > 0){ + + + for(let i = 0; i < gameData.cardData[entity].effect.length; i++){ + // TODO: Check if effect is triggerable from it's location + // If not don't add effect trigger. If it is, but criteria not met + // add but grey out (need to add this functionality to interaction menu) + 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 interactionMenuAvailable(){ + + if(Object.entries(gameData.inInteractionMenu).length == 0){ + return false; + } + + if(Object.entries(gameData.interactionOption).length == 0){ + return false; + } + + return true; + +} + + +function doiMenuPressed(iMenuKey){ + console.log(iMenuKey); + + // TODO: Checks for the actual entities position too + if(iMenuKey == 'Play to Board'){ + iMenuPlayToBoard(); + } + + if(iMenuKey == 'Play as Mana'){ + iMenuPlayAsMana(); + } + + // TODO: Trigger effect + + if(iMenuKey == 'Tap'){ + iMenuTap(); + } + if(iMenuKey == 'Untap'){ + iMenuUntap(); + } + + +} +function iMenuPlayToBoard(){ + requestPlayFromHand(gameData.listPosition[gameData.inInteractionMenu[Object.keys(gameData.inInteractionMenu)[0]]]) +} +function iMenuPlayAsMana(){ + requestPlayManaFromHand(gameData.listPosition[gameData.inInteractionMenu[Object.keys(gameData.inInteractionMenu)[0]]]) +} +function iMenuTriggerEffect(){ + console.log('iMenuTriggerEffect'); +} +function iMenuTap(){ + console.log('iMenuTap'); + // This gets the entity ID (the key of entity that's iMenu has been clicked) + console.log(Object.keys(gameData.inInteractionMenu)[0]); + // TEMP for testing, should select all 'target' cards, and 'accept' then server will tap + // them all and return the new tapped list + requestTapCard(gameData.inInteractionMenu[Object.keys(gameData.inInteractionMenu)[0]]); +} +function iMenuUntap(){ + // Like above, TEMP for testing TODO: get rid of these and let server do it when things are further on + console.log('iMenuTap'); + // This gets the entity ID (the key of entity that's iMenu has been clicked) + console.log(Object.keys(gameData.inInteractionMenu)[0]); + requestUntapCard(gameData.inInteractionMenu[Object.keys(gameData.inInteractionMenu)[0]]); +} + diff --git a/public/js/game/components.js b/public/js/game/components.js index e77259c..c7f874c 100644 --- a/public/js/game/components.js +++ b/public/js/game/components.js @@ -11,6 +11,7 @@ let gameData = { turn : 0, playerTurn : 0, players : null, + player : {}, cardCount : { deck : {}, @@ -29,7 +30,14 @@ let gameData = { // Real components from here? listPosition : {}, cardData : {}, - player : {}, + cardStatus : { + tapped : {}, + attacking : {}, + inspected : {}, + }, + + + // Board elements deck : {}, hand : {}, board : {}, diff --git a/public/js/game/dataUpdate.js b/public/js/game/dataUpdate.js index 2c5ec4d..df9324d 100644 --- a/public/js/game/dataUpdate.js +++ b/public/js/game/dataUpdate.js @@ -98,6 +98,13 @@ function updateMana(data){ gameData.cardColours = data.cardColours; } +// Tapped +function updateTapped(data){ + console.log(data); + gameData.cardStatus.tapped = data; + console.log(gameData.cardStatus.tapped); +} + // To prevent typical functionality (draw, etc.) // if there's a stack in play. // TODO: Can only chain the stack or resolve it diff --git a/public/js/game/socket.js b/public/js/game/socket.js index b855da5..4d525c7 100644 --- a/public/js/game/socket.js +++ b/public/js/game/socket.js @@ -96,6 +96,31 @@ socket.on('responseUpdateShield', function (data) { updateShield(data); }); +// Tappage +function requestTapCard(cardId){ + console.log('>> tapCard'); + socket.emit('requestTapCard', gameData.roomId, gameData.playerId, cardId); +} +function requestUntapCard(cardId){ + console.log('>> untapCard'); + socket.emit('requestUntapCard', gameData.roomId, gameData.playerId, cardId); +} +socket.on('responseTapped', function (data) { + // The playerId that played it for animations + console.log('<< tapped'); + console.log(data); + updateTapped(data[1]); // 0 is card tapped, 1 is all tapped cards + drawGameBoard(); +}); +socket.on('responseUntapped', function (data) { + // The playerId that played it for animations + console.log('<< untapped'); + console.log(data); + updateTapped(data[1]); + drawGameBoard(); +}); + + // Stack socket.on('responseAddToStack', function (data) { console.log('<< addToStack'); diff --git a/public/js/shapes.js b/public/js/shapes.js index 515d13e..ea21546 100644 --- a/public/js/shapes.js +++ b/public/js/shapes.js @@ -14,7 +14,7 @@ class Shape extends Path2D{ this.y = params.y || 0; this.width = params.width || 0; this.height = params.height || 0; - this.fillStyle = params.fillStyle || "#FFFFFF"; + this.fillStyle = params.fillStyle || false; this.strokeStyle = params.strokeStyle || false; this.lineWidth = params.lineWidth || 0; this.shadow = params.shadow || false; diff --git a/server.js b/server.js index a94f6de..eed3f07 100644 --- a/server.js +++ b/server.js @@ -70,11 +70,20 @@ function onConnection(socket){ gameMod.playManaFromHand(roomId, playerId, listPosition); }); + // Stack socket.on('requestResolveStack', function(roomId, playerId) { gameMod.acceptResolveStack(roomId, playerId); console.log('resolve stack yep yep yep'); }); + + socket.on('requestTapCard', function(roomId, playerId, card) { + gameMod.tapCard(roomId, playerId, card); + }); + socket.on('requestUntapCard', function(roomId, playerId, card) { + gameMod.untapCard(roomId, playerId, card); + }); + } global.getPlayerSocketFromRoom = function(playerId, roomId){ @@ -228,6 +237,15 @@ global.socketResponsePlayedShield = function(roomId, playerId){ } +global.socketResponseTapped = function(roomId, card){ + let data = [card, global.roomData[roomId].itemData.component.cardStatus.tapped]; + global.sendToEachSocket(roomId, 'responseTapped', data); +} +global.socketResponseUntapped = function(roomId, card){ + let data = [card, global.roomData[roomId].itemData.component.cardStatus.tapped]; + global.sendToEachSocket(roomId, 'responseUntapped', data); +} + // Stack global.socketResponseAddToStack = function(roomId){ global.sendToEachSocket(roomId, 'responseAddToStack', 'testData');