From 03e68b9a8c35badffb32607beb8ec0c32e4997f7 Mon Sep 17 00:00:00 2001 From: Nathan Date: Sun, 13 Oct 2024 13:13:15 +0100 Subject: [PATCH] Cleanup un-used code Kept unused bits that are still to be switched to ECSey --- public/board.js | 215 +++++++++--------------------------------------- 1 file changed, 38 insertions(+), 177 deletions(-) diff --git a/public/board.js b/public/board.js index 9412b4c..33afb46 100644 --- a/public/board.js +++ b/public/board.js @@ -8,18 +8,14 @@ const cardHeight = 120; const cards = new Image(); const back = new Image(); +// TODO: Remove once decks are migrated to ECS let clickableItems = []; -// Make all clickableItems sit in the same clickableItems array -// Not needed in a child, as loops will be on arrays below -clickableItems['board'] = []; -clickableItems['hand'] = []; -clickableItems['opponentHand'] = []; // 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 elementsSizes = {}; // May need to have the base XY WH of board, hand, etc. stored for loop draw +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 = []; let itemCount = 0; @@ -35,32 +31,25 @@ let player = {}; let listPosition = {}; let inEvent = null; -let playerHand = []; -let opponentHand = []; -let playerBoard = []; -let opponentBoard = []; +// TODO: Do something else ECSey, think most logic for this is about let playerDeck = []; let opponentDeck = []; -let playerShield = []; -let opponentShield = []; +// TODO: Re-implement, then remove existing code let playerMana = []; -let opponentManaZone = []; +let playerHand = []; // To disable drawing each time something changes -let drawEachEvent = true; +let drawEachEvent = true; // For disabling draw each time and only occuring where I want to test let yourPlayerId = 0; // To compare click events of your/opponents cards let viewingPlayerId = 0; // To show the board from your/opponent/teammates perspective, etc. without play permission -let deckCount = 60; -let deckCountOpponent = 60; +let deckCount = 35; +let deckCountOpponent = 35; -let cardsInOpponentsHand = 0; const maxHandSize = 4; const maxBoardSize = 3; const maxShield = 4; -let attackingCard = null; - // Gonna need lots of refactoring, and sorting class Board{ constructor(){ @@ -81,8 +70,6 @@ class Board{ // Room Name ctx.fillText(name, 0, 10); - this.drawCardsOnBoard(); - this.drawDecks(); this.drawPlayerNames('Nathan', 'Evil Nathan'); @@ -92,17 +79,11 @@ class Board{ if(this.checkGameWin == true){ this.drawWin(); } - - //this.drawInspectedCard(); } checkGameWin(){ // TODO: Change logic to ECSey, and move into main loop (for other win-cons besides direct attack) - if(false){ - if(opponentShield.length <= 0){ - return true; - } - } + //if(opponentShield.length <= 0){return true; return false; } @@ -129,9 +110,7 @@ class Board{ ctx.fillText(playerName, 50, canvas.height - 50); // Opponent's Name - if(!opponentName){ - // Just clear the name - }else{ + if(opponentName){ ctx.fillText(opponentName, canvas.width - (ctx.measureText(opponentName).width + 50), 50); } } @@ -310,9 +289,9 @@ class Board{ array[arrayKey]['clickable'].draw(); // Add image - // half circle for unit Set start angle to 0 and end angle to Math.PI. - // Ellipse for token (near full size) - // Octagon for spell + // TODO:half circle for unit Set start angle to 0 and end angle to Math.PI. + // TODO:Ellipse for token (near full size) + // TODO:Octagon for spell let cardImageContainer = new Shape({ shape: 'semi', name: 'cardImageContainer_'+name, @@ -461,13 +440,12 @@ class Board{ } addFromBoardElement(playerFrom, fromPosition, elementFrom, elementTo, toPosition=null, playerTo=null){ + // Move itemKey fromPosition in elementFrom to toPosition in elementTo + // can also switch item between players (of from and to supplied) if(playerTo == null){ playerTo = playerFrom; } - // Move itemKey fromPosition in elementFrom to toPosition in elementTo - // Can also switch item between players - // Loop all items, get the item with boardElement elementFrom and player playerFrom for(let itemKey = 0; itemKey < item.length; itemKey++){ @@ -543,56 +521,17 @@ class Board{ } // Draw a card, traditional TCG - drawACard(cardsToDraw = 1){ - for(let draw = 0; draw < cardsToDraw; draw++){ - // Check there's space in hand - // TODO: Normalise this for all element/player combos - let elementLength = getCurrentPositionAndLength('hand', 0)[1]; - if(elementLength >= maxHandSize){ - alert('Hand full '+elementLength+'/'+maxHandSize); - return 0; - } - // Move from player0, position 0 (top) of deck, to hand - this.addFromBoardElement(0, 0, 'deck', 'hand', null, null); - } - } - - drawACardOpponent(cardsToDraw = 1){ + drawACard(playerId, cardsToDraw = 1){ for(let draw = 0; draw < cardsToDraw; draw++){ // Move from player1, position 0 (top) of deck, to hand // Check there's space in hand - // TODO: Normalise this for all element/player combos - let elementLength = getCurrentPositionAndLength('hand', 1)[1]; + let elementLength = getCurrentPositionAndLength('hand', playerId)[1]; if(elementLength >= maxHandSize){ alert('Hand full '+elementLength+'/'+maxHandSize); return 0; } - this.addFromBoardElement(1, 0, 'deck', 'hand', null, null); - } - } - - - drawCardsOnBoard(){ - // DUPE OF DRAW PLAYER HAND FOR NOW!!! - for (let i = 0; i < playerBoard.length; i++) { - - let name = 'cardOnBoard_'+(i+1); - - let cardPadding = 10; - let fill = '#'+i+i+'CC00'; - - // TODO: fix positionX, actually have some maffs - let positionX = canvas.width/2 - (cardWidth * (playerBoard.length - (i+1)) - (cardPadding * (i+1))); - let positionY = canvas.height - cardHeight-30-(cardHeight); - let width = cardWidth; - let height = cardHeight; - let border = false; - - if(attackingCard !== null && playerBoard[i].name == attackingCard[0].name){ - border = '#FF0000'; - } - this.drawCard(playerBoard, i, name, positionX, positionY, width, height, fill, border); + this.addFromBoardElement(playerId, 0, 'deck', 'hand', null, null); } } @@ -678,13 +617,10 @@ class Board{ } } + startAttack(itemAttacking){ // Selects the card that will be attacking - // Stop other actions besides selecting opponent/opponent unit - // Can cancel, will do later // Rename to attack intent? - startAttack(itemAttacking){ - // Can probably combine attacking/inspect, and set another array element to 'attacking', 'inspecting', etc. - + // Do error/legal checks here if(cardStatus[itemAttacking] == 'tapped'){ alert('Cannot attack, as tapped'); @@ -693,13 +629,14 @@ class Board{ // Set event inEvent = ['attack', itemAttacking]; // Set the status of card to attacking for drawing. - // In future this may be what's used for check (or other in case you can attack with multiple units at once) + // TODO:In future this may be what's used for check (or other in case you can attack with multiple units at once) cardStatus[itemAttacking] = 'attacking'; this.drawBoard(); } // Do the attack makeAttack(itemDefending, itemAttacking = null){ + // TODO: Check if mana owner has any 'block', etc. first, then prevent if so // If itemAttacking not defined, use the item from inEvent if(itemAttacking == null){ @@ -789,24 +726,6 @@ class Board{ // Move from player, position 0 (top) of deck, to hand (next available position) this.addFromBoardElement(playerId, fromPosition, fromElement, 'shield', null, null); } - - if(false){ - for(let shieldNo = 0; shieldNo < shieldsToPlay; shieldNo++){ - if(playerShield.length >= maxShield){ - alert('Shield zone full '+playerShield.length+'/'+maxShield); - return 0; - } - - // Random card from deck, remove from deck, add to hand - let cardToDraw = Math.floor(Math.random() * deckCount); - let cardDrawn = playerDeck[cardToDraw]; - // Remove from deck - playerDeck.splice(cardToDraw, 1); - // Add to shield zone - playerShield.push(cardDrawn); - this.drawBoard(); - } - } } playMana(fromPosition, fromElement, cardsToPlay = 1){ @@ -814,23 +733,6 @@ class Board{ // TODO: FOR ALL addFromBoardElements, if 'fromPosition' not passed get the // fromPosition and boardElementFrom from the itemId (will need to change to pass this) this.addFromBoardElement(0, fromPosition, fromElement, 'mana', null, null); - - if(false){ - let manaCard = null; - if(fromDeck){ - let cardToDraw = Math.floor(Math.random() * deckCount); - manaCard = playerDeck[cardToDraw]; - // Remove from deck - playerDeck.splice(cardToDraw, 1); - }else{ - manaCard = playerHand[index]; - playerHand.splice(index, 1); - } - - playerMana.push(manaCard); - - this.drawBoard(); - } } // HELPER METHODS, to simplify code-base for me in the future @@ -858,27 +760,19 @@ class Board{ } } -// TEMP!! +// TODO: TEMP!! Replace soon createDeckList(playerDeck, deckCount, 0); createDeckList(opponentDeck, deckCountOpponent, 1); // Run board commands here for testing let board = new Board; -//board.initBoard(); -//shuffleDeck(0); -//shuffleDeck(1); - -//board.drawBoard(); -// Play 4 shield from position 0 (top) of deck, for player 0 (you) -// TODO:May want to change this to play from opponents deck, or hand, etc. for future -// That will likely be a while though I assume? -board.playShield(0, 'deck', 0, 4); -board.playShield(0, 'deck', 1, 4); -//board.playShieldOpponent(4); +// Play 4 shield from top (0) of each players deck +for(let currentPlayer = 0; currentPlayer <= players-1; currentPlayer++){ + board.playShield(0, 'deck', currentPlayer, 4); +} board.drawBoard(true); -//board.drawACard(3); // Right Click, Rightclick, rightclick, right click @@ -901,7 +795,6 @@ canvas.addEventListener('contextmenu', function(event) { // Only want to happen once (for now) // Maybe in future add to hand would trigger another event if there's an effect? - console.log(boardElement[itemKey]); // Check the location of element switch(boardElement[itemKey]){ // Check item location, and trigger events based on it @@ -911,7 +804,6 @@ canvas.addEventListener('contextmenu', function(event) { // If there's an attack event, target other cards // If there is an event, the event is attack event, and the item currently loop // is the same one as currently in the event - console.log(inEvent); if(inEvent && inEvent[0] == 'attack' && itemKey == inEvent[1]){ board.cancelAttackFor(itemKey); } @@ -936,30 +828,6 @@ canvas.addEventListener('contextmenu', function(event) { // Left Click, Leftclick, leftclick, left click 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 - - // If there is a 'specialEvent', and specialEvent is set to inspect - // TODO: Inspect event - if(false){ - if(inEvent && inEvent[0] == 'inspect'){ - clickable = inspectCard[0][inspectCard[1]].clickable; - - if(clickableCheck(x,y,clickable)){ - console.log('clicked inspect card'); - - }else{ - console.log('not inspected card'); - // Stop inspecting card if player clicks off it - inspectCard = null; - board.drawBoard(); - } - } - } var x = event.pageX - canvasLeft, y = event.pageY - canvasTop; @@ -997,12 +865,8 @@ canvas.addEventListener('click', function(event) { // each player able to have effects, etc. to make others attack // etc. - // playerBoard - // Can attack - console.log(inEvent); - console.log(cardStatus[itemKey] != 'tapped'); // yourPlayerId in for now to prevent using opponents card - // however in future the cards may be used to attack, there will be another + // TODO:the cards may be used to attack, there will be another // check like 'canUseOpponentsBoard' or something if(!inEvent && cardStatus[itemKey] != 'tapped' && playerId == yourPlayerId){ board.startAttack(itemKey); @@ -1017,7 +881,7 @@ canvas.addEventListener('click', function(event) { break; } - // If no event, and clicked an OPPONENT CARD (for now) + // If no event, and clicked an TODO:OPPONENT CARD (for now) // Wants to be on option on r/l click maybe // left click inspects then you choose play from there? // inspect the card (zoom in on it) @@ -1032,13 +896,10 @@ canvas.addEventListener('click', function(event) { break; case 'hand': - // Can be played - // Play 1 item in listPosition, from hand, to board (case from leftmost, etc) - // from playerId, to playerId + // TODO: Ensure it can be played board.playCardToBoard(listPosition[itemKey], 'hand', 'board', playerId, playerId, 1); break; case 'shield': - // TODO: // If you have an attack, and click opponent shield, // destroy (unless they can block, etc.) if(inEvent && inEvent[0] == 'attack' && inEvent[1] != itemKey){ @@ -1056,14 +917,14 @@ canvas.addEventListener('click', function(event) { // # PLAYER DECK clickable = clickableItems['deckSprite']; if(clickableCheck(x,y,clickable) && !inEvent){ - board.drawACard(); + board.drawACard(0); } // TODO: // # OPPONENT DECK clickable = clickableItems['deckOpponentSprite']; if(clickableCheck(x,y,clickable) && !inEvent){ - board.drawACardOpponent(); + board.drawACard(1); } }, false); @@ -1106,6 +967,8 @@ function clickableCheck(x,y,clickable=false,itemKey=false){ // 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++){ // Randomise colour @@ -1113,7 +976,6 @@ function createDeckList(deck, deckCount, playerId){ let effect = Math.floor(Math.random() * 5); if(effect == 0){ effect = 'effect here'; } else{ effect = null } - item.push(itemCount); boardElement[itemCount] = 'deck'; cardData[itemCount] = { @@ -1134,6 +996,8 @@ function createDeckList(deck, deckCount, playerId){ itemCount++; } + + //TODO: shuffleDeck(0); Make shuffleDeck work, and call after created the deck (for now) } function shuffleDeck(playerId){ @@ -1186,7 +1050,6 @@ function untapZone(elementFrom, playerFrom){ board.drawBoard(); } function untapAllZones(currentPlayer = null){ - console.log('ut zone'); if(currentPlayer === null){ currentPlayer = 0; } @@ -1264,7 +1127,7 @@ function calculateItemSizePosition(itemKey){ height = cardHeight; } if(itemPlayer == 1 && itemElement == 'mana'){ - + // TODO: Opponent Mana } if(itemPlayer == 1 && itemElement == 'shield'){ let fromX = canvas.width-60; @@ -1324,7 +1187,7 @@ function calculateItemSizePosition(itemKey){ } // Inspected Card - // May need to make a new itemKey for inspectedCard to loop through + // TODO: May need to make a new itemKey for inspectedCard to loop through if(inEvent && inEvent[0] == 'inspect' && inEvent[1] == itemKey){ positionX = canvas.width/2 - cardWidth; positionY = canvas.height/2 - cardHeight; @@ -1332,8 +1195,6 @@ function calculateItemSizePosition(itemKey){ height = cardHeight*2; } - - //console.log('cardName: '+cardData[itemKey].name+', i/listPosition: '+i+', listPosition Length: '+itemListLength); // Set the size/position of the item