diff --git a/public/board.js b/public/board.js index a11d31a..c1b7972 100644 --- a/public/board.js +++ b/public/board.js @@ -10,9 +10,24 @@ const back = new Image(); let clickableItems = []; -console.log(clickableItems); +clickableItems['hand'] = []; +clickableItems['opponentHand'] = []; +// TODO: Uniform the arrays to player and opponent/different playesr +let playerHand = []; +let opponentHand = []; +let playerBoard = []; +let opponentBoard = []; +let deckCount = 60; +let deckCountOpponent = 60; + +let cardsInOpponentsHand = 0; +const maxHandSize = 4; +const maxBoardSize = 3; + + +// Gonna need lots of refactoring, and sorting class Board{ constructor(){ console.log('initBoard'); @@ -24,7 +39,7 @@ class Board{ } drawBoard(){ - console.log('drawBoard'); + // Reset board ctx.clearRect(0, 0, canvas.width, canvas.height); // Room Name ctx.fillText(name, 0, 10); @@ -32,12 +47,13 @@ class Board{ this.drawDeck(); this.drawDeckOpponent(); + this.drawHand(); + this.drawOpponentHand(); + this.drawPlayerNames('Nathan', 'Evil Nathan'); } drawPlayerNames(playerName, opponentName = false){ - console.log('drawPlayerNames'); - // Player Name ctx.fillText(playerName, 50, canvas.height - 110); @@ -59,6 +75,7 @@ class Board{ height: cardHeight/2, 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', @@ -70,10 +87,8 @@ class Board{ fillStyle: "#FFF" }); deckCounterSprite.draw(); - let cardsInDeck = 60; // TODO: Center in the circle - ctx.fillText(cardsInDeck, canvas.width-cardWidth/5 - (ctx.measureText(cardsInDeck).width) + 7, canvas.height-cardHeight/5 + 5); - //ctx.fillRect(canvas.width-cardWidth/2-60, canvas.height/2-cardHeight/4, cardWidth/2, cardHeight/2); + ctx.fillText(deckCount, canvas.width-cardWidth/5 - (ctx.measureText(deckCount).width) + 7, canvas.height-cardHeight/5 + 5); } drawDeckOpponent(){ // Opponent's Deck @@ -96,27 +111,122 @@ class Board{ fillStyle: "#FFF" }); deckCounterSprite.draw(); - let cardsInDeck = 60; - // TODO: Center in the circle + ctx.fillStyle = '#000'; ctx.strokeStyle = '#000'; - ctx.fillText(cardsInDeck, cardWidth/2 + (ctx.measureText(cardsInDeck).width) + 10, cardHeight/1.58); + // TODO: Center in the circle + ctx.fillText(deckCountOpponent, cardWidth/2 + (ctx.measureText(deckCount).width) + 10, cardHeight/1.58); } // Naming's getting awkward here... // Draw the card - drawCardSprites(){ + drawHand(){ + // Player Hand/Cards in Hand + for (let i = 0; i < playerHand.length; i++) { + + let name = 'cardInHand_'+(i+1); + + let cardPadding = 10; + 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))); + console.log('drawHand: cardsInHand: '+(i+1)+' / '+playerHand.length); + + clickableItems['hand'][name] = new Shape({ + name: name, + x: positionX, + y: canvas.height - cardHeight/2-20, + width: cardWidth/2, + height: cardHeight/2, + fillStyle: fill + }); + playerHand[i]['clickable'] = clickableItems['hand'][name]; + playerHand[i]['clickable'].draw(); + } } - drawCardSpritesOpponent(){ + drawOpponentHand(){ + // Opponents Hand/Cards in Hand + for (let i = 0; i < opponentHand.length; i++) { + + let name = 'cardInOpponentsHand_'+(i+1); + + let cardPadding = 10; + let fill = '#'+i+i+'DD00'; + + // TODO: fix positionX, actually have some maffs + let positionX = canvas.width/2 - ((cardWidth/4 * 2) * (opponentHand.length - (i+1)) - (cardPadding * (i+1))); + console.log('drawOpponentHand: cardsInHand: '+(i+1)+' / '+opponentHand.length); + + clickableItems['opponentHand'][name] = new Shape({ + name: name, + x: positionX, + y: 20, + width: cardWidth/2, + height: cardHeight/2, + fillStyle: fill + }); + clickableItems['opponentHand'][name].draw(); + } } + + drawCards(){} + // Draw a card, traditional TCG drawACard(){ + if(playerHand.length >= maxHandSize){ + alert('Hand full '+playerHand.length+'/'+maxHandSize); + return 0; + } + playerHand.push({'name':'CardName', 'cost':1, 'atk':1, 'def':1, 'rarity': 'common', 'effect':null, 'type':'human'}); + this.drawBoard(); } drawACardOpponent(){ + if(opponentHand.length >= maxHandSize){ + alert('Hand full '+opponentHand.length+'/'+maxHandSize); + return 0; + } + this.drawBoard(); + } + + + drawCardsOnBoard(){ + // DUPER OF DRAW PLAYER HAND FOR NOW!!! + for (let i = 0; i < playerHand.length; i++) { + + let name = 'cardInHand_'+(i+1); + + let cardPadding = 10; + 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))); + console.log('drawHand: cardsInHand: '+(i+1)+' / '+playerHand.length); + + clickableItems['hand'][name] = new Shape({ + name: name, + x: positionX, + y: canvas.height - cardHeight/2-20, + width: cardWidth/2, + height: cardHeight/2, + fillStyle: fill + }); + playerHand[i]['clickable'] = clickableItems['hand'][name]; + playerHand[i]['clickable'].draw(); + } + + + } + + drawCardsOnBoardOpponent(){ + + } + + playCardToBoard(){ } } @@ -139,24 +249,68 @@ canvas.addEventListener('click', function(event) { // Want to loop clickables ideally, and call a function // that's set to them for click, hover, etc. + // 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 ( - y > clickable.y && y < clickable.y + clickable.height - && x > clickable.x && x < clickable.x + clickable.width - ) { - console.log('click Event: '+clickable.name); + if(clickableCheck(x,y,clickable)){ + board.drawACard(); } // # OPPONENT DECK clickable = clickableItems['deckOpponentSprite']; - if ( - y > clickable.y && y < clickable.y + clickable.height - && x > clickable.x && x < clickable.x + clickable.width - ) { - console.log('click Event: '+clickable.name); + if(clickableCheck(x,y,clickable)){ + board.drawACardOpponent(); } + // # PLAYER HAND + clickableHand = clickableItems['hand']; + let handLength = Object.keys(clickableHand).length; + + 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); + + // Remove from hand + playerHand.splice(index, 1); + + // This would actually fire off a socketIO doodad, that would then return + // data, and redraw. But for now (UI test) + + // Add to board + board.drawBoard(); + } + }); + + + }, false); +function clickableCheck(x,y,clickable){ + + console.log('click Event: '+clickable.name); + // Debug Stuff + let debug = false + if(debug){ + console.log(clickable.y+' <'); + console.log(y+ '<') + console.log(clickable.y+clickable.height); + } + + if( + y > clickable.y && y < clickable.y + clickable.height + && x > clickable.x && x < clickable.x + clickable.width) + { + return true; + } + + return false; + +} +