diff --git a/public/board.js b/public/board.js index af0ddde..8447787 100644 --- a/public/board.js +++ b/public/board.js @@ -72,6 +72,30 @@ 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){ + var cardClickable = new Shape({ + name: name, + x: positionX, + y: positionY, + width: cardWidth/2, + height: cardHeight/2, + fillStyle: fill + }); + + array[arrayKey]['clickable'] = cardClickable; + array[arrayKey]['clickable'].draw(); + + // Add card text + ctx.fillStyle = '#000'; + ctx.fillText( + array[arrayKey]['name'] + , positionX + (ctx.measureText(array[arrayKey]['name']/2).width) + , positionY+20 + ); + } + drawDeck(){ // Deck clickableItems['deckSprite'] = new Shape({ @@ -127,7 +151,7 @@ class Board{ } // Naming's getting awkward here... - // Draw the card + // Draw the cards in hand drawHand(){ // Player Hand/Cards in Hand for (let i = 0; i < playerHand.length; i++) { @@ -138,28 +162,12 @@ class Board{ let fill = '#'+i+i+'FF00'; // TODO: fix positionX, actually have some maffs - let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerHand.length - (i+1)) - (cardPadding * (i+1))); - let positionY = canvas.height - cardHeight/2-20; - console.log('drawHand: cardsInHand: '+(i+1)+' / '+playerHand.length); - - clickableItems['hand'][name] = new Shape({ - name: name, - x: positionX, - y: positionY, - width: cardWidth/2, - height: cardHeight/2, - fillStyle: fill - }); - playerHand[i]['clickable'] = clickableItems['hand'][name]; - playerHand[i]['clickable'].draw(); - - // Add card text - ctx.fillStyle = '#000'; - ctx.fillText( - playerHand[i]['name'] - , positionX + (ctx.measureText(playerHand[i]['name']/2).width) - , positionY+20 - ); + let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerHand.length - (i+1)) - (cardPadding * (i+1))); + let positionY = canvas.height - cardHeight/2-20; + let width = cardWidth/2; + let height = cardHeight/2; + + this.drawCard(playerHand, i, name, positionX, positionY, width, height, fill); } } @@ -176,27 +184,10 @@ class Board{ // TODO: fix positionX, actually have some maffs let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (opponentHand.length - (i+1)) - (cardPadding * (i+1))); let positionY = 20; - console.log('drawOpponentHand: cardsInHand: '+(i+1)+' / '+opponentHand.length); - - clickableItems['opponentHand'][name] = new Shape({ - name: name, - x: positionX, - y: positionY, - width: cardWidth/2, - height: cardHeight/2, - fillStyle: fill - }); - - opponentHand[i]['clickable'] = clickableItems['opponentHand'][name]; - opponentHand[i]['clickable'].draw(); - - // Add card text - ctx.fillStyle = '#000'; - ctx.fillText( - opponentHand[i]['name'] - , positionX + (ctx.measureText(opponentHand[i]['name']/2).width) - , positionY+20 - ); + let width = cardWidth/2; + let height = cardHeight/2; + + this.drawCard(opponentHand, i, name, positionX, positionY, width, height, fill); } } @@ -213,7 +204,6 @@ class Board{ // Random card from deck, remove from deck, add to hand let cardToDraw = Math.floor(Math.random() * deckCount); let cardDrawn = playerDeck[cardToDraw]; - console.log(cardDrawn); // Remove from deck playerDeck.splice(cardToDraw, 1); // Add to hand @@ -228,7 +218,6 @@ class Board{ // Random card from deck, remove from deck, add to hand let cardToDraw = Math.floor(Math.random() * deckCountOpponent); let cardDrawn = opponentDeck[cardToDraw]; - console.log(cardDrawn); // Remove from deck opponentDeck.splice(cardToDraw, 1); // Add to hand @@ -238,7 +227,7 @@ class Board{ drawCardsOnBoard(){ - // DUPER OF DRAW PLAYER HAND FOR NOW!!! + // DUPE OF DRAW PLAYER HAND FOR NOW!!! for (let i = 0; i < playerBoard.length; i++) { let name = 'cardOnBoard_'+(i+1); @@ -248,28 +237,19 @@ class Board{ // TODO: fix positionX, actually have some maffs let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (playerBoard.length - (i+1)) - (cardPadding * (i+1))); - let positionY = canvas.height - cardHeight/2-20; - console.log('drawHand: cardsInHand: '+(i+1)+' / '+playerHand.length); - - clickableItems['board'][name] = new Shape({ - name: name, - x: positionX, - y: positionY-cardHeight/2, - width: cardWidth/2, - height: cardHeight/2, - fillStyle: fill - }); - playerBoard[i]['clickable'] = clickableItems['board'][name]; - playerBoard[i]['clickable'].draw(); - } - + let positionY = canvas.height - cardHeight/2-20-(cardHeight/2); + let width = cardWidth/2; + let height = cardHeight/2; + this.drawCard(playerBoard, i, name, positionX, positionY, width, height, fill); + } } drawCardsOnBoardOpponent(){ } + // Currently only functionality in hand playCardToBoard(index){ // Get the card data let cardPlayed = playerHand[index]; @@ -293,7 +273,6 @@ class Board{ // TEMP!! createDeckList(playerDeck, deckCount); createDeckList(opponentDeck, deckCountOpponent); -console.log(playerDeck); // Run board commands here for testing let board = new Board; @@ -329,15 +308,11 @@ canvas.addEventListener('click', function(event) { // # PLAYER HAND playerHand.forEach(function(card, index){ - console.log(card); - console.log(card.clickable); let clickable = card.clickable; if(clickableCheck(x,y,clickable)){ - console.log('Clicked Hand item: '+ clickable.name); - board.playCardToBoard(index); // This would actually fire off a socketIO doodad, that would then return