Add sheild cards

public/board.js

@@ -22,6 +22,8 @@ let playerBoard =	[];
 let opponentBoard =	[];
 let playerDeck = 	[];
 let opponentDeck =	[];
+let playerShield =	[];
+let opponentShield =	[];
 
 let deckCount = 60;
 let deckCountOpponent = 60;
@@ -29,6 +31,7 @@ let deckCountOpponent = 60;
 let cardsInOpponentsHand = 0;
 const maxHandSize = 4;
 const maxBoardSize = 3;
+const maxShield = 4;
 
 let inspectCard = null;
 let attackingCard = null;
@@ -56,6 +59,9 @@ class Board{
 		this.drawDeck();
 		this.drawDeckOpponent();
 
+		this.drawShield();
+		this.drawShieldOpponent();
+
 		this.drawHand();
 		this.drawOpponentHand();
 
@@ -66,13 +72,13 @@ class Board{
 
 	drawPlayerNames(playerName, opponentName = false){
 		// Player Name
-		ctx.fillText(playerName, 50, canvas.height - 110);
+		ctx.fillText(playerName, 50, canvas.height - 50);
 
 		// Opponent's Name
 		if(!opponentName){
 			// Just clear the name
 		}else{
-			ctx.fillText(opponentName, canvas.width - (ctx.measureText(opponentName).width + 50), 110);
+			ctx.fillText(opponentName, canvas.width - (ctx.measureText(opponentName).width + 50), 50);
 		}
 	}
 
@@ -105,48 +111,49 @@ class Board{
 		let cardImageContainer = new Shape({
 			shape: 'semi',
 			name: 'cardImageContainer_'+name,
-			x: positionX+cardHeight/3,
+			x: positionX+height/3,
-			y: positionY+cardWidth/2,
+			y: positionY+width/2,
-			width: cardWidth*.9,
+			width: width*.9,
-			height: cardHeight*.9,
+			height: height*.9,
 			fillStyle: "#BBB"
 		});
 		cardImageContainer.draw();
 
 		// Add card name
-		ctx.font = "bold 10pt Arial";
+		let fontSize = width/cardWidth*10; // 10 = baseFontSize of 10pt
+		ctx.font = "bold "+fontSize+"pt Arial";
 		ctx.fillStyle = '#000';
 		ctx.fillText(
 			array[arrayKey]['name']
 			, positionX + (ctx.measureText(array[arrayKey]['name']/2).width) - width/4
-			, positionY+cardHeight*.25
+			, positionY+height*.25
 		);
 
 		// Add card type
 		ctx.fillText(
 			array[arrayKey]['type']
 			, positionX + (ctx.measureText(array[arrayKey]['type']/2).width) - width/4
-			, positionY+cardHeight*.7
+			, positionY+height*.7
 		);
 		// Add text/effect area
 		if(array[arrayKey]['effect'] !== null){
 			ctx.fillText(
 				array[arrayKey]['effect']
 				, positionX + (ctx.measureText(array[arrayKey]['effect']/2).width) - width/4
-				, positionY+cardHeight*.8
+				, positionY+height*.8
 			);
 		}
 		// Attack
 		ctx.fillText(
 			array[arrayKey]['atk']
 			, positionX + (ctx.measureText(array[arrayKey]['atk']).width)
-			, positionY+cardHeight*.95
+			, positionY+height*.95
 		);
 		// Add cost
 		ctx.fillText(
 			array[arrayKey]['cost']
 			, positionX + (ctx.measureText(array[arrayKey]['cost']).width)
-			, positionY+cardHeight*.1
+			, positionY+height*.1
 		);
 
 		// Unbold font for other draws
@@ -414,6 +421,91 @@ class Board{
 		attackingCard = null;
 		this.drawBoard();
 	}
+
+	// Like everything else, need to consolidate into one function that
+	// can work for both players, and even more for 2v2 3v1 combats, etc.
+	playShield(shieldsToPlay = 4){
+		for(let shieldNo = 0; shieldNo < shieldsToPlay; shieldNo++){
+			if(playerShield.length >= maxShield){
+				alert('Shield zone full '+playerShield.length+'/'+maxShield);
+				return 0;
+			}
+
+			// Random card from deck, remove from deck, add to hand
+			let cardToDraw	= Math.floor(Math.random() * deckCount);
+			let cardDrawn	= playerDeck[cardToDraw];
+			// Remove from deck
+			playerDeck.splice(cardToDraw, 1);
+			// Add to shield zone
+			playerShield.push(cardDrawn);
+			this.drawBoard();
+		}
+	}
+	playShieldOpponent(shieldsToPlay = 4){
+		for(let shieldNo = 0; shieldNo < shieldsToPlay; shieldNo++){
+			if(opponentShield.length >= maxShield){
+				alert('Shield zone full '+opponentShield.length+'/'+maxShield);
+				return 0;
+			}
+
+			// Random card from deck, remove from deck, add to hand
+			let cardToDraw	= Math.floor(Math.random() * deckCount);
+			let cardDrawn	= opponentDeck[cardToDraw];
+			// Remove from deck
+			opponentDeck.splice(cardToDraw, 1);
+			// Add to shield zone
+			opponentShield.push(cardDrawn);
+			this.drawBoard();
+		}
+	}
+	drawShield(){
+		for (let i = 0; i < playerShield.length; i++) {
+
+			let name = 'playerShield_'+(i+1);
+
+			let shieldMargin = 10;
+			let fromX	= 60;
+			let fromY	= 300;
+			let fill = '#'+i+i+'0000';
+			let cWidth	= cardWidth*.8;
+			let cHeight	= cardHeight*.8;
+			let split	= 0;
+			if(i>=2){ split = 1; }
+
+			// i%2 0 = 0, 1 = 1, 2 = 0, 3 = 1 to prevent margin from X/Y axis, and just between cards
+			let positionX	= (fromX+((i%2)*shieldMargin)) +(i%2*cWidth);
+			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);
+		}
+	}
+	drawShieldOpponent(){
+		for (let i = 0; i < opponentShield.length; i++) {
+
+			let name = 'opponentShield_'+(i+1);
+
+			let shieldMargin = 10;
+			let fromX	= canvas.width-60;
+			let fromY	= 300;
+			let fill = '#'+i+i+'0000';
+			let cWidth	= cardWidth*.8;
+			let cHeight	= cardHeight*.8;
+			let split	= 0;
+			if(i>=2){ split = 1; }
+
+			// i%2 0 = 0, 1 = 1, 2 = 0, 3 = 1 to prevent margin from X/Y axis, and just between cards
+			let positionX	= (fromX+((i%2)*shieldMargin))+(i%2*cWidth)-(cWidth*2);
+			let positionY	= fromY+(split*cHeight+(shieldMargin*split))-(cHeight*2 + shieldMargin);
+			let width	= cWidth;
+			let height	= cHeight;
+			console.log('i: '+i+' X: '+positionX+' Y: '+positionY);
+
+			this.drawCard(opponentShield, i, name, positionX, positionY, width, height, fill);
+		}
+	}
 }
 
 // TEMP!!
@@ -428,6 +520,10 @@ let board = new Board;
 board.playCardToBoardFromDeckOpponent();
 
 board.drawBoard();
+
+board.playShield(4);
+board.playShieldOpponent(4);
+
 board.drawACard(3);
 
 canvas.addEventListener('click', function(event) {