Add realDeck element and remove clickables

public/board.js

@@ -8,13 +8,10 @@ const cardHeight = 120;
 const cards = new Image();
 const back = new Image();
 
-// TODO: Remove once decks are migrated to ECS
-let clickableItems = [];
-
 // 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', 'grave'];
+let elements		= ['realDeck', 'deck','board','hand','mana','shield', 'grave'];
 let elementsSizes	= {}; // TODO: 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		= [];
@@ -70,8 +67,6 @@ class Board{
 		// Room Name
 		ctx.fillText(name, 0, 10);
 
-		this.drawDecks();
-
 		this.drawPlayerNames('Nathan', 'Evil Nathan');
 
 		this.drawCardsECS(); // Atop most everything atm for testing
@@ -158,10 +153,14 @@ class Board{
 		if(cardStatus[itemKey] == 'attacking'){border = '#C92D22';}
 
 		// Set the card 'cardboard' colour based on the card colour type
-		let colourId = cardData[itemKey].colour;
 		let fill = null;
-		if(colourId == 0){ fill = '#EEE'; }
+		if(boardElement[itemKey] != 'realDeck'){ // TODO: Change these to isset checks instead...
-		else if(colourId == 1){ fill = '#0033EE'; }
+			let colourId = cardData[itemKey].colour;
+			if(colourId == 0){ fill = '#EEE'; }
+			else if(colourId == 1){ fill = '#0033EE'; }
+		}else{
+			fill = '#B0B0B0';
+		}
 
 		let name = itemKey; // Not needed really anymore, but keeping for now
 		let positionX = position[itemKey][0];
@@ -181,9 +180,36 @@ class Board{
 		});
 		shape.draw();
 
-		this.printCardImage(itemKey);
+		if(boardElement[itemKey] != 'realDeck'){ // TODO: isset, or differ between types
+			this.printCardImage(itemKey);
+			this.printCardDetails(itemKey);
+		}else{
+			// TODO: For realDeck only atm, also janked in. Seperate this...
+			let counterx= positionX;
+			let countery= positionY;
+			let counterwidth= cardWidth*.375;
+			let counterheight= cardHeight*.375;
+
+			// TODO: Center in the circle
+			let deckLength = getCurrentPositionAndLength('deck', player[itemKey])[1];
+			let textx=positionX - (ctx.measureText(deckLength).width/2);
+			let texty=positionY + (ctx.measureText(deckLength).width/2);
+			// Draw circle for deck count to sit in
+			let deckCounterSprite = new Shape({
+				shape: 'circle',
+				name: 'deckCountererer', 
+				x: counterx,
+				y: countery,
+				width: counterwidth,
+				height: counterheight,
+				fillStyle: '#DCDCDC'
+			});
+			deckCounterSprite.draw();
 
-		this.printCardDetails(itemKey);
+			// Draw deck count text
+			ctx.fillStyle = '#000';
+			ctx.fillText(deckLength, textx, texty);
+		}
 
 
 	}
@@ -344,101 +370,6 @@ class Board{
 		ctx.font = "10pt Arial";
 	}
 
-	drawDecks(){
-		// Draw all decks belonging to players (currently 2, could be 3-5 in future, for PvE raids)
-		// TODO: Probably add this as an item of boardElement 'realDeck', as 'deck' is cards in deck
-		// 	 actually, maybe change current 'deck' to 'inDeck', reads better
-		let name = null;
-		let countername = null;
-		let x = null;
-		let counterx = null;
-		let y = null;
-		let countery = null;
-		let width = null;
-		let counterwidth = null;
-		let height = null;
-		let counterheight = null;
-		let fill = null;
-		let counterfill = '#FFF';
-		let textx = null;
-		let texty = null;
-		let deckLength = 0;
-
-		for(let playerId = 0; playerId < players; playerId++){
-			if(playerId == 0){
-				// Deck
-				name= 'deck';
-				x= canvas.width-cardWidth*1.5-40;
-				y= canvas.height-cardHeight*1.5-60;
-				width= cardWidth*1.5;
-				height= cardHeight*1.5;
-				fill= "#0000FF";
-
-				countername= 'deckCounter';
-				counterx= canvas.width-cardWidth*.6;
-				countery= canvas.height-cardHeight*.6;
-				counterwidth= cardWidth*.375;
-				counterheight= cardHeight*.375;
-
-				// TODO: Center in the circle
-				deckLength = getCurrentPositionAndLength('deck', 0)[1];
-				textx = canvas.width-cardWidth*.6 - (ctx.measureText(deckLength).width) + 7;
-				texty =	canvas.height-cardHeight*.6 + 5;
-			}
-			if(playerId == 1){
-				// Opponent's Deck
-				name= 'deckOpponent';
-				x= 40;
-				y= 60;
-				width= cardWidth*1.5;
-				height= cardHeight*1.5;
-				fill= "#FF0000";
-
-				countername= 'deckCounterOpponent';
-				counterx= cardWidth*1.5+(cardWidth*.375);
-				countery= cardHeight*1.5+(cardHeight*.375);
-				counterwidth= cardWidth*.375;
-				counterheight= cardHeight*.375;
-				counterfill= "#FFF";
-
-				deckLength = getCurrentPositionAndLength('deck', 1)[1];
-				textx=cardWidth*1.5 + (ctx.measureText(deckLength).width) + 10;
-				texty=cardHeight*1.9;
-
-			}
-
-			// Actually draw the decks base on the size/position, etc.
-			clickableItems[name+'Sprite'] = new Shape({
-				name: name,
-				x: x,
-				y: y,
-				width: width, 
-				height: height,
-				fillStyle: fill 
-			});
-			//ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2);
-			clickableItems[name+'Sprite'].draw();
-
-			// Draw circle for deck count to sit in
-			let deckCounterSprite = new Shape({
-				shape: 'circle',
-				name: countername,
-				x: counterx,
-				y: countery,
-				width: counterwidth,
-				height: counterheight,
-				fillStyle: counterfill
-			});
-			deckCounterSprite.draw();
-
-			// Draw deck count text
-			// TODO: Center in the circle
-			ctx.fillStyle = '#000';
-			ctx.fillText(deckLength, textx, texty);
-		}
-
-	}
-
 	// boardElement, cardData?, position?, size?, cardStatus, player, listPosition
 	ECSLoop(boardElementId = null, playerId = null, cardStatusId = null, listPositionId = null){
 		// So, the intent here is to normalise my nested loop I keep duping (parts of)
@@ -909,6 +840,7 @@ class Board{
 let board = new Board;
 
 // TODO: TEMP!! Replace soon
+createDeck();
 createDeckList(playerDeck, deckCount, 0);
 createDeckList(opponentDeck, deckCountOpponent, 1);
 
@@ -983,12 +915,14 @@ canvas.addEventListener('click', function(event) {
 	// Will be the new way
 	// TODO:Maybe write this into a function? If XY WH is hit return true, and the itemKey
 	// then it can be re-used in contextclick, hover, etc without rewrite
-	//console.log('X: '+x+' Y: '+y);
+	console.log('X: '+x+' Y: '+y);
 	// TODO: Normalise this too
 	for(let itemKey = 0; itemKey < item.length; itemKey++){
 
-		if(elements[itemKey] == 'deck'){
+		if(boardElement[itemKey] == 'deck'){
 			continue;
+		}else{
+			//printECSData([itemKey]);
 		}
 
 		// Check the item has a size and position
@@ -1007,6 +941,9 @@ canvas.addEventListener('click', function(event) {
 					// Check item location, and trigger events based on it
 					// TODO: Change inEvent locations, and checks elsewhere?
 					// TODO: Make existing mechanics ECSey
+					case 'realDeck':
+						board.drawACard(playerId, 1);
+						break;
 					case 'board':
 						// player/opponentBoard not seperated, as want to have
 						// each player able to have effects, etc. to make others attack
@@ -1059,21 +996,6 @@ canvas.addEventListener('click', function(event) {
 		}
 	}
 
-	// Decks kept as-is for now
-	// TODO: boardElement realDeck, or smth and add these to the loop
-	// # PLAYER DECK
-	clickable = clickableItems['deckSprite'];
-	if(clickableCheck(x,y,clickable) && !inEvent){
-		board.drawACard(0);
-	}
-
-	// TODO:
-	// # OPPONENT DECK
-	clickable = clickableItems['deckOpponentSprite'];
-	if(clickableCheck(x,y,clickable) && !inEvent){
-		board.drawACard(1);
-	}
-
 }, false);
 
 function clickableCheck(x,y,clickable=false,itemKey=false){
@@ -1112,12 +1034,29 @@ function clickableCheck(x,y,clickable=false,itemKey=false){
 	
 }
 
+function createDeck(){
+	// Create a 'realDeck' element for each player
+	for(let i = 0; i < players; i++){
+		item.push(itemCount);
+		boardElement[itemCount] = 'realDeck';
+		player[itemCount] = i;
+		// TODO: Added these in to prevent error
+		// In future want to remove, and add isset checks for non-used data
+		cardStatus[itemCount] = null;
+		listPosition[itemCount] = null;
+		itemCount++;
+	}
+
+	console.log(item.length); // createDeckList will need to continue from here, not 0
+}
 // TEMP: Create a deck of X different cards that can be drawn/played
 // for UI development, will be done on server and not shown to clients
 // TODO: Randomly create a deck from objects stored in file (for now) then DB
 // 3 of each card max, and likely one colour too for time being
 function createDeckList(deck, deckCount, playerId){
-	for(let i = 0; i < deckCount; i++){
+	let i = item.length; // Continue from the last item, don't overwrite
+	deckCount = deckCount + i;
+	for(i; i < deckCount; i++){
 		// Randomise colour
 		let colour	= Math.floor(Math.random() * 2);
 		let effect	= Math.floor(Math.random() * 5);
@@ -1168,12 +1107,12 @@ function shuffleDeck(playerId){
 	let items = board.ECSLoop('deck', playerId, null, null);
 	for(let item = 0; item < items.length; item++){
 		let itemKey = items[item];
-		console.log('ITEM KEY: '+itemKey);
+		//console.log('ITEM KEY: '+itemKey);
-		console.log('OLD LIST POSITION: '+listPosition[itemKey]);
+		//console.log('OLD LIST POSITION: '+listPosition[itemKey]);
 
 		listPosition[itemKey] = tempDeck[item];
 
-		console.log('NEW LIST POSITION: '+listPosition[itemKey]);
+		//console.log('NEW LIST POSITION: '+listPosition[itemKey]);
 	}
 	console.log(getCurrentPositionAndLength('deck', playerId)[1]);
 
@@ -1245,6 +1184,20 @@ function calculateItemSizePosition(itemKey){
 	let i = listPosition[itemKey];
 	//console.log('cardName: '+cardData[itemKey].name+' listPosition/i: '+i);
 
+	if(itemPlayer == 1 && itemElement == 'realDeck'){
+		positionX	= 40;
+		positionY	= 60;
+		width		= cardWidth*1.5;
+		height		= cardHeight*1.5;
+
+	}
+	if(itemPlayer == 0 && itemElement == 'realDeck'){
+		positionX	= canvas.width-cardWidth*1.5-40;
+		positionY	= canvas.height-cardHeight*1.5-60;
+		width		= cardWidth*1.5;
+		height		= cardHeight*1.5;
+	}
+
 	if(itemPlayer == 1 && itemElement == 'board'){
 		positionX	= canvas.width/2 - (cardWidth * (itemListLength - i) - (cardMargin * i));
 		positionY	= cardHeight + 30;
@@ -1336,12 +1289,27 @@ function calculateItemSizePosition(itemKey){
 function ECSLoopTest(){
 	// boardElement, player, cardStatus, listPosition
 	// TODO: ?cardData?, position?, size?
-	let boardElementId = 'board';
+	let boardElementId = 'realDeck';
-	let playerId = 0;
+	let playerId = null;
 	let cardStatusId = null;
 	let listPositionId = null;
 	let items = board.ECSLoop(boardElementId, playerId, cardStatusId, listPositionId);
-	console.log('Items in boardElement: '+boardElementId+' player: '+playerId+' cardStatus: '+cardStatusId+' listPosition: '+listPositionId);
+
 	console.log(items);
+	printECSData(items);
+}
+function printECSData(items){
+	for(let item = 0; item < items.length; item++){
+		let itemKey = items[item];
+		console.log(
+			'boardElement: '+boardElement[itemKey]+"\n"+
+			'cardData: '+cardData[itemKey]+"\n"+
+			'position: '+position[itemKey]+"\n"+
+			'size: '+size[itemKey]+"\n"+
+			'cardStatus: '+cardStatus[itemKey]+"\n"+
+			'player: '+player[itemKey]+"\n"+
+			'listPosition: '+listPosition[itemKey]
+		);
+	}
 }