Add tap/untap

feature/clientSideSimplify
Nathan Steel 1 year ago
parent 77bef59558
commit fee1a3988e

@ -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
};

@ -131,6 +131,7 @@
<script src="/js/canvas/main.js"></script>
<script src="/js/canvas/helpers.js"></script>
<script src="/js/canvas/draw.js"></script>
<script src="/js/canvas/interactionMenu.js"></script>
<script src="/js/canvas/interaction.js"></script>
<script src="/js/shapes.js"></script>

@ -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.

@ -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

@ -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]]);
}

@ -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 : {},

@ -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

@ -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');

@ -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;

@ -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');

Loading…
Cancel
Save