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.
567 lines
17 KiB
JavaScript
567 lines
17 KiB
JavaScript
function drawGameBoard(){
|
|
|
|
// Reset board
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
drawPlayerNames();
|
|
calculateDeckPositions();
|
|
calculateHandPositions();
|
|
calculateBoardPositions();
|
|
|
|
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-40, canvas.height-cardHeight-60]; // X/Y
|
|
gameData.size[key] = [cardWidth, cardHeight];
|
|
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, cardHeight];
|
|
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 * handScale) * (cardsInHand - (positionInHand+1)) - (cardMargin * (positionInHand+1)))
|
|
,canvas.height-(cardHeight * handScale)-20
|
|
];
|
|
gameData.size[key] = [cardWidth * handScale, cardHeight * handScale];
|
|
break;
|
|
|
|
// Opponent, currently done in fakeHand
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
// TODO: Move from draw into somewhere else
|
|
function calculateBoardPositions(){
|
|
|
|
for (const [key, value] of Object.entries(gameData.board)) {
|
|
|
|
// key is entity Id here
|
|
let cardsOnBoard = 0;
|
|
let position = 0;
|
|
|
|
switch(gameData.player[key]){
|
|
|
|
// Set position for player hand (all the time at current)
|
|
case gameData.playerId:
|
|
|
|
cardsOnBoard = gameData.cardCount.board[gameData.playerId];
|
|
position = gameData.listPosition[key];
|
|
|
|
gameData.position[key] = [
|
|
canvas.width/2 - (cardWidth * (cardsOnBoard - (position+1)) - (cardMargin * (position+1)))
|
|
,canvas.height-((cardHeight*2) * handScale)-30
|
|
];
|
|
|
|
gameData.size[key] = [cardWidth * handScale, cardHeight * handScale];
|
|
|
|
break;
|
|
|
|
// Opponent
|
|
case gameData.opponentId:
|
|
|
|
cardsOnBoard = gameData.cardCount.board[gameData.opponentId];
|
|
position = gameData.listPosition[key];
|
|
|
|
gameData.position[key] = [
|
|
canvas.width/2 - (cardWidth * (cardsOnBoard - (position+1)) - (cardMargin * (position+1)))
|
|
,((cardHeight*2) * handScale)+30
|
|
];
|
|
gameData.size[key] = [cardWidth * handScale, cardHeight * handScale];
|
|
|
|
break;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
// TODO: Move this function elsewhere, not really a draw function
|
|
function calculateCardSpacing(positionInt, size, standardSize){
|
|
|
|
let scaleMultiplier = size/standardSize;
|
|
return positionInt * scaleMultiplier;
|
|
|
|
}
|
|
|
|
|
|
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);
|
|
}
|
|
|
|
// If card on board
|
|
if(key in gameData.board){
|
|
drawCardOnBoard(key);
|
|
}
|
|
|
|
if(key in gameData.inInteractionMenu){
|
|
// Add the menu with 'play', 'activate effect', 'inspect', etc.
|
|
drawInteractionMenu(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){
|
|
|
|
// TODO: Change card colour based on its colours
|
|
|
|
// Draw the card 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);
|
|
|
|
}
|
|
|
|
function drawCardOnBoard(entity){
|
|
|
|
// TODO: Tapped, Attacking, Targettable, Activatable borders
|
|
// TODO: Passives, flight, etc. effects
|
|
|
|
// Draw the card 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+width*.5, // Center (probably change to an int in future)
|
|
y: positionY+calculateCardSpacing(65, height, cardHeight),
|
|
width: calculateCardSpacing(100, width, cardWidth),
|
|
height: calculateCardSpacing(150, height, cardHeight)
|
|
});
|
|
// Save canvas drawing, start the clip
|
|
cardImageContainer.startClip();
|
|
|
|
// 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
|
|
if(gameData.cardData[entity] !== undefined && gameData.cardData[entity]['name'] !== undefined){
|
|
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
|
|
if(gameData.cardData[entity] !== undefined && gameData.cardData[entity]['cost'] !== undefined){
|
|
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
|
|
if(gameData.cardData[entity] !== undefined && gameData.cardData[entity]['type'] !== undefined){
|
|
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)
|
|
if(gameData.cardData[entity] !== undefined && gameData.cardData[entity]['class'] !== undefined){
|
|
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)
|
|
if(gameData.cardData[entity] !== undefined && gameData.cardData[entity]['effect'] !== undefined){
|
|
// 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
|
|
if(gameData.cardData[entity] !== undefined && gameData.cardData[entity]['attack'] !== undefined){
|
|
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(){
|
|
|
|
// 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*handScale) * (itemListLength - (i+1)) - (cardMargin * (i+1)))
|
|
// X
|
|
,20 // Y
|
|
,cardWidth*handScale // Width
|
|
,cardHeight*handScale // Height
|
|
);
|
|
}
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function clearInteractionMenu(){
|
|
// Clear the existing interaction menu
|
|
gameData.inInteractionMenu = {};
|
|
gameData.interactionOption = {};
|
|
drawGameBoard();
|
|
}
|
|
function openInteractionMenu(entity){
|
|
// Only one interaction menu up at once (for now)
|
|
clearInteractionMenu();
|
|
|
|
// Add the 'new' entity interactionMenu
|
|
gameData.inInteractionMenu[entity] = entity;
|
|
|
|
// Add the available interaction(s) with size+positions
|
|
|
|
// TODO: Actually add the corresponding interactions depending on card, and boardElement
|
|
gameData.interactionOption['Play to Board'] = {
|
|
x: gameData.position[entity][0] + gameData.size[entity][0]*.1/2,
|
|
y: gameData.position[entity][1] + gameData.size[entity][1] - (35 * (Object.entries(gameData.interactionOption).length + 1)),
|
|
width: gameData.size[entity][0]*.9,
|
|
height: 30
|
|
}
|
|
gameData.interactionOption['Play as Mana'] = {
|
|
x: gameData.position[entity][0] + gameData.size[entity][0]*.1/2,
|
|
y: gameData.position[entity][1] + gameData.size[entity][1] - (35 * (Object.entries(gameData.interactionOption).length + 1)),
|
|
width: gameData.size[entity][0]*.9,
|
|
height: 30
|
|
}
|
|
|
|
// Interact
|
|
// Attack
|
|
// Tap
|
|
// Do, x/y
|
|
// Yadda yadda
|
|
|
|
// Add interaction options for effects of the card
|
|
if(gameData.cardData[entity] !== undefined && gameData.cardData[entity].effect.length > 0){
|
|
|
|
for(let i = 0; i < gameData.cardData[entity].effect.length; i++){
|
|
gameData.interactionOption['Trigger Effect '+(i+1)] = {
|
|
x: gameData.position[entity][0] + gameData.size[entity][0]*.1/2,
|
|
y: gameData.position[entity][1] + gameData.size[entity][1] - (35 * (Object.entries(gameData.interactionOption).length + 1)),
|
|
width: gameData.size[entity][0]*.9,
|
|
height: 30
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
drawGameBoard();
|
|
}
|
|
|
|
function drawInteractionMenu(entity){
|
|
// Draws the interactable options availabe for an entity
|
|
// TODO: Draw atop/below depening on position, etc.
|
|
|
|
for (const [key, value] of Object.entries(gameData.interactionOption)) {
|
|
|
|
// Draw the interaction box (TODO: make much better);
|
|
let menuItem = new Shape({
|
|
x: value.x,
|
|
y: value.y,
|
|
width: value.width,
|
|
height: value.height,
|
|
fillStyle: '#DDD',
|
|
strokeStyle: '#666'
|
|
});
|
|
menuItem.draw();
|
|
|
|
// Add the text
|
|
printText(
|
|
key
|
|
,value.x + value.width/2
|
|
,value.y + value.height/2
|
|
, 'center', 'middle', 'normal', 'normal', 8, 'Arial', '#333', false, false, false
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// TODO: Put the stack into the UI
|
|
function drawStackResolve(){
|
|
|
|
}
|
|
// TODO: Draw stack, all cards in the stack in order (use the cardId for display)
|
|
// make inspectable, and display which part of the effect will be triggered in it's
|
|
// stack position
|
|
|