Add attack and 'specialEvent' to eventListener

Attack is simple, cards can attack cards.
specialEvent is to check an attack,inspect, spell target etc isn't
happening, this prevent drawing while attacking, etc.

public/board.js

@@ -31,7 +31,7 @@ const maxHandSize = 4;
 const maxBoardSize = 3;
 
 let inspectCard = null;
-
+let attackingCard = null;
 
 // Gonna need lots of refactoring, and sorting
 class Board{
@@ -78,9 +78,9 @@ class Board{
 
 	// 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){
+	drawCard(array, arrayKey, name, positionX, positionY, width, height, fill, border){
 		// Card Colour
-		console.log('drawCard card: '+JSON.stringify(array[arrayKey]));
+		//console.log('drawCard card: '+JSON.stringify(array[arrayKey]));
 		let colourId = array[arrayKey].colour;
 		if(colourId == 0){ fill = '#EEE' }
 		else if(colourId == 1){ fill = '#0033EE' }
@@ -91,7 +91,8 @@ class Board{
 			y: positionY,
 			width: width,
 			height: height,
-			fillStyle: fill
+			fillStyle: fill,
+			strokeStyle: border
 		});
 
 		array[arrayKey]['clickable'] = cardClickable;
@@ -296,8 +297,12 @@ class Board{
 			let positionY = canvas.height - cardHeight-30-(cardHeight);
 			let width	= cardWidth;
 			let height	= cardHeight;
+			let border	= false;
 
-			this.drawCard(playerBoard, i, name, positionX, positionY, width, height, fill);
+			if(attackingCard !== null && playerBoard[i].name == attackingCard[0].name){
+				border = '#FF0000';
+			}
+			this.drawCard(playerBoard, i, name, positionX, positionY, width, height, fill, border);
 		}
 	}
 
@@ -373,6 +378,37 @@ class Board{
 			console.log('inspect');
 		}
 	}
+
+	// Selects the card that will be attacking
+	// Stop other actions besides selecting opponent/opponent unit
+	// Can cancel, will do later
+	startAttack(index){
+		// Can probably combine attacking/inspect, and set another array element to 'attacking', 'inspecting', etc.
+		attackingCard = [playerBoard[index], index];
+		this.drawBoard();
+	}
+	// Do the attack
+	makeAttack(index){
+		// If card attacked
+		// Compare attackingCard and defendingCard	
+		let defendingCard = opponentBoard[index];
+		if(defendingCard.atk <= attackingCard[0].atk){
+			opponentBoard.splice(index, 1);
+			// Need to push to grave, etc. here in future too
+		}
+		if(attackingCard[0].atk <= defendingCard.atk){
+			playerBoard.splice(attackingCard[1], 1);
+		}
+		console.log('attacking');
+		this.endAttack();
+		
+		// If player attacked
+		// Compare life/remove life cards 5/10/15,1/2/3?
+	}
+	endAttack(){
+		attackingCard = null;
+		this.drawBoard();
+	}
 }
 
 // TEMP!!
@@ -392,13 +428,21 @@ canvas.addEventListener('click', function(event) {
 	console.log('EVENT LISTENER');
 	console.log('');
 
+	// specialEvent used to prevent eventTriggers if something specific
+	// is being done, attack needs to be made, inspecting card.
+	// Prevents user from doing other actions until completed or cancelled event
+	let specialEvent = false;
+	if(inspectCard !== null || attackingCard !== null){
+		specialEvent = true;
+	}
+
 	var x = event.pageX - canvasLeft,
 	    y = event.pageY - canvasTop;
 
 	// Collision detection between clicked offset and clickableItems
 	// https://stackoverflow.com/a/9880302
 
-	if(inspectCard != null){
+	if(inspectCard !== null){
 		console.log(inspectCard);
 		clickable = inspectCard[0][inspectCard[1]].clickable;
 		console.log(clickable);
@@ -422,14 +466,14 @@ canvas.addEventListener('click', function(event) {
 	// TODO: potentially loop all clickables, and do a check on clickable.name to differ event handling per-item
 
 	// For now this will be fine, as it functions
-	if(clickableCheck(x,y,clickable)){
+	if(clickableCheck(x,y,clickable) && !specialEvent){
 		board.drawACard();
 	}
 
 	// # OPPONENT DECK
 	clickable = clickableItems['deckOpponentSprite'];
 
-	if(clickableCheck(x,y,clickable)){
+	if(clickableCheck(x,y,clickable) && !specialEvent){
 		board.drawACardOpponent();
 	}
 
@@ -438,7 +482,7 @@ canvas.addEventListener('click', function(event) {
 
 		let clickable = card.clickable;
 
-		if(clickableCheck(x,y,clickable)){
+		if(clickableCheck(x,y,clickable) && !specialEvent){
 
 			board.playCardToBoard(index);
 			
@@ -455,7 +499,12 @@ canvas.addEventListener('click', function(event) {
 		let clickable = card.clickable;
 
 		if(clickableCheck(x,y,clickable)){
-			board.startAttack(index);
+			if(attackingCard !== null && card == attackingCard[0]){
+				board.endAttack();
+			}
+			if(!specialEvent){
+				board.startAttack(index);
+			}
 			board.drawBoard();
 		}
 	});
@@ -465,7 +514,14 @@ canvas.addEventListener('click', function(event) {
 		let clickable = card.clickable;
 
 		if(clickableCheck(x,y,clickable)){
-			board.inspectOpponentBoard(index);
+			// Check if card if getting attacked
+			if(attackingCard !== null){
+				board.makeAttack(index);
+			}
+
+			if(!specialEvent){
+				board.inspectOpponentBoard(index);
+			}
 			board.drawBoard();
 		}
 	});

public/shapes.js

@@ -15,7 +15,7 @@ class Shape extends Path2D{
 		this.width = params.width || 0;
 		this.height = params.height || 0;
 		this.fillStyle = params.fillStyle || "#FFFFFF";
-		this.strokeStyle = params.strokeStyle || "#000000";
+		this.strokeStyle = params.strokeStyle || false;
 		this.lineWidth = params.lineWidth || 0;
 	}
 	draw(){
@@ -32,6 +32,11 @@ class Shape extends Path2D{
 				context.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI);
 				context.fill();
 				context.closePath();
+			}else if(this.shape == 'semi'){
+				context.beginPath();
+				context.arc(this.x, this.y, this.width/2, Math.PI, 0);
+				context.fill();
+				context.closePath();
 			}else if (this.shape == 'rectangle'){
 				context.fillRect(this.x, this.y, this.width, this.height);
 			}
@@ -40,16 +45,24 @@ class Shape extends Path2D{
 		if (this.strokeStyle && this.lineWidth || shapeDebug) {
 			context.strokeStyle = this.strokeStyle;
 			context.lineWidth = this.lineWidth;
-			if(shapeDebug){
+			if(!this.strokeStyle && shapeDebug){
 				context.strokeStyle = shapeDebugColour;
 				context.lineWidth = 2;
 			}
+			if(this.strokeStyle){
+				context.lineWidth = 2;
+			}
 			if(this.shape == 'circle'){
 				// X,Y,Radius, start, end
 				context.beginPath();
 				context.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI);
 				context.stroke();
 				context.closePath();
+			}else if(this.shape == 'semi'){
+				context.beginPath();
+				context.arc(this.x, this.y, this.width/2, Math.PI, 0);
+				context.stroke();
+				context.closePath();
 			}else if (this.shape == 'rectangle'){
 				context.strokeRect(this.x, this.y, this.width, this.height);
 			}