Add gradient fill to multi-mana cards

public/board.js

@@ -140,6 +140,50 @@ class Board{
 		}
 	}
 
+	setCardFill(itemKey){
+
+		let fill = '#B0B0B0';
+
+		let coloursOfCard = cardColours[itemKey];
+		if(coloursOfCard.length > 1){
+
+			// Create a gradient for the card colours
+			// x-start,y-start,x-end,y-end
+			const grad=ctx.createLinearGradient(
+				position[itemKey][0],
+				0, //position[itemKey][1],
+				position[itemKey][0] + size[itemKey][0],
+				0, //position[itemKey][1] + size[itemKey][1]
+			);
+
+			for(let i = 0; i < coloursOfCard.length; i++){
+
+				let gradientPos = 0;
+				if(coloursOfCard.length == i){
+					gradientPos = 1;
+				}else{
+					// Colour stops from 0..1 (0 to 100% along)
+					// If 4, first is 0, second is 100/3 * 1 = 33.33%
+					// 0,33,66,100. Need last to always be 100 (1)
+					gradientPos = (coloursOfCard.length - 1)*i;
+				}
+
+				// TODO: Make new array ensuring colours are ordered by highest
+				// cost. This will do as it adds the colours, but in future
+				grad.addColorStop(gradientPos, this.setFillByManaColour(cardColours[itemKey][i][0]));
+
+			}
+
+			fill = grad;
+		}else{
+			// Set to a normal fill of the first (only) colour
+			fill = this.setFillByManaColour(cardColours[itemKey][0][0]);
+		}
+
+		return fill;
+
+	}
+
 	printCardToCanvas(itemKey){
 		// If the itemKey has cardData, position, size, and boardElement we can draw it
 		// TODO: Add a check for error handling
@@ -149,19 +193,18 @@ class Board{
 		if(this.isTapped(itemKey)){border = '#E0BC00';}
 		if(this.isAttacking(itemKey)){border = '#C92D22';}
 
-		// Set the card 'cardboard' colour based on the card colour type
-		let fill = '#B0B0B0';
-		if(boardElement[itemKey] != 'realDeck'){ // TODO: Change these to isset checks instead...
-			let colourId = cardData[itemKey].colour;
-			fill = this.setFillByManaColour(colourId);
-		}
-
 		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];
 
+		// Set the card 'cardboard' colour based on the card colour type
+		let fill = '#B0B0B0';
+		if(boardElement[itemKey] != 'realDeck'){ // TODO: Change these to isset checks instead...
+			fill = this.setCardFill(itemKey);
+		}
+
 		// Draw the card shape itself
 		let shape = new Shape({
 			name: name,