Changes to cardSize

public/js/canvas/draw.js

@@ -59,14 +59,14 @@ function calculateDeckPositions(){
 
 			// 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];
+				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*1.5, cardHeight*1.5];
+				gameData.size[key] = [cardWidth, cardHeight];
 				break;
 
 		}
@@ -89,10 +89,10 @@ function calculateHandPositions(){
 				let positionInHand = gameData.listPosition[key];
 
 				gameData.position[key] = [
-					canvas.width/2 - (cardWidth * (cardsInHand - (positionInHand+1)) - (cardMargin * (positionInHand+1)))
-					,canvas.height-cardWidth*1.5-20
+					canvas.width/2 - ((cardWidth * handScale) * (cardsInHand - (positionInHand+1)) - (cardMargin * (positionInHand+1)))
+					,canvas.height-(cardHeight * handScale)-20
 				];
-				gameData.size[key] = [cardWidth, cardHeight];
+				gameData.size[key] = [cardWidth * handScale, cardHeight * handScale];
 				break;
 		
 			// Opponent, currently done in fakeHand 
@@ -102,10 +102,11 @@ function calculateHandPositions(){
 
 }
 // TODO: Move this function elsewhere, not really a draw function
-function calculateCardSpacing(){
+function calculateCardSpacing(positionInt, size, standardSize){
+
+	let scaleMultiplier = size/standardSize;	
+	return positionInt * scaleMultiplier;
 	
-	// TEMP: these spaces should live elsewhere (likely global)
-	let namePosition = 5;
 }
 
 
@@ -162,16 +163,12 @@ function drawDeck(entity){
 }
 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
+	// Draw the card shape
 	let shape = new Shape({
 		x: gameData.position[entity][0],
 		y: gameData.position[entity][1],
@@ -209,26 +206,29 @@ function drawCardImage(entity){
 	// Create the clipping shape
 	let cardImageContainer = new Shape({
 		shape: 'unit',
-		x: positionX+height/3,
-		y: positionY+width/2,
-		width: width*.9,
-		height: height*.9
+		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();
 	
-	// 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);
+	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();
@@ -378,11 +378,11 @@ function drawFakeHand(){
 						,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)))
+						,canvas.width/2 - ((cardWidth*handScale) * (itemListLength - (i+1)) - (cardMargin * (i+1)))
 // X
 						,20 // Y
-						,cardWidth // Width
-						,cardHeight // Height
+						,cardWidth*handScale // Width
+						,cardHeight*handScale // Height
 					);
 				}
 				break;

public/js/global.js

@@ -1,8 +1,8 @@
 const socket = io({autoConnect: false});
 const canvas = document.getElementById('canvas');;
 
-const cardWidth = 80;
-const cardHeight = 120;
+const cardWidth = 120; // 240px ~2.5 inch WAS 80 x3 (halfed for display)
+const cardHeight = 168; // 336px ~3.5 inch WAS 120 x2.8 (halfed for display)
 
 const cardArt = new Image();
 const cardBackArt = new Image();
@@ -36,3 +36,4 @@ const maxShield = 2;
 
 const cardMargin = 10;
 
+const handScale = .75;