Add visual queues for passive effects

public/board.js

@@ -215,6 +215,10 @@ class Board{
 			fillStyle: fill,
 			strokeStyle: border
 		});
+		// Add a dropshadow to flight cards (they're flyin)
+		if(flight[itemKey]){
+			shape.setShadow(true);
+		}
 		shape.draw();
 
 		// Draw the card face-up
@@ -222,6 +226,7 @@ class Board{
 			this.addCardImage(itemKey);
 			this.printCardDetails(itemKey);
 			this.printColourRequirements(itemKey);
+			this.printCardPassives(itemKey);
 		}
 		if(!this.isFaceUp(itemKey)){
 			this.addCardBack(itemKey);
@@ -346,6 +351,23 @@ class Board{
 		// TODO: CardBack/Sleeves as spritesheet like cardArt
 		ctx.drawImage(cardBackArt, 0,0, 80,120,positionX,positionY,width,height);
 	}
+	// Check each passive, if the card has it, add the 'icon' to display it.
+	printCardPassives(itemKey){
+
+		let passiveCount = 0;
+
+		let positionX = position[itemKey][0];
+		let positionY = position[itemKey][1] - 10;
+
+		if(itemKey in flight){
+			this.printCenterText('F', positionX + (10*passiveCount), positionY); 
+			passiveCount++;
+		}
+		if(itemKey in reach){
+			this.printCenterText('R', positionX + (10*passiveCount), positionY); 
+			passiveCount++;
+		}
+	}
 	printColourRequirements(itemKey){
 		// Set the size(s)
 		let width = size[itemKey][0]*.1;
@@ -1550,6 +1572,10 @@ function calculateItemSizePosition(itemKey){
 	if(itemPlayer == 0 && itemElement == 'board'){
 		positionX = canvas.width/2 - (cardWidth * (itemListLength - (i+1)) - (cardMargin * (i+1)));
 		positionY = canvas.height - cardHeight-30-(cardHeight);
+		// Move up to denote 'Flight' keyword
+		if(flight[itemKey]){
+			positionY-=10;
+		}
 		width	= cardWidth;
 		height	= cardHeight;
 	}

public/shapes.js

@@ -17,6 +17,10 @@ class Shape extends Path2D{
 		this.fillStyle = params.fillStyle || "#FFFFFF";
 		this.strokeStyle = params.strokeStyle || false;
 		this.lineWidth = params.lineWidth || 0;
+		this.shadow = params.shadow || false;
+	}
+	setShadow(shadow){
+		this.shadow = shadow;
 	}
 	draw(){
 		//console.log('Draw Shape: '+this.name);
@@ -26,6 +30,14 @@ class Shape extends Path2D{
 
 		if (this.fillStyle) {
 			context.fillStyle = this.fillStyle;
+
+			if(this.shadow){
+				context.shadowColor = "#333";
+				context.shadowOffsetX = 1;
+				context.shadowOffsetY = 3;
+				context.shadowBlur = 10;
+			}
+
 			if(this.shape == 'circle'){
 				// X,Y,Radius, start, end
 				context.beginPath();
@@ -41,6 +53,10 @@ class Shape extends Path2D{
 				context.fillRect(this.x, this.y, this.width, this.height);
 			}
 			context.fillStyle = defaultFillStyle; // Reset back to default
+			context.shadowColor = 'transparent';
+			context.shadowBlur = null;
+			context.shadowOffsetX = null;
+			context.shadowOffsetY = null;
 		}
 		if (this.strokeStyle && this.lineWidth || shapeDebug) {
 			context.strokeStyle = this.strokeStyle;