Add deck entities and draw deck with deckCount

cardGen.js

@@ -417,22 +417,33 @@ function requestDeck(itemData = null){
 
 	let forPlayer = 0; // TODO: Change to actually have each player select a deck
 	// Loop and create the deck first
+
+
+	// DECKS TODO: REDO FOR itemData.component instead of existing itemData
 	decks.forEach((deck) => {
+
 		item.push(itemCount); // Add new item to add stuff for
+		itemData.component.deck[itemCount] = {'deckId':deck.deckId, 'playerId':deck.playerId, 'deckName':deck.deckName, 'deckSize': 0}; // Probably remove maxlength or change how I've just done it?
+		player[itemCount] = forPlayer; // TODO: Actually set to the correct player somehow
+
+
+
 		deckData[itemCount] = {'deckId':deck.deckId, 'playerId':deck.playerId, 'deckName':deck.deckName, 'maxLength': 0}; // Max length for listPositioning later in cardBuild
 		boardElement[itemCount] = 'realDeck';
 		cardFace[itemCount] = 0; // Face down for deck
-		player[itemCount] = forPlayer;
+
+
 		itemCount++; // Needed/good
 		forPlayer++; // Jank/bad
 	})
-	//console.log(deckData);
-	//console.log(deckList);
+
+
+	// CARDS IN DECKS
+	// TODO: REDO FOR itemData.component instead of existing itemData
 
 	// Loop each item in the deckList
 	// Loop inside it X times where X is cardCount
 	// Add the builtCard with same cardId as deckList item X times
-	
 	// and load that deck for them. This just sets first deck to player0 to players.length
 	deckList.forEach((deckListItem) => {
 
@@ -441,6 +452,8 @@ function requestDeck(itemData = null){
 		for(key in deckData){
 		//Object.keys(deckData).forEach(function(key) { // Less efficient than for
 			// Needs to check deck AND player id, as that's the primary key (together)
+
+			// TODO: change deckData[key] to itemData.component.deck[key] allover then remove deckData
 			if(deckData[key].deckId == deckListItem.deckId && deckData[key].playerId == deckListItem.playerId){
 				deckItem = key; // Key is the `item` key
 				// Now add cards to the player that this deck belongs to
@@ -468,6 +481,10 @@ function requestDeck(itemData = null){
 			listPosition[itemCount] = deckData[deckItem].maxLength; // TODO: better
 			deckData[deckItem].maxLength++;
 
+			// TODO: everything like below, using the new component.XYZ
+			itemData.component.deck[deckItem].deckSize++;
+			//
+
 			// Adding to get everything sorted in one!
 			cardStatus[itemCount] = null;
 			cardFace[itemCount] = 0; // Face down by default (in deck)
@@ -507,15 +524,25 @@ function requestDeck(itemData = null){
 				}
 			}
 			
-
 			itemCount++; // Increment item to not overwrite
 		}
 
+		// Loop adding cards is done, so set the cardCount of deck (so plays know deck length without the cards)
+		// for each player
+		//itemData.component.cardCount.deck[forPlayer] = deckData[deckItem].maxLength;
+		//itemData.component.deck[itemCount].deckSize++;
+		// Handsize here too, why not. It's always 0 to start (on generation)
+		// When it comes to reconnecting the actual data will be needed
+		//itemData.component.cardCount.hand[forPlayer] = 0;
+
 	});
 
 	// ADD all new elements, and updated data into itemData
 	itemData.item = item;
+		itemData.component.item = item;
 	itemData.itemCount = itemCount;
+		itemData.component.itemCount = itemCount;
+
 	itemData.player = player;
 	itemData.players = players;
 	itemData.deckData = deckData;

components.js

@@ -4,8 +4,8 @@
 const component = {
 
 	// Entity Stuff
-	//item			: [],
-	//itemCount		: 0,
+	item			: [],
+	itemCount		: 0,
 
 	roomId			: null,
 	turn			: 0,
@@ -49,7 +49,7 @@ const component = {
 	// loop component.shield for shield items
 	boardElement		: {},
 	// Replace with following
-	realDeck		: {},
+	deck			: {},
 	inDeck			: {},
 	hand			: {},
 	board			: {},

public/js/canvas/draw.js

@@ -4,6 +4,9 @@ function drawGameBoard(){
 	ctx.clearRect(0, 0, canvas.width, canvas.height);
 
 	drawPlayerNames();
+	calculateDeckPositions();
+
+	drawEntities();
 
 }
 
@@ -40,3 +43,83 @@ function drawPlayerNames(){
 
 }
 
+// TODO: Move from draw into somewhere else
+function calculateDeckPositions(){
+
+	for (const [key, value] of Object.entries(gameData.deck)) {
+
+		// If the deckItem (key is the entityId), 
+		// belongs to the player (matches this sockets player)
+		switch(gameData.player[key]){
+
+			// Set position for player deck
+			case gameData.playerId:
+				gameData.position[key] = [canvas.width-cardWidth*1.5-40, canvas.height-cardHeight*1.5-60]; // X/Y
+				gameData.size[key] = [cardWidth*1.5, cardHeight*1.5];
+				break;
+		
+			// Same for opponent. This will need redoing when 2v2,4v1,etc. are added
+			case gameData.opponentId:
+				gameData.position[key] = [40, 60]; // X/Y
+				gameData.size[key] = [cardWidth*1.5, cardHeight*1.5];
+				break;
+
+		}
+	}
+
+}
+
+function drawEntities(){
+
+	// Loop position component for entities with a position
+	for (const [key, value] of Object.entries(gameData.position)) {
+		// Key is the entityId here
+
+		// If the entity has a position AND a size, we can print it
+		if(gameData.size[key] !== undefined){
+
+			// If the entity is a deck
+			if(gameData.deck[key]){
+				drawDeck(key);
+			}
+
+		}
+	}
+
+}
+
+function drawDeck(entity){
+	
+	// Draw the deck shape
+	let shape = new Shape({
+		x: gameData.position[entity][0],
+		y: gameData.position[entity][1],
+		width: gameData.size[entity][0],
+		height: gameData.size[entity][1],
+		fillStyle: '#EEE',
+		strokeStyle: '#AAA',
+	});
+	shape.draw();
+
+	// Draw circle for deck count to sit in
+	let deckCounterSprite = new Shape({
+		shape: 'circle',
+		x: gameData.position[entity][0],
+		y: gameData.position[entity][1],
+		width: gameData.size[entity][0]*.375,
+		height: gameData.size[entity][1]*.375,
+		fillStyle: '#DCDCDC'
+	});
+	deckCounterSprite.draw();
+
+	// Draw deck count text
+	ctx.fillStyle = '#000';
+
+	let deckSize=gameData.deck[entity].deckSize;
+	let textX=gameData.position[entity][0]-(ctx.measureText(deckSize).width/2);
+	let textY=gameData.position[entity][1]+(ctx.measureText(deckSize).width/2);
+
+	printText(deckSize, textX, textY, 'center', 'middle', 'normal', 'bold', '10', 'Arial', '#000');
+
+}
+

public/js/game/components.js

@@ -1,6 +1,11 @@
 // Should mostly match server's components.js
 // Misc. game data required
 let gameData		= {
+
+	item			: null,
+	itemCount		: null,
+
+
 	playerId		: null,
 	opponentId		: null,
 	roomId			: null,
@@ -8,7 +13,15 @@ let gameData		= {
 	playerTurn		: 0,
 	players			: null,
 
+
 	// Real components from here?
+	player			: {},
+	deck			: {},
+
+	// Local components, not done on serverside
+	// calculated, etc. by client
+	position		: {},
+	size			: {},
 
 }
 

public/js/game/dataUpdate.js

@@ -10,6 +10,10 @@ function updateGameData(data){
 	updateRoomId(data.roomId);
 	updateTurn(data.component.turn, data.component.playerTurn);
 
+	updateItems(data.component.item, data.component.itemCount);
+	updatePlayerComponent(data.player);
+	updateDecks(data.component.deck);
+
 	console.log(gameData);
 }
 
@@ -32,4 +36,14 @@ function updateTurn(turn = null, playersTurn = null){
 	gameData.turn = turn;
 	gameData.playerTurn = playersTurn;
 }
+function updateItems(item = null, itemCount = null){
+	gameData.item = item;
+	gameData.itemCount = itemCount;
+}
+function updateDecks(deck = null){
+	gameData.deck = deck;
+}
+function updatePlayerComponent(player = null){
+	gameData.player = player;
+}