diff --git a/public/board.js b/public/board.js index 706be98..1037faf 100644 --- a/public/board.js +++ b/public/board.js @@ -8,13 +8,10 @@ const cardHeight = 120; const cards = new Image(); const back = new Image(); -// TODO: Remove once decks are migrated to ECS -let clickableItems = []; - // Counters to keep track of players, and boardElements, may be changed in future // But once game starts, will be const anyway, so shouldn't need passing let players = 2; // Player, Opponent for now, but will be up to 6 players for 5v1 boss raids? -let elements = ['deck','board','hand','mana','shield', 'grave']; +let elements = ['realDeck', 'deck','board','hand','mana','shield', 'grave']; let elementsSizes = {}; // TODO: May need to have the base XY WH of board, hand, etc. stored for loop draw // Array of items, the 'Entity Manager' as such let item = []; @@ -70,8 +67,6 @@ class Board{ // Room Name ctx.fillText(name, 0, 10); - this.drawDecks(); - this.drawPlayerNames('Nathan', 'Evil Nathan'); this.drawCardsECS(); // Atop most everything atm for testing @@ -158,10 +153,14 @@ class Board{ if(cardStatus[itemKey] == 'attacking'){border = '#C92D22';} // Set the card 'cardboard' colour based on the card colour type - let colourId = cardData[itemKey].colour; let fill = null; - if(colourId == 0){ fill = '#EEE'; } - else if(colourId == 1){ fill = '#0033EE'; } + if(boardElement[itemKey] != 'realDeck'){ // TODO: Change these to isset checks instead... + let colourId = cardData[itemKey].colour; + if(colourId == 0){ fill = '#EEE'; } + else if(colourId == 1){ fill = '#0033EE'; } + }else{ + fill = '#B0B0B0'; + } let name = itemKey; // Not needed really anymore, but keeping for now let positionX = position[itemKey][0]; @@ -181,9 +180,36 @@ class Board{ }); shape.draw(); - this.printCardImage(itemKey); + if(boardElement[itemKey] != 'realDeck'){ // TODO: isset, or differ between types + this.printCardImage(itemKey); + this.printCardDetails(itemKey); + }else{ + // TODO: For realDeck only atm, also janked in. Seperate this... + let counterx= positionX; + let countery= positionY; + let counterwidth= cardWidth*.375; + let counterheight= cardHeight*.375; + + // TODO: Center in the circle + let deckLength = getCurrentPositionAndLength('deck', player[itemKey])[1]; + let textx=positionX - (ctx.measureText(deckLength).width/2); + let texty=positionY + (ctx.measureText(deckLength).width/2); + // Draw circle for deck count to sit in + let deckCounterSprite = new Shape({ + shape: 'circle', + name: 'deckCountererer', + x: counterx, + y: countery, + width: counterwidth, + height: counterheight, + fillStyle: '#DCDCDC' + }); + deckCounterSprite.draw(); - this.printCardDetails(itemKey); + // Draw deck count text + ctx.fillStyle = '#000'; + ctx.fillText(deckLength, textx, texty); + } } @@ -344,101 +370,6 @@ class Board{ ctx.font = "10pt Arial"; } - 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; - - } - - // 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 - }); - deckCounterSprite.draw(); - - // Draw deck count text - // TODO: Center in the circle - ctx.fillStyle = '#000'; - ctx.fillText(deckLength, textx, texty); - } - - } - // boardElement, cardData?, position?, size?, cardStatus, player, listPosition ECSLoop(boardElementId = null, playerId = null, cardStatusId = null, listPositionId = null){ // So, the intent here is to normalise my nested loop I keep duping (parts of) @@ -909,6 +840,7 @@ class Board{ let board = new Board; // TODO: TEMP!! Replace soon +createDeck(); createDeckList(playerDeck, deckCount, 0); createDeckList(opponentDeck, deckCountOpponent, 1); @@ -983,12 +915,14 @@ canvas.addEventListener('click', function(event) { // Will be the new way // TODO:Maybe write this into a function? If XY WH is hit return true, and the itemKey // then it can be re-used in contextclick, hover, etc without rewrite - //console.log('X: '+x+' Y: '+y); + console.log('X: '+x+' Y: '+y); // TODO: Normalise this too for(let itemKey = 0; itemKey < item.length; itemKey++){ - if(elements[itemKey] == 'deck'){ + if(boardElement[itemKey] == 'deck'){ continue; + }else{ + //printECSData([itemKey]); } // Check the item has a size and position @@ -1007,6 +941,9 @@ canvas.addEventListener('click', function(event) { // Check item location, and trigger events based on it // TODO: Change inEvent locations, and checks elsewhere? // TODO: Make existing mechanics ECSey + case 'realDeck': + board.drawACard(playerId, 1); + break; case 'board': // player/opponentBoard not seperated, as want to have // each player able to have effects, etc. to make others attack @@ -1059,21 +996,6 @@ canvas.addEventListener('click', function(event) { } } - // Decks kept as-is for now - // TODO: boardElement realDeck, or smth and add these to the loop - // # PLAYER DECK - clickable = clickableItems['deckSprite']; - if(clickableCheck(x,y,clickable) && !inEvent){ - board.drawACard(0); - } - - // TODO: - // # OPPONENT DECK - clickable = clickableItems['deckOpponentSprite']; - if(clickableCheck(x,y,clickable) && !inEvent){ - board.drawACard(1); - } - }, false); function clickableCheck(x,y,clickable=false,itemKey=false){ @@ -1112,12 +1034,29 @@ function clickableCheck(x,y,clickable=false,itemKey=false){ } +function createDeck(){ + // Create a 'realDeck' element for each player + for(let i = 0; i < players; i++){ + item.push(itemCount); + boardElement[itemCount] = 'realDeck'; + player[itemCount] = i; + // TODO: Added these in to prevent error + // In future want to remove, and add isset checks for non-used data + cardStatus[itemCount] = null; + listPosition[itemCount] = null; + itemCount++; + } + + console.log(item.length); // createDeckList will need to continue from here, not 0 +} // TEMP: Create a deck of X different cards that can be drawn/played // for UI development, will be done on server and not shown to clients // TODO: Randomly create a deck from objects stored in file (for now) then DB // 3 of each card max, and likely one colour too for time being function createDeckList(deck, deckCount, playerId){ - for(let i = 0; i < deckCount; i++){ + let i = item.length; // Continue from the last item, don't overwrite + deckCount = deckCount + i; + for(i; i < deckCount; i++){ // Randomise colour let colour = Math.floor(Math.random() * 2); let effect = Math.floor(Math.random() * 5); @@ -1168,12 +1107,12 @@ function shuffleDeck(playerId){ let items = board.ECSLoop('deck', playerId, null, null); for(let item = 0; item < items.length; item++){ let itemKey = items[item]; - console.log('ITEM KEY: '+itemKey); - console.log('OLD LIST POSITION: '+listPosition[itemKey]); + //console.log('ITEM KEY: '+itemKey); + //console.log('OLD LIST POSITION: '+listPosition[itemKey]); listPosition[itemKey] = tempDeck[item]; - console.log('NEW LIST POSITION: '+listPosition[itemKey]); + //console.log('NEW LIST POSITION: '+listPosition[itemKey]); } console.log(getCurrentPositionAndLength('deck', playerId)[1]); @@ -1245,6 +1184,20 @@ function calculateItemSizePosition(itemKey){ let i = listPosition[itemKey]; //console.log('cardName: '+cardData[itemKey].name+' listPosition/i: '+i); + if(itemPlayer == 1 && itemElement == 'realDeck'){ + positionX = 40; + positionY = 60; + width = cardWidth*1.5; + height = cardHeight*1.5; + + } + if(itemPlayer == 0 && itemElement == 'realDeck'){ + positionX = canvas.width-cardWidth*1.5-40; + positionY = canvas.height-cardHeight*1.5-60; + width = cardWidth*1.5; + height = cardHeight*1.5; + } + if(itemPlayer == 1 && itemElement == 'board'){ positionX = canvas.width/2 - (cardWidth * (itemListLength - i) - (cardMargin * i)); positionY = cardHeight + 30; @@ -1336,12 +1289,27 @@ function calculateItemSizePosition(itemKey){ function ECSLoopTest(){ // boardElement, player, cardStatus, listPosition // TODO: ?cardData?, position?, size? - let boardElementId = 'board'; - let playerId = 0; + let boardElementId = 'realDeck'; + let playerId = null; let cardStatusId = null; let listPositionId = null; let items = board.ECSLoop(boardElementId, playerId, cardStatusId, listPositionId); - console.log('Items in boardElement: '+boardElementId+' player: '+playerId+' cardStatus: '+cardStatusId+' listPosition: '+listPositionId); + console.log(items); + printECSData(items); +} +function printECSData(items){ + for(let item = 0; item < items.length; item++){ + let itemKey = items[item]; + console.log( + 'boardElement: '+boardElement[itemKey]+"\n"+ + 'cardData: '+cardData[itemKey]+"\n"+ + 'position: '+position[itemKey]+"\n"+ + 'size: '+size[itemKey]+"\n"+ + 'cardStatus: '+cardStatus[itemKey]+"\n"+ + 'player: '+player[itemKey]+"\n"+ + 'listPosition: '+listPosition[itemKey] + ); + } }