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.
396 lines
12 KiB
JavaScript
396 lines
12 KiB
JavaScript
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
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
// TODO: Move this function elsewhere, not really a draw function
|
|
function calculateCardSpacing(){
|
|
|
|
// TEMP: these spaces should live elsewhere (likely global)
|
|
let namePosition = 5;
|
|
}
|
|
|
|
|
|
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
|
|
drawCardBack(entity);
|
|
|
|
// 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]);
|
|
|
|
// TODO: Tapped, Attacking, Targettable, Activatable borders
|
|
|
|
// TODO: Change card colour based on its colours
|
|
// TODO: Not for hand, but cards on board need flight, etc.
|
|
|
|
// 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();
|
|
|
|
drawCardDetails(entity);
|
|
|
|
}
|
|
|
|
// The draw all the card data, name, colour, etc.
|
|
function drawCardDetails(entity){
|
|
|
|
console.log(gameData.cardData[entity]);
|
|
drawCardImage(entity); // TODO: Use a sprite per card, not just temp.
|
|
drawCardText(entity);
|
|
/*
|
|
this.printColourRequirements(entity);
|
|
this.printCardPassives(entity);
|
|
*/
|
|
|
|
}
|
|
|
|
function drawCardImage(entity){
|
|
|
|
let positionX = gameData.position[entity][0];
|
|
let positionY = gameData.position[entity][1];
|
|
let width = gameData.size[entity][0];
|
|
let height = gameData.size[entity][1];
|
|
|
|
// Create the clipping shape
|
|
let cardImageContainer = new Shape({
|
|
shape: 'unit',
|
|
x: positionX+height/3,
|
|
y: positionY+width/2,
|
|
width: width*.9,
|
|
height: height*.9
|
|
});
|
|
// Save canvas drawing, start the clip
|
|
cardImageContainer.startClip();
|
|
|
|
// Print the image to canvas, within the clipping mask
|
|
positionX = gameData.position[entity][0];
|
|
positionY = gameData.position[entity][1];
|
|
width = gameData.size[entity][0];
|
|
height = gameData.size[entity][1];
|
|
// Draw the image into the clipping mask
|
|
// image, dx,dy,dw,dh
|
|
// image, sx,sy, sw,sh,dx,dy,dw,dh
|
|
// TODO: give cards/cardData a sprite position and use it [0,0], [1,0], [1,4], etc...
|
|
let spriteSheetX = 80;//*cardSprite[entity][0];
|
|
let spriteSheetY = 120;//*cardSprite[entity][1];
|
|
ctx.drawImage(cardArt, spriteSheetX,spriteSheetY, 80,120,positionX,positionY,width,height);
|
|
|
|
// Restore the canvas draw post clip applied, to get everything else back too
|
|
cardImageContainer.endClip();
|
|
|
|
}
|
|
|
|
function drawCardText(entity){
|
|
|
|
let positionX = gameData.position[entity][0];
|
|
let positionY = gameData.position[entity][1];
|
|
let width = gameData.size[entity][0];
|
|
let height = gameData.size[entity][1];
|
|
|
|
// Calculate the fontsize for the card at different 'zooms'/sizes
|
|
let fontSize = width/cardWidth*8; // 8pt. 10 = baseFontSize of 10pt
|
|
//ctx.font = "bold "+fontSize+"pt Arial";
|
|
let fillStyle = '#000';
|
|
let strokeStyle = '#FFF';
|
|
let strokeSize = fontSize/12;
|
|
|
|
// TODO:
|
|
// 5px on regular 80px = 80/16, so width/16 = the same spacing. Probbaly just another
|
|
// function to calc the spacings like cardSize/actualSizeOfSpace (80/5) = 16, then. sizeOfThisCard/16 = RETURN
|
|
// This is fow the positionX + Xs as the Xs will not be that size if the card size is smaller/bigger
|
|
// so TODO gotta make it scaled % wise with the 80/16 I wrote above
|
|
|
|
// NAME
|
|
printText(gameData.cardData[entity]['name']
|
|
, positionX + 5 + 10 // + 5 (spacing for cost) + 10 for more spacing
|
|
, positionY + 10 + 5 // + 10pt + 5 as it's the spacing I actually want
|
|
, 'left', 'alphabetic', 'normal', 'normal', fontSize, 'Arial', fillStyle, strokeStyle, strokeSize, false
|
|
);
|
|
|
|
// COST
|
|
printText(gameData.cardData[entity]['cost']
|
|
, positionX + 5
|
|
, positionY + 10 + 5 // + 10pt + 5 as it's the spacing I actually want
|
|
, 'left', 'alphabetic', 'normal', 'normal', fontSize, 'Arial', fillStyle, strokeStyle, strokeSize, false
|
|
);
|
|
|
|
|
|
// TYPE
|
|
printText(
|
|
CLASS[gameData.cardData[entity]['type']]
|
|
, positionX + 5
|
|
, positionY + width // To be slightly over bottom of image (which uses width to position)
|
|
, 'left', 'alphabetic', 'normal', 'normal', fontSize, 'Arial', fillStyle, strokeStyle, strokeSize, false
|
|
);
|
|
|
|
// CLASS(ES)
|
|
let classes = '';
|
|
// Loop the classes, and add each of them to the card
|
|
for(let i = 0; i < gameData.cardData[entity]['class'].length; i++){
|
|
// Add a comma to seperate if it's not the first class
|
|
if(i > 0){ classes += ', '; }
|
|
// Add the class name to the list to print
|
|
classes += CLASS[gameData.cardData[entity]['class'][i]];
|
|
}
|
|
|
|
printText(
|
|
classes
|
|
, positionX + 5 + 5 + ctx.measureText(CLASS[gameData.cardData[entity]['type']]).width // + another 5 and width of type for spacing
|
|
, positionY + width // To be slightly over bottom of image (which uses width to position)
|
|
, 'left', 'alphabetic', 'normal', 'normal', fontSize, 'Arial', fillStyle, strokeStyle, strokeSize, false
|
|
);
|
|
|
|
// EFFECT(S)
|
|
// TODO: Split the text onto lines based on character count (but not splitting words) so they fit into the
|
|
// bounds of the card element
|
|
let effects = '';
|
|
// Loop the classes, and add each of them to the card
|
|
for(let i = 0; i < gameData.cardData[entity]['effect'].length; i++){
|
|
// Split effects with an additonal break (any more than 1st effect)
|
|
if(i > 0){ classes += '\n'; }
|
|
// Add the class name to the list to print
|
|
effects += gameData.cardData[entity]['effect'][i];
|
|
}
|
|
printText(
|
|
effects
|
|
, positionX + 5
|
|
, positionY + width + 10 // To be beneath image, and type + classes
|
|
, 'left', 'alphabetic', 'normal', 'normal', fontSize, 'Arial', fillStyle, strokeStyle, strokeSize, false
|
|
);
|
|
|
|
// ATTACK
|
|
printText(gameData.cardData[entity]['attack']
|
|
, positionX + width/2 - ctx.measureText(gameData.cardData[entity]['attack']).width/2 // Should be centred
|
|
, positionY + 10 + (height - 10) // + 10pt + 5 as it's the spacing I actually want
|
|
, 'left', 'alphabetic', 'normal', 'normal', fontSize, 'Arial', fillStyle, strokeStyle, strokeSize, false
|
|
);
|
|
|
|
// Reset font for other draws
|
|
// TODO: Probably just use a save/restore for the font draws in here
|
|
ctx.font = "10pt Arial";
|
|
|
|
}
|
|
|
|
|
|
function drawCardBack(entity){
|
|
ctx.drawImage(
|
|
cardBackArt
|
|
,0 // X Position From in Spritesheet
|
|
,0 // Y Position From in Spritesheet
|
|
,80 // Width of image selection from Spritesheet
|
|
,120 // Height of image selection from Spritesheet
|
|
,gameData.position[entity][0] // X
|
|
,gameData.position[entity][1] // Y
|
|
,gameData.size[entity][0] // Width
|
|
,gameData.size[entity][1] // Height
|
|
);
|
|
}
|
|
|
|
|
|
// 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++){
|
|
ctx.drawImage(
|
|
cardBackArt
|
|
,0 // X Position From in Spritesheet
|
|
,0 // Y Position From in Spritesheet
|
|
,80 // Width of image selection from Spritesheet
|
|
,120 // Height of image selection from Spritesheet
|
|
,canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardMargin * (i+1)))
|
|
// X
|
|
,20 // Y
|
|
,cardWidth // Width
|
|
,cardHeight // Height
|
|
);
|
|
}
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|