Move drawDecks to one method, Fix deck counter

public/board.js

@@ -83,8 +83,7 @@ class Board{
 		this.drawCardsOnBoard();
 		this.drawCardsOnBoardOpponent();
 
-		this.drawDeck();
-		this.drawDeckOpponent();
+		this.drawDecks();
 
 		this.drawShield();
 		this.drawShieldOpponent();
@@ -360,58 +359,100 @@ class Board{
 		ctx.font = "10pt Arial";
 	}
 
-	drawDeck(){
-		// Deck
-		clickableItems['deckSprite'] = new Shape({
-			name: 'deck',
-			x: canvas.width-cardWidth*1.5-40,
-			y: canvas.height-cardHeight*1.5-60,
-			width: cardWidth*1.5,
-			height: cardHeight*1.5,
-			fillStyle: "#0000FF"
-		});
-		//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
-		clickableItems['deckSprite'].draw();
-		let deckCounterSprite = new Shape({
-			shape: 'circle',
-			name: 'deckCounter',
-			x: canvas.width-cardWidth*.6,
-			y: canvas.height-cardHeight*.6,
-			width: cardWidth*.375,
-			height: cardHeight*.375,
-			fillStyle: "#FFF"
-		});
-		deckCounterSprite.draw();
+	drawDecks(){
+		// Draw all decks belonging to players (currently 2, could be 3-5 in future, for PvE raids)
+		// TODO: Probably add this as an item of boardElement 'realDeck', as 'deck' is cards in deck
+		// 	 actually, maybe change current 'deck' to 'inDeck', reads better
+		let name = null;
+		let countername = null;
+		let x = null;
+		let counterx = null;
+		let y = null;
+		let countery = null;
+		let width = null;
+		let counterwidth = null;
+		let height = null;
+		let counterheight = null;
+		let fill = null;
+		let counterfill = '#FFF';
+		let textx = null;
+		let texty = null;
+		let deckLength = 0;
+
+		for(let playerId = 0; playerId < players; playerId++){
+			if(playerId == 0){
+				// Deck
+				name= 'deck';
+				x= canvas.width-cardWidth*1.5-40;
+				y= canvas.height-cardHeight*1.5-60;
+				width= cardWidth*1.5;
+				height= cardHeight*1.5;
+				fill= "#0000FF";
+
+				countername= 'deckCounter';
+				counterx= canvas.width-cardWidth*.6;
+				countery= canvas.height-cardHeight*.6;
+				counterwidth= cardWidth*.375;
+				counterheight= cardHeight*.375;
+
+				// TODO: Center in the circle
+				deckLength = getCurrentPositionAndLength('deck', 0)[1];
+				textx = canvas.width-cardWidth*.6 - (ctx.measureText(deckLength).width) + 7;
+				texty =	canvas.height-cardHeight*.6 + 5;
+			}
+			if(playerId == 1){
+				// Opponent's Deck
+				name= 'deckOpponent';
+				x= 40;
+				y= 60;
+				width= cardWidth*1.5;
+				height= cardHeight*1.5;
+				fill= "#FF0000";
+
+				countername= 'deckCounterOpponent';
+				counterx= cardWidth*1.5+(cardWidth*.375);
+				countery= cardHeight*1.5+(cardHeight*.375);
+				counterwidth= cardWidth*.375;
+				counterheight= cardHeight*.375;
+				counterfill= "#FFF";
+
+				deckLength = getCurrentPositionAndLength('deck', 1)[1];
+				textx=cardWidth*1.5 + (ctx.measureText(deckLength).width) + 10;
+				texty=cardHeight*1.9;
 
-		// TODO: Center in the circle
-		ctx.fillStyle = '#000';
-		ctx.fillText(playerDeck.length, canvas.width-cardWidth*.6 - (ctx.measureText(playerDeck.length).width) + 7, canvas.height-cardHeight*.6 + 5);
-	}
-	drawDeckOpponent(){
-		// Opponent's Deck
-		clickableItems['deckOpponentSprite'] = new Shape({
-			name: 'deckOpponent',
-			x: 40,
-			y: 60,
-			width: cardWidth*1.5,
-			height: cardHeight*1.5,
-			fillStyle: "#FF0000"
-		});
-		clickableItems['deckOpponentSprite'].draw();
-		let deckCounterOpponentSprite = new Shape({
-			shape: 'circle',
-			name: 'deckCounterOpponent',
-			x: cardWidth*1.5+(cardWidth*.375),
-			y: cardHeight*1.5+(cardHeight*.375),
-			width: cardWidth*.375,
-			height: cardHeight*.375,
-			fillStyle: "#FFF"
-		});
-		deckCounterOpponentSprite.draw();
+			}
+
+			// Actually draw the decks base on the size/position, etc.
+			clickableItems[name+'Sprite'] = new Shape({
+				name: name,
+				x: x,
+				y: y,
+				width: width, 
+				height: height,
+				fillStyle: fill 
+			});
+			//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
+			clickableItems[name+'Sprite'].draw();
+
+			// Draw circle for deck count to sit in
+			let deckCounterSprite = new Shape({
+				shape: 'circle',
+				name: countername,
+				x: counterx,
+				y: countery,
+				width: counterwidth,
+				height: counterheight,
+				fillStyle: counterfill
+			});
+			console.log(deckCounterSprite);
+			deckCounterSprite.draw();
+
+			// Draw deck count text
+			// TODO: Center in the circle
+			ctx.fillStyle = '#000';
+			ctx.fillText(deckLength, textx, texty);
+		}
 
-		ctx.fillStyle = '#000';
-		// TODO: Center in the circle
-		ctx.fillText(opponentDeck.length, cardWidth*1.5 + (ctx.measureText(opponentDeck.length).width) + 10, cardHeight*1.9);
 	}
 
 	addFromBoardElement(playerFrom, fromPosition, elementFrom, elementTo, toPosition=null, playerTo=null){