Add a basic 'interactionMenu' for entities

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

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]
+		cursorY > positions['y'] && cursorY < positions['y'] + positions['height']
-		&& cursorX > gameData.position[entity][0] && cursorX < gameData.position[entity][0] + gameData.size[entity][0]
+		&& 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
+
 	}
 
 });

public/js/game/components.js

@@ -17,6 +17,9 @@ let gameData		= {
 		hand		: {},
 	},
 
+	inInteractionMenu	: {},
+	interactionOption	: {},
+
 
 	// Real components from here?
 	listPosition		: {},