cardGame/public/js/canvas/draw.js

function drawGameBoard(){

	// Reset board
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	drawPlayerNames();
	calculateDeckPositions();
	calculateHandPositions();

	drawEntities();

	// TEMP. Likely want to pass entities, but if you don't have cardData for them
	// then don't draw the card face up?
	drawFakeHand();

}

function drawPlayerNames(){

	let playerWeight = 'normal';
	if(gameData.playerId == gameData.playerTurn){ playerWeight = 'bold'; }
	let opponentWeight = 'normal';
	if(gameData.opponentId == gameData.playerTurn){ opponentWeight = 'bold'; }

	// Player Name
	printText(gameData.playerId,
		50,
		canvas.height - 70,
		'left', 'alphabetic', 'normal', playerWeight, '10', 'Arial', '#000'
	);
	printText(gameData.players[gameData.playerId][1].playerId,
		50,
		canvas.height - 50,
		'left', 'alphabetic', 'normal', playerWeight, '10', 'Arial', '#000'
	);

	// Opponent Name
	printText(gameData.opponentId,
		canvas.width - (ctx.measureText(gameData.opponentId).width + 50),
		50,
		'left', 'alphabetic', 'normal', opponentWeight, '10', 'Arial', '#000'
	);
	printText(gameData.players[gameData.opponentId][1].playerId,
		canvas.width - (ctx.measureText(gameData.players[gameData.opponentId][1].playerId).width + 50),
		70,
		'left', 'alphabetic', 'normal', opponentWeight, '10', 'Arial', '#000'
	);

}

// 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;

		}
	}

}
// TODO: Move from draw into somewhere else
function calculateHandPositions(){

	for (const [key, value] of Object.entries(gameData.hand)) {
		
		// key is entity Id here

		switch(gameData.player[key]){

			// Set position for player hand (all the time at current)
			case gameData.playerId:

				let cardsInHand = gameData.cardCount.hand[gameData.playerId];
				let positionInHand = gameData.listPosition[key];

				gameData.position[key] = [
					canvas.width/2 - (cardWidth * (cardsInHand - (positionInHand+1)) - (cardMargin * (positionInHand+1)))
					,canvas.height-cardWidth*1.5-20
				];
				gameData.size[key] = [cardWidth, cardHeight];
				break;
		
			// Opponent, currently done in fakeHand 

		}
	}

}


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(key in gameData.deck){
				drawDeck(key);
			}

			// If card in (player) hand
			if(key in gameData.hand){
				drawCardInHand(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]*.25,
		height: gameData.size[entity][1]*.25,
		fillStyle: '#DCDCDC'
	});
	deckCounterSprite.draw();

	// Draw deck count text
	ctx.fillStyle = '#000';

	// Deck count for the deck belonging to player
	let deckCount=gameData.cardCount.deck[gameData.player[entity]];
	let textX=gameData.position[entity][0];//-(ctx.measureText(deckCount).width);
	let textY=gameData.position[entity][1]+(ctx.measureText(deckCount).width/2);

	printText(deckCount, textX, textY, 'center', 'bottom', 'normal', 'bold', '10', 'Arial', '#000');

}
function drawCardInHand(entity){

	console.log('Draw card in hand');
	console.log(gameData.position[entity]);
	console.log(gameData.size[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();

}


// TEMP, or maybe not for opponent. Not 100% how to draw opponent hand without passing the data
// avoiding passing the data (for now) to prevent cheating by checking their cardIds etc. in the
// console. An issue that comes with making this in JS...
function drawFakeHand(){

	console.log('Draw FAKE hand');

	// itemList length is the count (/highest listPosition) in the hand in this case
	// i is the listPosition of the entity (which since this isn't using the entities at the mo...)
	
	// All jank temp kinda vars
	// Needed as i substitute to track the fake hand drawn count
	let opponentHandItem = 0;
	let itemListLength = 0; // Believe value should just be the count of current cardCount.hand
	let i = 0; // Believe value should just be the count of current cardCount.hand

	// Loop each 'hand' not actual hand, but count of cards in hand
	for (const [key, value] of Object.entries(gameData.cardCount.hand)) {

		// key is the playerId here
		switch(gameData.player[key]){

			// Set position for opponents deck
			case gameData.opponentId:

				// Then loop the size of the hand
				itemListLength = value; // Believe value should just be the count of current cardCount.hand
				i = opponentHandItem; // Believe value should just be the count of current cardCount.hand

				for(i; i < itemListLength; i++){
					let shape = new Shape({
						x: canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardMargin * (i+1))),
						y: 20,
						width: cardWidth,
						height: cardHeight,
						fillStyle: '#EEE',
						strokeStyle: '#AAA',
					});
					shape.draw();
				}
				break;

		}

	}

}