Add other card info to cardDraw

public/board.js

@@ -79,6 +79,12 @@ 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){
+		// Card Colour
+		console.log('drawCard card: '+JSON.stringify(array[arrayKey]));
+		let colourId = array[arrayKey].colour;
+		if(colourId == 0){ fill = '#EEE' }
+		else if(colourId == 1){ fill = '#0033EE' }
+
 		var cardClickable = new Shape({
 			name: name,
 			x: positionX,
@@ -91,13 +97,59 @@ class Board{
 		array[arrayKey]['clickable'] = cardClickable;
 		array[arrayKey]['clickable'].draw();
 
-		// Add card text
+		// Add image
+		// half circle for unit Set start angle to 0 and end angle to Math.PI.
+		// Ellipse for token (near full size)
+		// Octagon for spell
+		let cardImageContainer = new Shape({
+			shape: 'semi',
+			name: 'cardImageContainer_'+name,
+			x: positionX+cardHeight/3,
+			y: positionY+cardWidth/2,
+			width: cardWidth*.9,
+			height: cardHeight*.9,
+			fillStyle: "#BBB"
+		});
+		cardImageContainer.draw();
+
+		// Add card name
+		ctx.font = "bold 10pt Arial";
 		ctx.fillStyle = '#000';
 		ctx.fillText(
 			array[arrayKey]['name']
 			, positionX + (ctx.measureText(array[arrayKey]['name']/2).width) - width/4
-			, positionY+20
+			, positionY+cardHeight*.25
 		);
+
+		// Add card type
+		ctx.fillText(
+			array[arrayKey]['type']
+			, positionX + (ctx.measureText(array[arrayKey]['type']/2).width) - width/4
+			, positionY+cardHeight*.7
+		);
+		// Add text/effect area
+		if(array[arrayKey]['effect'] !== null){
+			ctx.fillText(
+				array[arrayKey]['effect']
+				, positionX + (ctx.measureText(array[arrayKey]['effect']/2).width) - width/4
+				, positionY+cardHeight*.8
+			);
+		}
+		// Attack
+		ctx.fillText(
+			array[arrayKey]['atk']
+			, positionX + (ctx.measureText(array[arrayKey]['atk']).width)
+			, positionY+cardHeight*.95
+		);
+		// Add cost
+		ctx.fillText(
+			array[arrayKey]['cost']
+			, positionX + (ctx.measureText(array[arrayKey]['cost']).width)
+			, positionY+cardHeight*.1
+		);
+
+		// Unbold font for other draws
+		ctx.font = "10pt Arial";
 	}
 
 	drawDeck(){
@@ -445,7 +497,21 @@ function clickableCheck(x,y,clickable){
 // 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'});
+		// Randomise colour
+		let colour	= Math.floor(Math.random() * 2);
+		let effect	= Math.floor(Math.random() * 5);
+		if(effect == 0){ effect = 'effect here'; } else{ effect = null }
+
+		deck.push({
+			'name':'CardName '+(i+1)
+			, 'cost':1
+			, 'atk':1
+			, 'def':1
+			, 'rarity': 'common'
+			, 'effect':effect
+			, 'type':'human'
+			, 'colour':colour
+		});
 	}
 }