function drawGameBoard(){

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

	drawPlayerNames();
	calculateDeckPositions();

	drawEntities();

}

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;

		}
	}

}

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');

}