diff --git a/public/board.js b/public/board.js index 60baec3..e47e4b5 100644 --- a/public/board.js +++ b/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(); } }); diff --git a/public/shapes.js b/public/shapes.js index df42eef..0412f78 100644 --- a/public/shapes.js +++ b/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); }