From 993f68636bda3d9ab1f82cc8edcaabaf049184bb Mon Sep 17 00:00:00 2001 From: Nathan Date: Thu, 31 Oct 2024 15:54:27 +0000 Subject: [PATCH] Add player/opponent Id to data and client UI --- public/index.html | 3 +++ public/js/canvas/draw.js | 6 ++++-- public/js/cards.js | 21 --------------------- public/js/game/components.js | 14 ++++++++++++++ public/js/game/dataUpdate.js | 35 +++++++++++++++++++++++++++++++++++ public/js/main.js | 3 ++- rooms.js | 16 ++++++++++++++-- 7 files changed, 72 insertions(+), 26 deletions(-) delete mode 100644 public/js/cards.js create mode 100644 public/js/game/components.js create mode 100644 public/js/game/dataUpdate.js diff --git a/public/index.html b/public/index.html index 8c86aa5..dc5aea2 100644 --- a/public/index.html +++ b/public/index.html @@ -121,7 +121,10 @@ + + + diff --git a/public/js/canvas/draw.js b/public/js/canvas/draw.js index e3cb713..82f9861 100644 --- a/public/js/canvas/draw.js +++ b/public/js/canvas/draw.js @@ -10,10 +10,12 @@ function drawGameBoard(){ function drawPlayerNames(){ // Player Name - //ctx.fillText(playerName, 50, canvas.height - 50); + ctx.fillText(gameData.playerId, 50, canvas.height - 70); + ctx.fillText(gameData.players[gameData.playerId][1].playerId, 50, canvas.height - 50); // Opponent Name - //ctx.fillText(opponentName, canvas.width - (ctx.measureText(opponentName).width + 50), 50); + ctx.fillText(gameData.opponentId, canvas.width - (ctx.measureText(gameData.opponentId).width + 50), 50); + ctx.fillText(gameData.players[gameData.opponentId][1].playerId, canvas.width - (ctx.measureText(gameData.players[gameData.opponentId][1].playerId).width + 50), 70); } diff --git a/public/js/cards.js b/public/js/cards.js deleted file mode 100644 index f6f6092..0000000 --- a/public/js/cards.js +++ /dev/null @@ -1,21 +0,0 @@ -// 0,1,2 = white,blue,red (for now) -// TODO: Use a DB in future, this is just for testing -let cardArray = -[ - { id: 1, name: 'Red1', colour: 2, cost: 1, type: 'Goblin', atk: 500, rarity: 'common', effect:'[[Sneak]] 500'}, - { id: 2, name: 'Red2', colour: 2, cost: 1, type: 'Goblin', atk: 1500, rarity: 'common', effect:'Cannot attack direct'}, - { id: 3, name: 'Red3', colour: 2, cost: 2, type: 'Goblin', atk: 1000, rarity: 'common', effect:'[[DEATH]] deal 1500 extra to killer'}, - { id: 4, name: 'Red4', colour: 2, cost: 2, type: 'Goblin', atk: 2000, rarity: 'common', effect:null}, - { id: 5, name: 'White1', colour: 0, cost: 1, type: 'Weapon', atk: 500, rarity: 'common', effect:'[[Equip]]'}, - { id: 6, name: 'White2', colour: 0, cost: 2, type: 'Human', atk: 1500, rarity: 'common', effect:null}, - { id: 7, name: 'White3', colour: 0, cost: 2, type: 'Human', atk: 2000, rarity: 'common', effect:'[[TAUNT]]'}, - { id: 8, name: 'White5', colour: 0, cost: 2, type: 'Human', atk: 1500, rarity: 'common', effect:'[[REACH]]'}, - { id: 9, name: 'Blue1', colour: 1, cost: 2, type: 'Spirit', atk: 1000, rarity: 'common', effect:null}, - { id: 10, name: 'Blue3', colour: 1, cost: 2, type: 'Spirit', atk: 1000, rarity: 'common', effect:'[[DRAW]] 1'}, - { id: 11, name: 'Blue4', colour: 1, cost: 2, type: 'Spirit', atk: 1500, rarity: 'common', effect:null}, - { id: 12, name: 'Blue5', colour: 1, cost: 3, type: 'Spirit', atk: 2500, rarity: 'common', effect:'[[FLIGHT]]'} -] - -let deckListPlayer = [5,5,5,5,6,6,6,6,7,7,7,7,8,8,8,8,9,9,9,9,10,10,10,10]; -let deckListOpponent = [1,1,1,1,2,2,3,3,4,4,7,7,7,7,5,5,5,3,3,8,8]; - diff --git a/public/js/game/components.js b/public/js/game/components.js new file mode 100644 index 0000000..c997d7d --- /dev/null +++ b/public/js/game/components.js @@ -0,0 +1,14 @@ +// Should mostly match server's components.js +// Misc. game data required +let gameData = { + playerId : null, + opponentId : null, + roomId : null, + turn : 0, + playerTurn : 0, + players : null, + + // Real components from here? + +} + diff --git a/public/js/game/dataUpdate.js b/public/js/game/dataUpdate.js new file mode 100644 index 0000000..ec1bcfe --- /dev/null +++ b/public/js/game/dataUpdate.js @@ -0,0 +1,35 @@ +// To set the server data to related client data + +// Update all the relevent game data from the server's data response +function updateGameData(data){ + console.log(data); + + updatePlayers(data.players); + updatePlayerId(data.playerId); + updateOpponentId(data.opponentId); + updateRoomId(data.roomId); + updateTurn(data.component.turn, data.component.playerTurn); + + console.log(gameData); +} + +// Individual or minor updates +// This will ideally be how each game function updates the data +// e.g. drawACard() would update the hand, deck, cardData, effects? +function updatePlayers(players = null){ + gameData.players = players; +} +function updatePlayerId(playerId = null){ + gameData.playerId = playerId; +} +function updateOpponentId(opponentId = null){ + gameData.opponentId = opponentId; +} +function updateRoomId(roomId = null){ + gameData.roomId = roomId; +} +function updateTurn(turn = null, playersTurn = null){ + gameData.turn = turn; + gameData.playerTurn = playersTurn; +} + diff --git a/public/js/main.js b/public/js/main.js index a2a3dab..c25aa5b 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -179,11 +179,12 @@ socket.on('responseStartGame', function (data) { alert('Err with responseStartGame. '+data.message); } // Pass only the data to loadBoard - loadBoard(data.message); + //loadBoard(data.message); // THE OLD/WORKING BOARD. Uncomment (and comment below) if needed for compare // Draw the new/simplified board over the top of the working board // TEMP until the new board is working as the old board did. console.log('EXISTING BOARD STILL EXISTS! JUST NEED TO COMMENT drawGameBoard() in main.js'); + updateGameData(data.message); drawGameBoard(); }); diff --git a/rooms.js b/rooms.js index 7f3bfa5..07179b6 100644 --- a/rooms.js +++ b/rooms.js @@ -203,14 +203,26 @@ async function startGame(roomId){ response.message = itemData; // Each player then gets sent the roomGeneration stuff + // TODO:They should recieve different data based on what they can see/interact for (const clientId of clients) { const clientSocket = global.io.sockets.sockets.get(clientId); console.log('>> responseStartGame: '+clientSocket.playerId); // TODO: TESTING STUFF, REMOVE WHEN SORTED - let message = 'You are player: '+roomData[roomId].playerOrder[clientSocket.playerId]; - global.socketAlert(clientSocket.id, message, 'alert'); + let playerIdTemp = roomData[roomId].playerOrder[clientSocket.playerId]; + //let message = 'You are player: '+playerIdTemp; + //global.socketAlert(clientSocket.id, message, 'alert'); + + // This is the data being sent, add each individual players Id/turnorder/whatever I call it + response.message['playerId'] = playerIdTemp; + + // JANK TODO: better this. + // Ids are 0,1. Max players is 2, so can use modulo for now (while it's only ever 2 players) + // to set the opponent stuff. With the data passed this can probably be done better, but not sure + // at the mo. so to get progress, we're janking it in + // player 1+1 = 2 %= 0, player 0+1 = 1 %= 1 + response.message['opponentId'] = (playerIdTemp+1)%maxPlayersPerRoom; // Emit the itemData to client socket (TODO: only emit what each player should see/recieve) global.io.to(clientSocket.id).emit('responseStartGame', response);