Add play card from hand to board

public/board.js

@@ -9,6 +9,9 @@ const cards = new Image();
 const back = new Image();
 
 let clickableItems = [];
+// Make all clickableItems sit in the same clickableItems array
+// Not needed in a child, as loops will be on arrays below
+clickableItems['board'] = [];
 clickableItems['hand'] = [];
 clickableItems['opponentHand'] = [];
 
@@ -45,6 +48,9 @@ class Board{
 		// Room Name
 		ctx.fillText(name, 0, 10);
 
+		this.drawCardsOnBoard();
+		this.drawCardsOnBoardOpponent();
+
 		this.drawDeck();
 		this.drawDeckOpponent();
 
@@ -233,27 +239,28 @@ class Board{
 
 	drawCardsOnBoard(){
 		// DUPER OF DRAW PLAYER HAND FOR NOW!!!
-		for (let i = 0; i < playerHand.length; i++) {
+		for (let i = 0; i < playerBoard.length; i++) {
 
-			let name = 'cardInHand_'+(i+1);
+			let name = 'cardOnBoard_'+(i+1);
 
 			let cardPadding = 10;
-			let fill = '#'+i+i+'FF00';
+			let fill = '#'+i+i+'CC00';
 
 			// TODO: fix positionX, actually have some maffs
-			let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerHand.length - (i+1)) - (cardPadding * (i+1)));
+			let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerBoard.length - (i+1)) - (cardPadding * (i+1)));
+			let positionY = canvas.height - cardHeight/2-20;
 			console.log('drawHand: cardsInHand: '+(i+1)+' / '+playerHand.length);
 
-			clickableItems['hand'][name] = new Shape({
+			clickableItems['board'][name] = new Shape({
 				name: name,
 				x: positionX,
-				y: canvas.height - cardHeight/2-20,
+				y: positionY-cardHeight/2,
 				width: cardWidth/2,
 				height: cardHeight/2,
 				fillStyle: fill
 			});
-			playerHand[i]['clickable'] = clickableItems['hand'][name];
-			playerHand[i]['clickable'].draw();
+			playerBoard[i]['clickable'] = clickableItems['board'][name];
+			playerBoard[i]['clickable'].draw();
 		}
 
 
@@ -263,8 +270,23 @@ class Board{
 
 	}
 
-	playCardToBoard(){
+	playCardToBoard(index){
+		// Get the card data
+		let cardPlayed = playerHand[index];
 
+		// Check if there's space on board to play
+		// TODO: Check this in back-end
+		if(playerBoard.length >= maxBoardSize){
+			alert('No space on board to play card. '+playerBoard.length+'/'+maxBoardSize);
+			return 0;
+		}
+
+		// Remove from hand
+		playerHand.splice(index, 1);
+		// Add to board
+		playerBoard.push(cardPlayed);
+
+		this.drawBoard();
 	}
 }
 
@@ -316,8 +338,7 @@ canvas.addEventListener('click', function(event) {
 
 			console.log('Clicked Hand item: '+ clickable.name);
 
-			// Remove from hand
-			playerHand.splice(index, 1);
+			board.playCardToBoard(index);
 			
 			// This would actually fire off a socketIO doodad, that would then return
 			// data, and redraw. But for now (UI test)