You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
3.1 KiB
JavaScript
126 lines
3.1 KiB
JavaScript
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');
|
|
|
|
}
|
|
|