Move oppBoard draw into a non-specific loop

This should allow to draw all elements from the same loop and avoid
loads of scattered methods for draw. 1 draw method, other methods for
real functionality

public/board.js

@@ -15,6 +15,11 @@ clickableItems['board'] = [];
 clickableItems['hand'] = [];
 clickableItems['opponentHand'] = [];
 
+// Counters to keep track of players, and boardElements, may be changed in future
+// But once game starts, will be const anyway, so shouldn't need passing
+let players 		= 2; // Player, Opponent for now, but will be up to 6 players for 5v1 boss raids?
+let elements		= ['deck','board','hand','mana','shield'];
+let elementsSizes	= {}; // May need to have the base XY WH of board, hand, etc. stored for loop draw
 // Array of items, the 'Entity Manager' as such
 let item		= [];
 let itemCount		= 0;
@@ -125,28 +130,37 @@ class Board{
 	}
 
 	drawCardsECS(){
+		// ALL NON DECK CARDS DO BE DRAWN IN SAME LOOP (ideally)
 		// Loop all items
 		for(let itemKey = 0; itemKey < item.length; itemKey++){
-			// Check if item is not in deck, deck items aren't to be drawn
-			// 'key' in 'object'
-			if(itemKey in boardElement && boardElement[itemKey] != 'deck'){
-				// Check if item belongs to opponent for now
-				// this will just be used to set positioning in the future
-				if(itemKey in player && player[itemKey] == 1){
-					// Just for opponentBoard atm
-					// This method will need to draw all cards, calcing their positions
-					// Which sounds hard
-					let opponentBoardLength = getCurrentPositionAndLength('board', 1)[1];
 
-					// I know it's redundant, just need to get my head around it all
+			// Loop each element, and player
-					// Setting position, will be moved elsewhere when working fully
+			for(let elementCount in elements){
+
+				// Don't draw deck TODO:/gy/void
+				// TODO: Unless inspecting
+				let element = elements[elementCount];
+				if(element == 'deck'){
+					continue;
+				}
+
+				// Draw Elements
+				// Loop each item left, and draw if element is currently looped. board,mana,etc.
+				if(itemKey in boardElement && boardElement[itemKey] == element){
+					// Get the player the item belongs to
+					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);
+					console.log('cardName: '+cardData[itemKey].name+', i/listPosition: '+i+', listPosition Length: '+itemListLength);
-					console.log('i/listPosition: '+i);
+
-					console.log('boardLength: '+opponentBoardLength);
+					let positionX	= canvas.width/2 - (cardWidth * (itemListLength - i) - (cardPadding * i));
-					let positionX	= canvas.width/2 - (cardWidth * (opponentBoardLength - i) - (cardPadding * i));
-					console.log('posX: '+positionX);
 					let positionY = cardHeight + 30;
 					let width	= cardWidth;
 					let height	= cardHeight;
@@ -175,6 +189,7 @@ class Board{
 					});
 
 					shape.draw();
+
 				}
 			}
 		}