From b0b784c619c73937c2b4cf52ad67909d08c3ae43 Mon Sep 17 00:00:00 2001 From: Nathan Date: Fri, 11 Oct 2024 16:00:36 +0100 Subject: [PATCH] Add all current drawing into drawECS loop This is working well, drawing everything with only needing to pass the item key --- public/board.js | 182 ++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 144 insertions(+), 38 deletions(-) diff --git a/public/board.js b/public/board.js index 6d50337..042a3aa 100644 --- a/public/board.js +++ b/public/board.js @@ -151,49 +151,126 @@ class Board{ let itemPlayer = player[itemKey]; console.log('Element: '+element+', Player: '+itemPlayer); - // Calc position of the element draw - let itemListPositionLength = getCurrentPositionAndLength(element, 1); - let itemListPositionNext = itemListPositionLength[0]; - let itemListLength = itemListPositionLength[1]; - - let cardPadding = 10; - let i = listPosition[itemKey]; - console.log('cardName: '+cardData[itemKey].name+', i/listPosition: '+i+', listPosition Length: '+itemListLength); - - let positionX = canvas.width/2 - (cardWidth * (itemListLength - i) - (cardPadding * i)); - let positionY = cardHeight + 30; - let width = cardWidth; - let height = cardHeight; - - position[itemKey] = [positionX,positionY]; - size[itemKey] = [width, height]; - - // Check status (for tapped atm) - let border = null; - if(cardStatus[itemKey] == 'tapped'){border = '#E0BC00';} - let name = itemKey; // Not needed really anymore, but keeping for now - positionX = position[itemKey][0]; - positionY = position[itemKey][1]; - width = size[itemKey][0]; - height = size[itemKey][1]; - let fill = '#CCC'; - - let shape = new Shape({ - name: name, - x: positionX, - y: positionY, - width: width, - height: height, - fillStyle: fill, - strokeStyle: border - }); - - shape.draw(); + calculateItemSizePosition(itemKey); + this.printCardToCanvas(itemKey); } } } } + + printCardToCanvas(itemKey){ + // If the itemKey has cardData, position, size, and boardElement we can draw it + // TODO: Add a check for error handling + + // Check status, and change border colour for display (for tapped atm) + let border = null; + if(cardStatus[itemKey] == 'tapped'){border = '#E0BC00';} + + // Set the card 'cardboard' colour based on the card colour type + let colourId = cardData[itemKey].colour; + let fill = null; + if(colourId == 0){ fill = '#EEE'; } + else if(colourId == 1){ fill = '#0033EE'; } + + let name = itemKey; // Not needed really anymore, but keeping for now + let positionX = position[itemKey][0]; + let positionY = position[itemKey][1]; + let width = size[itemKey][0]; + let height = size[itemKey][1]; + + // Draw the card shape itself + let shape = new Shape({ + name: name, + x: positionX, + y: positionY, + width: width, + height: height, + fillStyle: fill, + strokeStyle: border + }); + shape.draw(); + + this.printCardImage(itemKey); + + this.printCardDetails(itemKey); + + + } + + printCardImage(itemKey){ + let name = itemKey; // Not needed really anymore, but keeping for now + let positionX = position[itemKey][0]; + let positionY = position[itemKey][1]; + let width = size[itemKey][0]; + let height = size[itemKey][1]; + let fill = '#BBB'; + let shape = 'semi'; // Will be decided based on cardData.something? (for unit, spell, etc) + + // Add 'image' shape, will need to blitz sprite here in the future (based on cardData.id) + let cardImageContainer = new Shape({ + shape: 'semi', + name: 'cardImageContainer_'+name, + x: positionX+height/3, + y: positionY+width/2, + width: width*.9, + height: height*.9, + fillStyle: fill + }); + cardImageContainer.draw(); + + // Draw the actual image too + + } + printCardDetails(itemKey){ + let name = itemKey; // Not needed really anymore, but keeping for now + let positionX = position[itemKey][0]; + let positionY = position[itemKey][1]; + let width = size[itemKey][0]; + let height = size[itemKey][1]; + + // Add card name + let fontSize = width/cardWidth*10; // 10 = baseFontSize of 10pt + ctx.font = "bold "+fontSize+"pt Arial"; + ctx.fillStyle = '#000'; + ctx.fillText( + cardData[itemKey]['name'] + , positionX + (ctx.measureText(cardData[itemKey]['name']/2).width) - width/4 + , positionY+height*.25 + ); + + // Add card type + ctx.fillText( + cardData[itemKey]['type'] + , positionX + (ctx.measureText(cardData[itemKey]['type']/2).width) - width/4 + , positionY+height*.7 + ); + // Add text/effect area + if(cardData[itemKey]['effect'] !== null){ + ctx.fillText( + cardData[itemKey]['effect'] + , positionX + (ctx.measureText(cardData[itemKey]['effect']/2).width) - width/4 + , positionY+height*.8 + ); + } + // Attack + ctx.fillText( + cardData[itemKey]['atk'] + , positionX + (ctx.measureText(cardData[itemKey]['atk']).width) + , positionY+height*.95 + ); + // Add cost + ctx.fillText( + cardData[itemKey]['cost'] + , positionX + (ctx.measureText(cardData[itemKey]['cost']).width) + , positionY+height*.1 + ); + + // Unbold font for other draws + ctx.font = "10pt Arial"; + } + + // Draw Invidual Cards, called by other deck stuff // Might be put into a card class, makes sense, eh. drawCard(array, arrayKey, name, positionX, positionY, width, height, fill, border){ @@ -1026,3 +1103,32 @@ function getCurrentPositionAndLength(elementName, playerId){ } +function calculateItemSizePosition(itemKey){ + + // Calc position and size of the item + // Used for drawing and interacting + + let itemPlayer = player[itemKey]; + let itemElement = boardElement[itemKey]; + + let itemListPositionLength = getCurrentPositionAndLength(itemElement, itemPlayer); + let itemListPositionNext = itemListPositionLength[0]; + let itemListLength = itemListPositionLength[1]; + + // TODO:Padding probably will differ between elements + let cardPadding = 10; + let i = listPosition[itemKey]; + //console.log('cardName: '+cardData[itemKey].name+', i/listPosition: '+i+', listPosition Length: '+itemListLength); + + // TODO:X/Y W/H 100% differs based on the element + let positionX = canvas.width/2 - (cardWidth * (itemListLength - i) - (cardPadding * i)); + let positionY = cardHeight + 30; + let width = cardWidth; + let height = cardHeight; + + // Set the size/position of the item + size[itemKey] = [width, height]; + position[itemKey] = [positionX,positionY]; + +} +