diff --git a/cardGen.js b/cardGen.js index 80ff642..c0690d5 100644 --- a/cardGen.js +++ b/cardGen.js @@ -417,22 +417,33 @@ function requestDeck(itemData = null){ let forPlayer = 0; // TODO: Change to actually have each player select a deck // Loop and create the deck first + + + // DECKS TODO: REDO FOR itemData.component instead of existing itemData decks.forEach((deck) => { + item.push(itemCount); // Add new item to add stuff for + itemData.component.deck[itemCount] = {'deckId':deck.deckId, 'playerId':deck.playerId, 'deckName':deck.deckName, 'deckSize': 0}; // Probably remove maxlength or change how I've just done it? + player[itemCount] = forPlayer; // TODO: Actually set to the correct player somehow + + + deckData[itemCount] = {'deckId':deck.deckId, 'playerId':deck.playerId, 'deckName':deck.deckName, 'maxLength': 0}; // Max length for listPositioning later in cardBuild boardElement[itemCount] = 'realDeck'; cardFace[itemCount] = 0; // Face down for deck - player[itemCount] = forPlayer; + + itemCount++; // Needed/good forPlayer++; // Jank/bad }) - //console.log(deckData); - //console.log(deckList); + + + // CARDS IN DECKS + // TODO: REDO FOR itemData.component instead of existing itemData // Loop each item in the deckList // Loop inside it X times where X is cardCount // Add the builtCard with same cardId as deckList item X times - // and load that deck for them. This just sets first deck to player0 to players.length deckList.forEach((deckListItem) => { @@ -441,6 +452,8 @@ function requestDeck(itemData = null){ for(key in deckData){ //Object.keys(deckData).forEach(function(key) { // Less efficient than for // Needs to check deck AND player id, as that's the primary key (together) + + // TODO: change deckData[key] to itemData.component.deck[key] allover then remove deckData if(deckData[key].deckId == deckListItem.deckId && deckData[key].playerId == deckListItem.playerId){ deckItem = key; // Key is the `item` key // Now add cards to the player that this deck belongs to @@ -468,6 +481,10 @@ function requestDeck(itemData = null){ listPosition[itemCount] = deckData[deckItem].maxLength; // TODO: better deckData[deckItem].maxLength++; + // TODO: everything like below, using the new component.XYZ + itemData.component.deck[deckItem].deckSize++; + // + // Adding to get everything sorted in one! cardStatus[itemCount] = null; cardFace[itemCount] = 0; // Face down by default (in deck) @@ -507,15 +524,25 @@ function requestDeck(itemData = null){ } } - itemCount++; // Increment item to not overwrite } + // Loop adding cards is done, so set the cardCount of deck (so plays know deck length without the cards) + // for each player + //itemData.component.cardCount.deck[forPlayer] = deckData[deckItem].maxLength; + //itemData.component.deck[itemCount].deckSize++; + // Handsize here too, why not. It's always 0 to start (on generation) + // When it comes to reconnecting the actual data will be needed + //itemData.component.cardCount.hand[forPlayer] = 0; + }); // ADD all new elements, and updated data into itemData itemData.item = item; + itemData.component.item = item; itemData.itemCount = itemCount; + itemData.component.itemCount = itemCount; + itemData.player = player; itemData.players = players; itemData.deckData = deckData; diff --git a/components.js b/components.js index c1617b7..c02513f 100644 --- a/components.js +++ b/components.js @@ -4,8 +4,8 @@ const component = { // Entity Stuff - //item : [], - //itemCount : 0, + item : [], + itemCount : 0, roomId : null, turn : 0, @@ -49,7 +49,7 @@ const component = { // loop component.shield for shield items boardElement : {}, // Replace with following - realDeck : {}, + deck : {}, inDeck : {}, hand : {}, board : {}, diff --git a/public/js/canvas/draw.js b/public/js/canvas/draw.js index f6a68cc..b47ba21 100644 --- a/public/js/canvas/draw.js +++ b/public/js/canvas/draw.js @@ -4,6 +4,9 @@ function drawGameBoard(){ ctx.clearRect(0, 0, canvas.width, canvas.height); drawPlayerNames(); + calculateDeckPositions(); + + drawEntities(); } @@ -40,3 +43,83 @@ function drawPlayerNames(){ } +// TODO: Move from draw into somewhere else +function calculateDeckPositions(){ + + for (const [key, value] of Object.entries(gameData.deck)) { + + // If the deckItem (key is the entityId), + // belongs to the player (matches this sockets player) + switch(gameData.player[key]){ + + // Set position for player deck + case gameData.playerId: + gameData.position[key] = [canvas.width-cardWidth*1.5-40, canvas.height-cardHeight*1.5-60]; // X/Y + gameData.size[key] = [cardWidth*1.5, cardHeight*1.5]; + break; + + // Same for opponent. This will need redoing when 2v2,4v1,etc. are added + case gameData.opponentId: + gameData.position[key] = [40, 60]; // X/Y + gameData.size[key] = [cardWidth*1.5, cardHeight*1.5]; + break; + + } + } + +} + +function drawEntities(){ + + // Loop position component for entities with a position + for (const [key, value] of Object.entries(gameData.position)) { + // Key is the entityId here + + // If the entity has a position AND a size, we can print it + if(gameData.size[key] !== undefined){ + + // If the entity is a deck + if(gameData.deck[key]){ + drawDeck(key); + } + + } + } + +} + +function drawDeck(entity){ + + // Draw the deck shape + let shape = new Shape({ + x: gameData.position[entity][0], + y: gameData.position[entity][1], + width: gameData.size[entity][0], + height: gameData.size[entity][1], + fillStyle: '#EEE', + strokeStyle: '#AAA', + }); + shape.draw(); + + // Draw circle for deck count to sit in + let deckCounterSprite = new Shape({ + shape: 'circle', + x: gameData.position[entity][0], + y: gameData.position[entity][1], + width: gameData.size[entity][0]*.375, + height: gameData.size[entity][1]*.375, + fillStyle: '#DCDCDC' + }); + deckCounterSprite.draw(); + + // Draw deck count text + ctx.fillStyle = '#000'; + + let deckSize=gameData.deck[entity].deckSize; + let textX=gameData.position[entity][0]-(ctx.measureText(deckSize).width/2); + let textY=gameData.position[entity][1]+(ctx.measureText(deckSize).width/2); + + printText(deckSize, textX, textY, 'center', 'middle', 'normal', 'bold', '10', 'Arial', '#000'); + +} + diff --git a/public/js/game/components.js b/public/js/game/components.js index c997d7d..b298f9b 100644 --- a/public/js/game/components.js +++ b/public/js/game/components.js @@ -1,6 +1,11 @@ // Should mostly match server's components.js // Misc. game data required let gameData = { + + item : null, + itemCount : null, + + playerId : null, opponentId : null, roomId : null, @@ -8,7 +13,15 @@ let gameData = { playerTurn : 0, players : null, + // Real components from here? + player : {}, + deck : {}, + + // Local components, not done on serverside + // calculated, etc. by client + position : {}, + size : {}, } diff --git a/public/js/game/dataUpdate.js b/public/js/game/dataUpdate.js index ec1bcfe..3cfba6b 100644 --- a/public/js/game/dataUpdate.js +++ b/public/js/game/dataUpdate.js @@ -10,6 +10,10 @@ function updateGameData(data){ updateRoomId(data.roomId); updateTurn(data.component.turn, data.component.playerTurn); + updateItems(data.component.item, data.component.itemCount); + updatePlayerComponent(data.player); + updateDecks(data.component.deck); + console.log(gameData); } @@ -32,4 +36,14 @@ function updateTurn(turn = null, playersTurn = null){ gameData.turn = turn; gameData.playerTurn = playersTurn; } +function updateItems(item = null, itemCount = null){ + gameData.item = item; + gameData.itemCount = itemCount; +} +function updateDecks(deck = null){ + gameData.deck = deck; +} +function updatePlayerComponent(player = null){ + gameData.player = player; +}