Add tap/untap

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

public/index.html

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

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.

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
+			doiMenuPressed(key);
-			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);
 
 			// 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
 

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

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

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

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

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;

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