Set COLOUR enum to contain more colour details

public/board.js

@@ -10,9 +10,9 @@ const cardBackArt = new Image();
 
 // Colours
 const COLOUR = {
-	'white':	1,
-	'blue':		2,
-	'red':		3,
+	'white':{'id': 1, 'name':'White','colour':'#EEE'},
+	'blue':{'id':2, 'name':'Blue','colour':'#0033EE'},
+	'red':{'id':3, 'name':'Red','colour':'#ED344A'},
 };
 
 // Counters to keep track of players, and boardElements, may be changed in future
@@ -152,9 +152,7 @@ class Board{
 		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'; }
+			fill = this.setFillByManaColour(colourId);
 		}
 
 		let name = itemKey; // Not needed really anymore, but keeping for now
@@ -317,7 +315,6 @@ class Board{
 		// 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.
@@ -325,11 +322,8 @@ class Board{
 			// 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'; }
+			let fill = this.setFillByManaColour(colourId);
 
 			// Draw the mana shape/icon
 			let manaColour = new Shape({
@@ -361,6 +355,15 @@ class Board{
 
 		});
 	}
+	setFillByManaColour(colourId){
+		for (const colour in COLOUR) {
+			if(colourId == COLOUR[colour]['id']){
+				return COLOUR[colour]['colour']; // Lmao
+			}
+		}
+
+		return '#B0B0B0';
+	}
 	printCenterText(text, positionX, positionY){
 		context.textAlign = 'center';
 		context.textBaseline = 'middle';
@@ -1056,16 +1059,16 @@ function loadBoard(data) {
 			cardSprite[i] = [0,0];
 			// Temp sprite set based on colour TODO: Change to set correct sprite from DB
 			switch (cardData[i].colour){
-				case COLOUR.white: // White
+				case COLOUR.white.id: // White
 					cardSprite[i] = [0,0];
 					break;
-				case COLOUR.blue: // Blue
+				case COLOUR.blue.id: // Blue
 					cardSprite[i] = [0,1];
 					break;
-				case COLOUR.red: // Red
+				case COLOUR.red.id: // Red
 					cardSprite[i] = [1,0];
 					break;
-				case COLOUR.green: // Green
+				case COLOUR.green.id: // Green
 					cardSprite[i] = [1,1];
 					break;
 				default: