Change base cardsize to fit on board

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);
 		}