Fix opponentDeck and draw to hand

public/board.js

@@ -169,17 +169,28 @@ 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);
 
 			clickableItems['opponentHand'][name] = new Shape({
 				name: name,
 				x: positionX,
-				y: 20,
+				y: positionY,
 				width: cardWidth/2,
 				height: cardHeight/2,
 				fillStyle: fill
 			});
-			clickableItems['opponentHand'][name].draw();
+
+			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
+			);
 		}
 
 	}
@@ -208,6 +219,14 @@ class Board{
 			alert('Hand full '+opponentHand.length+'/'+maxHandSize);
 			return 0;
 		}
+		// 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
+		opponentHand.push(cardDrawn);
 		this.drawBoard();
 	}
 
@@ -287,9 +306,6 @@ canvas.addEventListener('click', function(event) {
 	}
 
 	// # PLAYER HAND
-	clickableHand = clickableItems['hand'];
-	let handLength = Object.keys(clickableHand).length;
-
 	playerHand.forEach(function(card, index){
 		console.log(card);
 		console.log(card.clickable);
@@ -312,12 +328,10 @@ canvas.addEventListener('click', function(event) {
 	});
 
 
-
 }, false);
 
 function clickableCheck(x,y,clickable){
 
-	console.log('click Event: '+clickable.name);
 	// Debug Stuff
 	let debug = false
 	if(debug){