Add mana and basic mana tap/summon cons

public/board.js

@@ -24,6 +24,8 @@ let playerDeck = 	[];
 let opponentDeck =	[];
 let playerShield =	[];
 let opponentShield =	[];
+let playerMana =	[];
+let opponentManaZone =	[];
 
 let deckCount = 60;
 let deckCountOpponent = 60;
@@ -66,6 +68,8 @@ class Board{
 		this.drawHand();
 		this.drawOpponentHand();
 
+		this.drawMana();
+
 		this.drawPlayerNames('Nathan', 'Evil Nathan');
 
 		if(gameWin){
@@ -114,6 +118,18 @@ class Board{
 		if(colourId == 0){ fill = '#EEE' }
 		else if(colourId == 1){ fill = '#0033EE' }
 
+		if(name == 'playerMana_1'){
+			console.log(playerMana);
+			console.log(array);
+			console.log(array[arrayKey]);
+			console.log(array[arrayKey].tapped);
+			console.log(name);
+		}
+		if(array[arrayKey].tapped){
+			border = '#E0BC00';
+			console.log('drawCard tapped');
+		}
+
 		var cardClickable = new Shape({
 			name: name,
 			x: positionX,
@@ -371,6 +387,25 @@ class Board{
 			return 0;
 		}
 
+		if(cardPlayed.cost > playerMana.length){
+			alert('Not enough mana');
+			return 0;
+		}else{
+			let canPlay = false;
+			playerMana.forEach(function(manaCard, key){
+				if(cardPlayed.colour == manaCard.colour && manaCard.tapped == false){
+					canPlay = true;
+					playerMana[key].tapped = true;
+				}
+			});
+
+			if(!canPlay){
+				alert('Mana conditions not met');
+				return 0;
+			}
+		}
+		console.log(playerMana);
+
 		// Remove from hand
 		playerHand.splice(index, 1);
 		// Add to board
@@ -447,6 +482,8 @@ class Board{
 		}
 		if(attackingCard[0].atk <= defendingCard.atk){
 			playerBoard.splice(attackingCard[1], 1);
+		}else{
+			playerBoard[attackingCard[1]].tapped = true;
 		}
 		console.log('attacking');
 		this.endAttack();
@@ -517,7 +554,6 @@ class Board{
 			let positionY	= canvas.height-fromY+(split*cHeight+(shieldMargin*split));
 			let width	= cWidth;
 			let height	= cHeight;
-			console.log('i: '+i+' X: '+positionX+' Y: '+positionY);
 
 			this.drawCard(playerShield, i, name, positionX, positionY, width, height, fill);
 		}
@@ -541,11 +577,50 @@ class Board{
 			let positionY	= fromY+(split*cHeight+(shieldMargin*split))-(cHeight*2 + shieldMargin);
 			let width	= cWidth;
 			let height	= cHeight;
-			console.log('i: '+i+' X: '+positionX+' Y: '+positionY);
+			//console.log('i: '+i+' X: '+positionX+' Y: '+positionY);
 
 			this.drawCard(opponentShield, i, name, positionX, positionY, width, height, fill);
 		}
 	}
+
+	playMana(index, fromDeck = 0){
+		let manaCard = null;
+		if(fromDeck){
+			let cardToDraw	= Math.floor(Math.random() * deckCount);
+			manaCard	= playerDeck[cardToDraw];
+			// Remove from deck
+			playerDeck.splice(cardToDraw, 1);
+		}else{
+			manaCard = playerHand[index];
+			playerHand.splice(index, 1);
+		}
+
+		playerMana.push(manaCard);
+
+		this.drawBoard();
+	}
+	drawMana(){
+		for (let i = 0; i < playerMana.length; i++) {
+
+			let name = 'playerMana_'+(i+1);
+
+			let manaMargin = 10;
+			let fromX	= 60;
+			let fromY	= 60;
+			let fill = '#BBB';
+			let cWidth	= cardWidth*.5;
+			let cHeight	= cardHeight*.5;
+			let split	= 0;
+
+			// i%2 0 = 0, 1 = 1, 2 = 0, 3 = 1 to prevent margin from X/Y axis, and just between cards
+			let positionX	= (fromX+manaMargin)+(i*cWidth-manaMargin);
+			let positionY	= canvas.height-fromY;
+			let width	= cWidth;
+			let height	= cHeight;
+
+			this.drawCard(playerMana, i, name, positionX, positionY, width, height, fill);
+		}
+	}
 }
 
 // TEMP!!
@@ -585,9 +660,7 @@ canvas.addEventListener('click', function(event) {
 	// https://stackoverflow.com/a/9880302
 
 	if(inspectCard !== null){
-		console.log(inspectCard);
 		clickable = inspectCard[0][inspectCard[1]].clickable;
-		console.log(clickable);
 
 		if(clickableCheck(x,y,clickable)){
 			console.log('clicked inspect card');
@@ -626,7 +699,11 @@ canvas.addEventListener('click', function(event) {
 
 		if(clickableCheck(x,y,clickable) && !specialEvent){
 
+			if(confirm("Play as unit or mana. OK = unit, cancel = mana. No actual cancel...")){
 				board.playCardToBoard(index);
+			}else{
+				board.playMana(index);
+			}
 			
 			// This would actually fire off a socketIO doodad, that would then return
 			// data, and redraw. But for now (UI test)
@@ -721,6 +798,7 @@ function createDeckList(deck, deckCount){
 			, 'effect':effect
 			, 'type':'human'
 			, 'colour':colour
+			, 'tapped':false
 		});
 	}
 }

public/shapes.js

@@ -45,12 +45,10 @@ class Shape extends Path2D{
 		if (this.strokeStyle && this.lineWidth || shapeDebug) {
 			context.strokeStyle = this.strokeStyle;
 			context.lineWidth = this.lineWidth;
+			context.lineWidth = 2;
+
 			if(!this.strokeStyle && shapeDebug){
 				context.strokeStyle = shapeDebugColour;
-				context.lineWidth = 2;
-			}
-			if(this.strokeStyle){
-				context.lineWidth = 2;
 			}
 			if(this.shape == 'circle'){
 				// X,Y,Radius, start, end