diff --git a/public/board.js b/public/board.js
index 2ccf13c..0fe9163 100644
--- a/public/board.js
+++ b/public/board.js
@@ -523,21 +523,10 @@ class Board{
 					alert(canPayMana);
 					return false;
 				}else{
-					// Tap mana and play TODO: TEMP SOLUTION
-					// TODO: May want to make this recursive, it's better and less bulky
-					// but still lots of dupe code
-					let items = this.getItems('mana', fromPlayer, null, null);
-					for(let item = 0; item < items.length; item++){
-						let mana = items[item];
-						// For now just tapping the first untapped mana
-						// TODO: Tap mana of correct colour (also allow player to select in fut)
-						if(!this.isTapped(mana) && cardData[mana].colour == cardData[itemKey].colour){
-							this.tapCard(mana);
-							break; // Temp TODO: Tap each mana needed until manacost/colours are met, also TODO: allow user to target own mana OR use non-multitypes first (not implemented yet)
-						}else{
-							continue;
-						}
-					}
+					// TODO: May be best to tap in canPayMana while looping reqs. and if the reqs aren't hit untap the mana that were tapped in that call?
+					// This atm will loop manaReq and tap.
+					let tapped = this.tapManaRequired(itemKey, fromPlayer);
+					alert('tapManaRequired: '+tapped);
 				}
 			}
 
@@ -548,6 +537,61 @@ class Board{
 		this.drawBoard();
 	}
 
+	tapManaRequired(itemToPayCost, playerId){
+
+		// TODO: Look at combining or normalising this and canPayMana()
+		let manaRequired	= this.getManaTotalOf(itemToPayCost);
+		let noManaReq = {1:0, 2:0, 3:0, 4:0};
+
+		// Loop all the mana
+		let items = this.getItems('mana', playerId, null, null);
+		for(let item = 0; item < items.length; item++){
+
+			let mana = items[item];
+
+			if(this.isTapped(mana)){
+				continue;
+			}
+
+
+			// TODO: do better.
+			let manaType = null; // TODO: Will use the highest mana req as it's colour for now
+			let manaColours = cardColours[mana];
+			for(let i = 0; i < manaColours.length; i++){
+				// Set mana colour for card if there isn't one
+				if(manaType == null){ manaType = manaColours[i]; }
+				// Check each other colour, use the highest cost colour
+				// as the colour type for this specific mana
+				// TODO: Do better, and nicer, manaType in DB with the colour?
+				if(manaColours[i][1] > manaType[1]){
+					manaType = manaColours[i];
+				}
+			}
+
+			let colourId = manaType[0];
+			console.log(JSON.stringify(manaRequired));
+			// Loop the requirements of the cost to pay
+			for (const manaColour in manaRequired) {
+				//console.log(manaColour+' '+manaRequired[manaColour]+', '+colourId);
+				// If the colour of the mana is in the requirements
+				// of the cost to pay, reduce the cost for that colour by
+				// 1 and tap the mana
+				if(manaColour == colourId && manaRequired[manaColour] > 0){
+					// Reduce the required mana
+					manaRequired[colourId]--;
+					this.tapCard(mana);
+				}
+			}
+
+			// End loop once mana Req are fulfilled
+			if(JSON.stringify(manaRequired) == JSON.stringify(noManaReq)){
+				return true;
+			}
+		}
+
+		return('tapMana could not tap correct mana');
+	}
+
 	getItemKey(boardElementId, listPositionId, playerFrom){
 		let itemKey = this.getItems(boardElementId, playerFrom, null, listPositionId);
 		if(itemKey.length < 1){
@@ -583,7 +627,7 @@ class Board{
 		// may not be needed to tap them all (if cost reduced), but they need
 		// to have those colours available.
 		// Setting them to 0 to start so they can be added to. Could be nicer
-		let manaAvailable	= {0:0, 1:0, 2:0, 3:0, 4:0};
+		let manaAvailable	= {1:0, 2:0, 3:0, 4:0};
 
 		// TODO: Thought, maybe instead of tapping colour used, it's just if you
 		// have the colour? May be a silly thought, but
@@ -593,7 +637,7 @@ class Board{
 
 
 		// player check for this may need changing for "play from opp hand" etc?
-		let items = this.getItems('mana', player[itemToPlay], null, null);
+		let items = this.getItems('mana', playerId, null, null);
 		for(let item = 0; item < items.length; item++){
 			// Looping the mana to check player has equal mana/colours to req.
 			let itemKey = items[item];
@@ -630,33 +674,34 @@ class Board{
 
 		// If the manaReq is satiated by the manaAvailable then return true
 		for (const manaColour in manaRequired) {
-			console.log('req');
-			console.log(manaRequired[manaColour]);
-			console.log('av');
-			console.log(manaAvailable[manaColour]);
+			//console.log('req');
+			//console.log(manaRequired[manaColour]);
+			//console.log('av');
+			//console.log(manaAvailable[manaColour]);
 			if(manaRequired[manaColour] > manaAvailable[manaColour]){
 				return 'Do not have enough: '+manaColour+' mana';
 			}
 		}
 
-		console.log('manaAvailable: ');
-		console.log(manaAvailable);
+		//console.log('manaAvailable: ');
+		//console.log(manaAvailable);
 
 		return true;
 	}
 
 	getManaTotalOf(itemKey){
-		let manaTotal	= {0:0, 1:0, 2:0, 3:0, 4:0};
+		let manaTotal	= {1:0, 2:0, 3:0, 4:0};
 		let manaColours = cardColours[itemKey];
 
-		for(let i = 0; i < cardColours[itemKey].length; i++){
+		console.log(manaColours.length);
+		for(let i = 0; i < manaColours.length; i++){
 			// Add one to the available mana
 			let colourId = manaColours[i][0];
 			manaTotal[colourId] += manaColours[i][1]; // Add the cost
 		}
 
-		console.log('manaTotal: ');
-		console.log(manaTotal);
+		//console.log('manaTotal: ');
+		//console.log(manaTotal);
 		return manaTotal;
 	}
 
@@ -913,11 +958,11 @@ function loadBoard(data) {
 	// TODO: JANK IN, CHANGE CODE TO USE NEW ARRAY!!
 	// Temp jank, set colour to first colour req.
 	for(let i = 0; i < itemCount; i++){
-		console.log(itemCount);
-		console.log(cardColours[itemCount]);
+		//console.log(itemCount);
+		//console.log(cardColours[itemCount]);
 		// after && to check if there is a colourReq record in cardColours
 		if(cardData[i] !== undefined && i in cardColours){ // i may not have carddata, as realDeck
-			console.log(i);
+			//console.log(i);
 			cardData[i].colour = cardColours[i][0][0]; // Colour Id of first req
 			// Set the artwork (this would be done front-end I think)
 			cardSprite[i] = [0,0];