Add all current drawing into drawECS loop

This is working well, drawing everything with only needing to pass the
item key

public/board.js

@@ -151,33 +151,35 @@ class Board{
 					let itemPlayer = player[itemKey];
 					console.log('Element: '+element+', Player: '+itemPlayer);
 
-					// Calc position of the element draw
-					let itemListPositionLength = getCurrentPositionAndLength(element, 1);
-					let itemListPositionNext = itemListPositionLength[0];
-					let itemListLength = itemListPositionLength[1];
-
-					let cardPadding = 10;
-					let i = listPosition[itemKey];
-					console.log('cardName: '+cardData[itemKey].name+', i/listPosition: '+i+', listPosition Length: '+itemListLength);
+					calculateItemSizePosition(itemKey);
 
-					let positionX	= canvas.width/2 - (cardWidth * (itemListLength - i) - (cardPadding * i));
-					let positionY = cardHeight + 30;
-					let width	= cardWidth;
-					let height	= cardHeight;
+					this.printCardToCanvas(itemKey);
+				}
+			}
+		}
+	}
 
-					position[itemKey]	= [positionX,positionY];
-					size[itemKey]		= [width, height];
+	printCardToCanvas(itemKey){
+		// If the itemKey has cardData, position, size, and boardElement we can draw it
+		// TODO: Add a check for error handling
 
-					// Check status (for tapped atm)
+		// Check status, and change border colour for display (for tapped atm)
 		let border = null;
 		if(cardStatus[itemKey] == 'tapped'){border = '#E0BC00';}
+
+		// Set the card 'cardboard' colour based on the card colour type
+		let colourId = cardData[itemKey].colour;
+		let fill = null;
+		if(colourId == 0){ fill = '#EEE'; }
+		else if(colourId == 1){ fill = '#0033EE'; }
+
 		let name = itemKey; // Not needed really anymore, but keeping for now
-					positionX = position[itemKey][0];
-					positionY = position[itemKey][1];
-					width = size[itemKey][0];
-					height = size[itemKey][1];
-					let fill = '#CCC';
+		let positionX = position[itemKey][0];
+		let positionY = position[itemKey][1];
+		let width = size[itemKey][0];
+		let height = size[itemKey][1];
 
+		// Draw the card shape itself
 		let shape = new Shape({
 			name: name,
 			x: positionX,
@@ -187,13 +189,88 @@ class Board{
 			fillStyle: fill,
 			strokeStyle: border
 		});
-
 		shape.draw();
 
+		this.printCardImage(itemKey);
+
+		this.printCardDetails(itemKey);
+
+
 	}
+
+	printCardImage(itemKey){
+		let name = itemKey; // Not needed really anymore, but keeping for now
+		let positionX = position[itemKey][0];
+		let positionY = position[itemKey][1];
+		let width = size[itemKey][0];
+		let height = size[itemKey][1];
+		let fill = '#BBB';
+		let shape = 'semi'; // Will be decided based on cardData.something? (for unit, spell, etc)
+
+		// Add 'image' shape, will need to blitz sprite here in the future (based on cardData.id)
+		let cardImageContainer = new Shape({
+			shape: 'semi',
+			name: 'cardImageContainer_'+name,
+			x: positionX+height/3,
+			y: positionY+width/2,
+			width: width*.9,
+			height: height*.9,
+			fillStyle: fill
+		});
+		cardImageContainer.draw();
+
+		// Draw the actual image too
+
 	}
+	printCardDetails(itemKey){
+		let name = itemKey; // Not needed really anymore, but keeping for now
+		let positionX = position[itemKey][0];
+		let positionY = position[itemKey][1];
+		let width = size[itemKey][0];
+		let height = size[itemKey][1];
+
+		// Add card name
+		let fontSize = width/cardWidth*10; // 10 = baseFontSize of 10pt
+		ctx.font = "bold "+fontSize+"pt Arial";
+		ctx.fillStyle = '#000';
+		ctx.fillText(
+			cardData[itemKey]['name']
+			, positionX + (ctx.measureText(cardData[itemKey]['name']/2).width) - width/4
+			, positionY+height*.25
+		);
+
+		// Add card type
+		ctx.fillText(
+			cardData[itemKey]['type']
+			, positionX + (ctx.measureText(cardData[itemKey]['type']/2).width) - width/4
+			, positionY+height*.7
+		);
+		// Add text/effect area
+		if(cardData[itemKey]['effect'] !== null){
+			ctx.fillText(
+				cardData[itemKey]['effect']
+				, positionX + (ctx.measureText(cardData[itemKey]['effect']/2).width) - width/4
+				, positionY+height*.8
+			);
 		}
+		// Attack
+		ctx.fillText(
+			cardData[itemKey]['atk']
+			, positionX + (ctx.measureText(cardData[itemKey]['atk']).width)
+			, positionY+height*.95
+		);
+		// Add cost
+		ctx.fillText(
+			cardData[itemKey]['cost']
+			, positionX + (ctx.measureText(cardData[itemKey]['cost']).width)
+			, positionY+height*.1
+		);
+
+		// Unbold font for other draws
+		ctx.font = "10pt Arial";
 	}
+
+
 	// 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, border){
@@ -1026,3 +1103,32 @@ function getCurrentPositionAndLength(elementName, playerId){
 
 }
 
+function calculateItemSizePosition(itemKey){
+
+	// Calc position and size of the item
+	// Used for drawing and interacting
+
+	let itemPlayer	= player[itemKey];
+	let itemElement	= boardElement[itemKey];
+
+	let itemListPositionLength = getCurrentPositionAndLength(itemElement, itemPlayer);
+	let itemListPositionNext = itemListPositionLength[0];
+	let itemListLength = itemListPositionLength[1];
+
+	// TODO:Padding probably will differ between elements
+	let cardPadding = 10;
+	let i = listPosition[itemKey];
+	//console.log('cardName: '+cardData[itemKey].name+', i/listPosition: '+i+', listPosition Length: '+itemListLength);
+
+	// TODO:X/Y W/H 100% differs based on the element
+	let positionX	= canvas.width/2 - (cardWidth * (itemListLength - i) - (cardPadding * i));
+	let positionY = cardHeight + 30;
+	let width	= cardWidth;
+	let height	= cardHeight;
+
+	// Set the size/position of the item
+	size[itemKey]		= [width, height];
+	position[itemKey]	= [positionX,positionY];
+
+}
+