Add colourReq to card UI

public/board.js

@@ -149,14 +149,12 @@ class Board{
 		if(this.isAttacking(itemKey)){border = '#C92D22';}
 
 		// Set the card 'cardboard' colour based on the card colour type
-		let fill = null;
+		let fill = '#B0B0B0';
 		if(boardElement[itemKey] != 'realDeck'){ // TODO: Change these to isset checks instead...
 			let colourId = cardData[itemKey].colour;
 			if(colourId == COLOUR.white){ fill = '#EEE'; }
 			else if(colourId == COLOUR.blue){ fill = '#0033EE'; }
 			else if(colourId == COLOUR.red){ fill = '#ED344A'; }
-		}else{
-			fill = '#B0B0B0';
 		}
 
 		let name = itemKey; // Not needed really anymore, but keeping for now
@@ -181,6 +179,7 @@ class Board{
 		if(this.isFaceUp(itemKey)){
 			this.addCardImage(itemKey);
 			this.printCardDetails(itemKey);
+			this.printColourRequirements(itemKey);
 		}
 		if(!this.isFaceUp(itemKey)){
 			this.addCardBack(itemKey);
@@ -304,6 +303,72 @@ class Board{
 		// TODO: CardBack/Sleeves as spritesheet like cardArt
 		ctx.drawImage(cardBackArt, 0,0, 80,120,positionX,positionY,width,height);
 	}
+	printColourRequirements(itemKey){
+		// Set the size(s)
+		let width = size[itemKey][0]*.1;
+		let height = size[itemKey][1]*.1;
+		let positionX = position[itemKey][0] + (size[itemKey][0]*.1);
+		let positionY = position[itemKey][1] + (size[itemKey][0]*.2);
+
+
+		// Get all the colour reqs needed.
+		let colourReqs = cardColours[itemKey];
+
+		// Loop them all
+		let totalColours = 1; // How many colours the card has, for positioning
+		colourReqs.forEach((colour) => {
+			console.log('colour');
+
+			// Add each to the card (colour BG, and required count within it)
+			// TODO: Maybe building a class for each draw is bad, eh.
+			// TODO: Should probably change the shapes.js class into functions
+			// Will look into once animations, etc are in, incase classes are the way
+
+			// TODO: change colours to have id(done), name, and hexcode as const/enum
+			let fill = '#B0B0B0';
+			let colourId = colour[0];
+			if(colourId == COLOUR.white){ fill = '#EEE'; }
+			else if(colourId == COLOUR.blue){ fill = '#0033EE'; }
+			else if(colourId == COLOUR.red){ fill = '#ED344A'; }
+
+			// Draw the mana shape/icon
+			let manaColour = new Shape({
+				shape: 'circle',
+				//name: 'deckCountererer', 
+				x: positionX,
+				y: positionY + height*totalColours,
+				width: width,
+				height: height,
+				fillStyle: fill // Fill should be the card's main colour
+			});
+			manaColour.draw();
+
+			// Draw the requirement within the shape/icon
+			// Make sure the text scales with card size
+			let fontSize = (width*10/cardWidth)*10; // 10 = baseFontSize of 10pt
+			// ^ calced with the width of the card overall
+			context.font = fontSize+"pt Arial";
+			context.fillStyle = "#FFF";
+			// Center the text (cost) within the shape
+			this.printCenterText(colour[1], positionX, positionY + height*totalColours);
+			// Reset context stylings
+			context.font = "10pt Arial"; // Reset to default
+			context.fillStyle = "#000";
+
+			// Inc totalColours in case there's more
+			totalColours++;
+
+		});
+	}
+	printCenterText(text, positionX, positionY){
+		context.textAlign = 'center';
+		context.textBaseline = 'middle';
+		context.fillText(text, positionX, positionY);
+
+		// Now reset the context aligns to the defaults
+		context.textAlign = 'left';
+		context.textBaseline = 'alphabetic';
+	}
 	printCardDetails(itemKey){
 		let name = itemKey; // Not needed really anymore, but keeping for now
 		let positionX = position[itemKey][0];