Add playerDeck, and draw from playerDeck

public/board.js

@@ -8,7 +8,6 @@ const cardHeight = 360;
 const cards = new Image();
 const back = new Image();
 
-
 let clickableItems = [];
 clickableItems['hand'] = [];
 clickableItems['opponentHand'] = [];
@@ -18,6 +17,8 @@ let playerHand =	[];
 let opponentHand =	[];
 let playerBoard =	[];
 let opponentBoard =	[];
+let playerDeck = 	[];
+let opponentDeck =	[];
 
 let deckCount = 60;
 let deckCountOpponent = 60;
@@ -87,8 +88,10 @@ class Board{
 			fillStyle: "#FFF"
 		});
 		deckCounterSprite.draw();
+
 		// TODO: Center in the circle
-		ctx.fillText(deckCount, canvas.width-cardWidth/5 - (ctx.measureText(deckCount).width) + 7, canvas.height-cardHeight/5 + 5);
+		ctx.fillStyle = '#000';
+		ctx.fillText(playerDeck.length, canvas.width-cardWidth/5 - (ctx.measureText(playerDeck.length).width) + 7, canvas.height-cardHeight/5 + 5);
 	}
 	drawDeckOpponent(){
 		// Opponent's Deck
@@ -101,7 +104,7 @@ class Board{
 			fillStyle: "#FF0000"
 		});
 		clickableItems['deckOpponentSprite'].draw();
-		let deckCounterSprite = new Shape({
+		let deckCounterOpponentSprite = new Shape({
 			shape: 'circle',
 			name: 'deckCounterOpponent',
 			x: cardWidth/2+(cardWidth/8),
@@ -110,12 +113,11 @@ class Board{
 			height: cardHeight/8,
 			fillStyle: "#FFF"
 		});
-		deckCounterSprite.draw();
+		deckCounterOpponentSprite.draw();
 
 		ctx.fillStyle = '#000';
-		ctx.strokeStyle = '#000';
 		// TODO: Center in the circle
-		ctx.fillText(deckCountOpponent, cardWidth/2 + (ctx.measureText(deckCount).width) + 10, cardHeight/1.58);
+		ctx.fillText(opponentDeck.length, cardWidth/2 + (ctx.measureText(opponentDeck.length).width) + 10, cardHeight/1.58);
 	}
 
 	// Naming's getting awkward here...
@@ -131,18 +133,27 @@ 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);
 
 			clickableItems['hand'][name] = new Shape({
 				name: name,
 				x: positionX,
-				y: canvas.height - cardHeight/2-20,
+				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
+			);
 		}
 
 	}
@@ -182,7 +193,14 @@ class Board{
 			return 0;
 		}
 
-		playerHand.push({'name':'CardName', 'cost':1, 'atk':1, 'def':1, 'rarity': 'common', 'effect':null, 'type':'human'});
+		// 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
+		playerHand.push(cardDrawn);
 		this.drawBoard();
 	}
 	drawACardOpponent(){
@@ -231,6 +249,11 @@ class Board{
 	}
 }
 
+// TEMP!!
+createDeckList(playerDeck, deckCount);
+createDeckList(opponentDeck, deckCountOpponent);
+console.log(playerDeck);
+
 // Run board commands here for testing
 let board = new Board;
 //board.initBoard();
@@ -314,3 +337,11 @@ function clickableCheck(x,y,clickable){
 	
 }
 
+// TEMP: Create a deck of X different cards that can be drawn/played
+// for UI development, will be done on server and not shown to clients
+function createDeckList(deck, deckCount){
+	for(let i = 0; i < deckCount; i++){
+		deck.push({'name':'CardName '+(i+1), 'cost':1, 'atk':1, 'def':1, 'rarity': 'common', 'effect':null, 'type':'human'});
+	}
+}
+

public/shapes.js

@@ -1,7 +1,9 @@
 // https://stackoverflow.com/a/29676404
 
 context = document.getElementById("canvas").getContext("2d");
-defaultFillStyle = '#000';
+let defaultFillStyle = '#000';
+let shapeDebug = true;
+let shapeDebugColour = '#FF00FF';
 
 class Shape extends Path2D{
 	constructor(params){
@@ -17,27 +19,37 @@ class Shape extends Path2D{
 		this.lineWidth = params.lineWidth || 0;
 	}
 	draw(){
+		//console.log('Draw Shape: '+this.name);
 		//console.log('X: '+this.x+' Y: '+this.y);
 		//console.log('W: '+this.width+' H: '+this.height);
+		//console.log('');
 
 		if (this.fillStyle) {
 			context.fillStyle = this.fillStyle;
 			if(this.shape == 'circle'){
 				// X,Y,Radius, start, end
+				context.beginPath();
 				context.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI);
 				context.fill();
+				context.closePath();
 			}else if (this.shape == 'rectangle'){
 				context.fillRect(this.x, this.y, this.width, this.height);
 			}
 			context.fillStyle = defaultFillStyle; // Reset back to default
 		}
-		if (this.strokeStyle && this.lineWidth) {
+		if (this.strokeStyle && this.lineWidth || shapeDebug) {
 			context.strokeStyle = this.strokeStyle;
 			context.lineWidth = this.lineWidth;
+			if(shapeDebug){
+				context.strokeStyle = shapeDebugColour;
+				context.lineWidth = 2;
+			}
 			if(this.shape == 'circle'){
 				// X,Y,Radius, start, end
+				context.beginPath();
 				context.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI);
 				context.stroke();
+				context.closePath();
 			}else if (this.shape == 'rectangle'){
 				context.strokeRect(this.x, this.y, this.width, this.height);
 			}