Add drawCard method to remove dupe code

Draws a card, when passed x/y/width/height, etc.
Replaced duplicated code

public/board.js

@@ -72,6 +72,30 @@ class Board{
 		}
 	}
 
+	// Draw Invidual Cards, called by other deck stuff
+	// Might be put into a card class, makes sense, eh.
+	drawCard(array, arrayKey, name, positionX, positionY, width, height, fill){
+		var cardClickable = new Shape({
+			name: name,
+			x: positionX,
+			y: positionY,
+			width: cardWidth/2,
+			height: cardHeight/2,
+			fillStyle: fill
+		});
+
+		array[arrayKey]['clickable'] = cardClickable;
+		array[arrayKey]['clickable'].draw();
+
+		// Add card text
+		ctx.fillStyle = '#000';
+		ctx.fillText(
+			array[arrayKey]['name']
+			, positionX + (ctx.measureText(array[arrayKey]['name']/2).width)
+			, positionY+20
+		);
+	}
+
 	drawDeck(){
 		// Deck
 		clickableItems['deckSprite'] = new Shape({
@@ -127,7 +151,7 @@ class Board{
 	}
 
 	// Naming's getting awkward here...
-	// Draw the card
+	// Draw the cards in hand
 	drawHand(){
 		// Player Hand/Cards in Hand
 		for (let i = 0; i < playerHand.length; i++) {
@@ -140,26 +164,10 @@ class Board{
 			// TODO: fix positionX, actually have some maffs
 			let positionX	= canvas.width/2 - ((cardWidth/4 * 2) * (playerHand.length - (i+1)) - (cardPadding * (i+1)));
 			let positionY	= canvas.height - cardHeight/2-20;
-			console.log('drawHand: cardsInHand: '+(i+1)+' / '+playerHand.length);
+			let width	= cardWidth/2;
+			let height	= cardHeight/2;
 
-			clickableItems['hand'][name] = new Shape({
+			this.drawCard(playerHand, i, name, positionX, positionY, width, height, fill);
-				name: name,
-				x: positionX,
-				y: positionY,
-				width: cardWidth/2,
-				height: cardHeight/2,
-				fillStyle: fill
-			});
-			playerHand[i]['clickable'] = clickableItems['hand'][name];
-			playerHand[i]['clickable'].draw();
-
-			// Add card text
-			ctx.fillStyle = '#000';
-			ctx.fillText(
-				playerHand[i]['name']
-				, positionX + (ctx.measureText(playerHand[i]['name']/2).width)
-				, positionY+20
-			);
 		}
 
 	}
@@ -176,27 +184,10 @@ class Board{
 			// TODO: fix positionX, actually have some maffs
 			let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (opponentHand.length - (i+1)) - (cardPadding * (i+1)));
 			let positionY = 20;
-			console.log('drawOpponentHand: cardsInHand: '+(i+1)+' / '+opponentHand.length);
+			let width	= cardWidth/2;
+			let height	= cardHeight/2;
 
-			clickableItems['opponentHand'][name] = new Shape({
+			this.drawCard(opponentHand, i, name, positionX, positionY, width, height, fill);
-				name: name,
-				x: positionX,
-				y: positionY,
-				width: cardWidth/2,
-				height: cardHeight/2,
-				fillStyle: fill
-			});
-
-			opponentHand[i]['clickable'] = clickableItems['opponentHand'][name];
-			opponentHand[i]['clickable'].draw();
-
-			// Add card text
-			ctx.fillStyle = '#000';
-			ctx.fillText(
-				opponentHand[i]['name']
-				, positionX + (ctx.measureText(opponentHand[i]['name']/2).width)
-				, positionY+20
-			);
 		}
 
 	}
@@ -213,7 +204,6 @@ class Board{
 		// Random card from deck, remove from deck, add to hand
 		let cardToDraw	= Math.floor(Math.random() * deckCount);
 		let cardDrawn	= playerDeck[cardToDraw];
-		console.log(cardDrawn);
 		// Remove from deck
 		playerDeck.splice(cardToDraw, 1);
 		// Add to hand
@@ -228,7 +218,6 @@ class Board{
 		// Random card from deck, remove from deck, add to hand
 		let cardToDraw	= Math.floor(Math.random() * deckCountOpponent);
 		let cardDrawn	= opponentDeck[cardToDraw];
-		console.log(cardDrawn);
 		// Remove from deck
 		opponentDeck.splice(cardToDraw, 1);
 		// Add to hand
@@ -238,7 +227,7 @@ class Board{
 
 
 	drawCardsOnBoard(){
-		// DUPER OF DRAW PLAYER HAND FOR NOW!!!
+		// DUPE OF DRAW PLAYER HAND FOR NOW!!!
 		for (let i = 0; i < playerBoard.length; i++) {
 
 			let name = 'cardOnBoard_'+(i+1);
@@ -248,28 +237,19 @@ class Board{
 
 			// TODO: fix positionX, actually have some maffs
 			let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerBoard.length - (i+1)) - (cardPadding * (i+1)));
-			let positionY = canvas.height - cardHeight/2-20;
+			let positionY = canvas.height - cardHeight/2-20-(cardHeight/2);
-			console.log('drawHand: cardsInHand: '+(i+1)+' / '+playerHand.length);
+			let width	= cardWidth/2;
+			let height	= cardHeight/2;
 
-			clickableItems['board'][name] = new Shape({
+			this.drawCard(playerBoard, i, name, positionX, positionY, width, height, fill);
-				name: name,
-				x: positionX,
-				y: positionY-cardHeight/2,
-				width: cardWidth/2,
-				height: cardHeight/2,
-				fillStyle: fill
-			});
-			playerBoard[i]['clickable'] = clickableItems['board'][name];
-			playerBoard[i]['clickable'].draw();
 		}
-
-
 	}
 
 	drawCardsOnBoardOpponent(){
 
 	}
 
+	// Currently only functionality in hand
 	playCardToBoard(index){
 		// Get the card data
 		let cardPlayed = playerHand[index];
@@ -293,7 +273,6 @@ class Board{
 // TEMP!!
 createDeckList(playerDeck, deckCount);
 createDeckList(opponentDeck, deckCountOpponent);
-console.log(playerDeck);
 
 // Run board commands here for testing
 let board = new Board;
@@ -329,15 +308,11 @@ canvas.addEventListener('click', function(event) {
 
 	// # PLAYER HAND
 	playerHand.forEach(function(card, index){
-		console.log(card);
-		console.log(card.clickable);
 
 		let clickable = card.clickable;
 
 		if(clickableCheck(x,y,clickable)){
 
-			console.log('Clicked Hand item: '+ clickable.name);
-
 			board.playCardToBoard(index);
 			
 			// This would actually fire off a socketIO doodad, that would then return