From 558a452d29aa44d2221db128688f829524788236 Mon Sep 17 00:00:00 2001 From: Nathan Date: Mon, 7 Oct 2024 20:11:44 +0100 Subject: [PATCH] Change base cardsize to fit on board --- public/board.js | 68 ++++++++++++++++++++++++------------------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/public/board.js b/public/board.js index 18d9b89..fa745af 100644 --- a/public/board.js +++ b/public/board.js @@ -2,8 +2,8 @@ const ctx = canvas.getContext('2d'); const canvasLeft = canvas.offsetLeft + canvas.clientLeft; const canvasTop = canvas.offsetTop + canvas.clientTop; -const cardWidth = 240; -const cardHeight = 360; +const cardWidth = 80; +const cardHeight = 120; const cards = new Image(); const back = new Image(); @@ -91,7 +91,7 @@ class Board{ ctx.fillStyle = '#000'; ctx.fillText( array[arrayKey]['name'] - , positionX + (ctx.measureText(array[arrayKey]['name']/2).width) + , positionX + (ctx.measureText(array[arrayKey]['name']/2).width) - width/4 , positionY+20 ); } @@ -100,10 +100,10 @@ class Board{ // Deck clickableItems['deckSprite'] = new Shape({ name: 'deck', - x: canvas.width-cardWidth/2-40, - y: canvas.height-cardHeight/2-60, - width: cardWidth/2, - height: cardHeight/2, + x: canvas.width-cardWidth*1.5-40, + y: canvas.height-cardHeight*1.5-60, + width: cardWidth*1.5, + height: cardHeight*1.5, fillStyle: "#0000FF" }); //ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2); @@ -111,17 +111,17 @@ class Board{ let deckCounterSprite = new Shape({ shape: 'circle', name: 'deckCounter', - x: canvas.width-cardWidth/5, - y: canvas.height-cardHeight/5, - width: cardWidth/8, - height: cardHeight/8, + x: canvas.width-cardWidth*.6, + y: canvas.height-cardHeight*.6, + width: cardWidth*.375, + height: cardHeight*.375, fillStyle: "#FFF" }); deckCounterSprite.draw(); // TODO: Center in the circle ctx.fillStyle = '#000'; - ctx.fillText(playerDeck.length, canvas.width-cardWidth/5 - (ctx.measureText(playerDeck.length).width) + 7, canvas.height-cardHeight/5 + 5); + ctx.fillText(playerDeck.length, canvas.width-cardWidth*.6 - (ctx.measureText(playerDeck.length).width) + 7, canvas.height-cardHeight*.6 + 5); } drawDeckOpponent(){ // Opponent's Deck @@ -129,25 +129,25 @@ class Board{ name: 'deckOpponent', x: 40, y: 60, - width: cardWidth/2, - height: cardHeight/2, + width: cardWidth*1.5, + height: cardHeight*1.5, fillStyle: "#FF0000" }); clickableItems['deckOpponentSprite'].draw(); let deckCounterOpponentSprite = new Shape({ shape: 'circle', name: 'deckCounterOpponent', - x: cardWidth/2+(cardWidth/8), - y: cardHeight/2+(cardHeight/8), - width: cardWidth/8, - height: cardHeight/8, + x: cardWidth*1.5+(cardWidth*.375), + y: cardHeight*1.5+(cardHeight*.375), + width: cardWidth*.375, + height: cardHeight*.375, fillStyle: "#FFF" }); deckCounterOpponentSprite.draw(); ctx.fillStyle = '#000'; // TODO: Center in the circle - ctx.fillText(opponentDeck.length, cardWidth/2 + (ctx.measureText(opponentDeck.length).width) + 10, cardHeight/1.58); + ctx.fillText(opponentDeck.length, cardWidth*1.5 + (ctx.measureText(opponentDeck.length).width) + 10, cardHeight*1.9); } // Naming's getting awkward here... @@ -162,10 +162,10 @@ class Board{ let fill = '#'+i+i+'FF00'; // TODO: fix positionX, actually have some maffs - let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerHand.length - (i+1)) - (cardPadding * (i+1))); - let positionY = canvas.height - cardHeight/2-20; - let width = cardWidth/2; - let height = cardHeight/2; + let positionX = canvas.width/2 - (cardWidth * (playerHand.length - (i+1)) - (cardPadding * (i+1))); + let positionY = canvas.height-cardWidth*1.5-20; + let width = cardWidth; + let height = cardHeight; this.drawCard(playerHand, i, name, positionX, positionY, width, height, fill); } @@ -182,10 +182,10 @@ class Board{ let fill = '#'+i+i+'DD00'; // TODO: fix positionX, actually have some maffs - let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (opponentHand.length - (i+1)) - (cardPadding * (i+1))); + let positionX = canvas.width/2 - (cardWidth * (opponentHand.length - (i+1)) - (cardPadding * (i+1))); let positionY = 20; - let width = cardWidth/2; - let height = cardHeight/2; + let width = cardWidth; + let height = cardHeight; this.drawCard(opponentHand, i, name, positionX, positionY, width, height, fill); } @@ -236,10 +236,10 @@ class Board{ let fill = '#'+i+i+'CC00'; // TODO: fix positionX, actually have some maffs - let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerBoard.length - (i+1)) - (cardPadding * (i+1))); - let positionY = canvas.height - cardHeight/2-20-(cardHeight/2); - let width = cardWidth/2; - let height = cardHeight/2; + let positionX = canvas.width/2 - (cardWidth * (playerBoard.length - (i+1)) - (cardPadding * (i+1))); + let positionY = canvas.height - cardHeight-30-(cardHeight); + let width = cardWidth; + let height = cardHeight; this.drawCard(playerBoard, i, name, positionX, positionY, width, height, fill); } @@ -254,10 +254,10 @@ class Board{ let fill = '#'+i+i+'AA00'; // TODO: fix positionX, actually have some maffs - let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (opponentBoard.length - (i+1)) - (cardPadding * (i+1))); - let positionY = cardHeight/2; - let width = cardWidth/2; - let height = cardHeight/2; + let positionX = canvas.width/2 - (cardWidth * (opponentBoard.length - (i+1)) - (cardPadding * (i+1))); + let positionY = cardHeight + 30; + let width = cardWidth; + let height = cardHeight; this.drawCard(opponentBoard, i, name, positionX, positionY, width, height, fill); }