diff --git a/public/board.js b/public/board.js index 939dc75..ed5d5dc 100644 --- a/public/board.js +++ b/public/board.js @@ -83,8 +83,7 @@ class Board{ this.drawCardsOnBoard(); this.drawCardsOnBoardOpponent(); - this.drawDeck(); - this.drawDeckOpponent(); + this.drawDecks(); this.drawShield(); this.drawShieldOpponent(); @@ -360,58 +359,100 @@ class Board{ ctx.font = "10pt Arial"; } - drawDeck(){ - // Deck - clickableItems['deckSprite'] = new Shape({ - name: 'deck', - 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); - clickableItems['deckSprite'].draw(); - let deckCounterSprite = new Shape({ - shape: 'circle', - name: 'deckCounter', - x: canvas.width-cardWidth*.6, - y: canvas.height-cardHeight*.6, - width: cardWidth*.375, - height: cardHeight*.375, - fillStyle: "#FFF" - }); - deckCounterSprite.draw(); + drawDecks(){ + // Draw all decks belonging to players (currently 2, could be 3-5 in future, for PvE raids) + // TODO: Probably add this as an item of boardElement 'realDeck', as 'deck' is cards in deck + // actually, maybe change current 'deck' to 'inDeck', reads better + let name = null; + let countername = null; + let x = null; + let counterx = null; + let y = null; + let countery = null; + let width = null; + let counterwidth = null; + let height = null; + let counterheight = null; + let fill = null; + let counterfill = '#FFF'; + let textx = null; + let texty = null; + let deckLength = 0; + + for(let playerId = 0; playerId < players; playerId++){ + if(playerId == 0){ + // Deck + name= 'deck'; + x= canvas.width-cardWidth*1.5-40; + y= canvas.height-cardHeight*1.5-60; + width= cardWidth*1.5; + height= cardHeight*1.5; + fill= "#0000FF"; + + countername= 'deckCounter'; + counterx= canvas.width-cardWidth*.6; + countery= canvas.height-cardHeight*.6; + counterwidth= cardWidth*.375; + counterheight= cardHeight*.375; + + // TODO: Center in the circle + deckLength = getCurrentPositionAndLength('deck', 0)[1]; + textx = canvas.width-cardWidth*.6 - (ctx.measureText(deckLength).width) + 7; + texty = canvas.height-cardHeight*.6 + 5; + } + if(playerId == 1){ + // Opponent's Deck + name= 'deckOpponent'; + x= 40; + y= 60; + width= cardWidth*1.5; + height= cardHeight*1.5; + fill= "#FF0000"; + + countername= 'deckCounterOpponent'; + counterx= cardWidth*1.5+(cardWidth*.375); + countery= cardHeight*1.5+(cardHeight*.375); + counterwidth= cardWidth*.375; + counterheight= cardHeight*.375; + counterfill= "#FFF"; + + deckLength = getCurrentPositionAndLength('deck', 1)[1]; + textx=cardWidth*1.5 + (ctx.measureText(deckLength).width) + 10; + texty=cardHeight*1.9; - // TODO: Center in the circle - ctx.fillStyle = '#000'; - ctx.fillText(playerDeck.length, canvas.width-cardWidth*.6 - (ctx.measureText(playerDeck.length).width) + 7, canvas.height-cardHeight*.6 + 5); - } - drawDeckOpponent(){ - // Opponent's Deck - clickableItems['deckOpponentSprite'] = new Shape({ - name: 'deckOpponent', - x: 40, - y: 60, - width: cardWidth*1.5, - height: cardHeight*1.5, - fillStyle: "#FF0000" - }); - clickableItems['deckOpponentSprite'].draw(); - let deckCounterOpponentSprite = new Shape({ - shape: 'circle', - name: 'deckCounterOpponent', - x: cardWidth*1.5+(cardWidth*.375), - y: cardHeight*1.5+(cardHeight*.375), - width: cardWidth*.375, - height: cardHeight*.375, - fillStyle: "#FFF" - }); - deckCounterOpponentSprite.draw(); + } + + // Actually draw the decks base on the size/position, etc. + clickableItems[name+'Sprite'] = new Shape({ + name: name, + x: x, + y: y, + width: width, + height: height, + fillStyle: fill + }); + //ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2); + clickableItems[name+'Sprite'].draw(); + + // Draw circle for deck count to sit in + let deckCounterSprite = new Shape({ + shape: 'circle', + name: countername, + x: counterx, + y: countery, + width: counterwidth, + height: counterheight, + fillStyle: counterfill + }); + console.log(deckCounterSprite); + deckCounterSprite.draw(); + + // Draw deck count text + // TODO: Center in the circle + ctx.fillStyle = '#000'; + ctx.fillText(deckLength, textx, texty); + } - ctx.fillStyle = '#000'; - // TODO: Center in the circle - ctx.fillText(opponentDeck.length, cardWidth*1.5 + (ctx.measureText(opponentDeck.length).width) + 10, cardHeight*1.9); } addFromBoardElement(playerFrom, fromPosition, elementFrom, elementTo, toPosition=null, playerTo=null){