From aaf687acb887d8972ca9f80a07ad811d61a5d4f3 Mon Sep 17 00:00:00 2001 From: Nathan Date: Thu, 31 Oct 2024 17:39:07 +0000 Subject: [PATCH] Add pass turn and turn identifier Pass turn via server Identify whose turn by making their name bold --- gameMod.js | 43 ++++++++++++++++++++++++++++++++++--- public/index.html | 5 +++++ public/js/canvas/draw.js | 29 +++++++++++++++++++++---- public/js/canvas/helpers.js | 22 +++++++++++++++++++ public/js/game/socket.js | 20 +++++++++++++++++ public/js/main.js | 14 ++++-------- 6 files changed, 116 insertions(+), 17 deletions(-) create mode 100644 public/js/canvas/helpers.js create mode 100644 public/js/game/socket.js diff --git a/gameMod.js b/gameMod.js index 6d94736..8a60805 100644 --- a/gameMod.js +++ b/gameMod.js @@ -10,11 +10,48 @@ // in the future function passTurn(roomId, playerId){ - // Check playerId (not correct atm) before doing the stuff, to verify the user + // TODO:Check playerId and roomId before doing the stuff, to verify the user // IS the user, and in the room - // Test alert so that different data/emits can be sent per-player - global.socketAlert(roomData[roomId].playerData[0].socketId, 'Pass', 'alert'); + let playerTurn = global.roomData[roomId].itemData.component.playerTurn; + //global.socketAlert(roomData[roomId].playerData[playerId].socketId, playerTurn, 'log'); + + if(playerTurn != playerId){ + global.socketAlert(roomData[roomId].playerData[playerId].socketId, 'Not your turn', 'alert'); + return false; + }; + + // Turns are 0,1,0,1 at the mo, no coinflip or re-order, etc. so this JANK is ok for now + // %2 as 2 players and Ids are 0 and 1 so it works + let newPlayerTurn = (playerTurn + 1)%2; + global.roomData[roomId].itemData.component.playerTurn = newPlayerTurn; + + // If it's back to the player that went first, the turn count increased too + if(playerTurn == 0){ + global.roomData[roomId].itemData.component.turn++; + } + + // Send turn data to each player + // Probably via the sockets in room (as could be spectators in future) + let clients = global.io.sockets.adapter.rooms.get(roomId); + for (const clientId of clients) { + + const clientSocket = global.io.sockets.sockets.get(clientId); + console.log('>> '+clientSocket.playerId+' passed turn'); + + // Send the data back + let turnData = { + 'playerTurn': newPlayerTurn, + 'turn': global.roomData[roomId].itemData.component.turn, + }; + + global.io.to(clientSocket.id).emit('responsePassTurn', turnData); + + } + + // Let the player know it's their turn via alert too (in case tabbed out) + global.socketAlert(roomData[roomId].playerData[newPlayerTurn].socketId, 'Your turn', 'alert'); + } diff --git a/public/index.html b/public/index.html index dc5aea2..dfa5155 100644 --- a/public/index.html +++ b/public/index.html @@ -126,10 +126,15 @@ + + + + + diff --git a/public/js/canvas/draw.js b/public/js/canvas/draw.js index 82f9861..f6a68cc 100644 --- a/public/js/canvas/draw.js +++ b/public/js/canvas/draw.js @@ -9,13 +9,34 @@ function drawGameBoard(){ function drawPlayerNames(){ + let playerWeight = 'normal'; + if(gameData.playerId == gameData.playerTurn){ playerWeight = 'bold'; } + let opponentWeight = 'normal'; + if(gameData.opponentId == gameData.playerTurn){ opponentWeight = 'bold'; } + // Player Name - ctx.fillText(gameData.playerId, 50, canvas.height - 70); - ctx.fillText(gameData.players[gameData.playerId][1].playerId, 50, canvas.height - 50); + printText(gameData.playerId, + 50, + canvas.height - 70, + 'left', 'alphabetic', 'normal', playerWeight, '10', 'Arial', '#000' + ); + printText(gameData.players[gameData.playerId][1].playerId, + 50, + canvas.height - 50, + 'left', 'alphabetic', 'normal', playerWeight, '10', 'Arial', '#000' + ); // Opponent Name - 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); + printText(gameData.opponentId, + canvas.width - (ctx.measureText(gameData.opponentId).width + 50), + 50, + 'left', 'alphabetic', 'normal', opponentWeight, '10', 'Arial', '#000' + ); + printText(gameData.players[gameData.opponentId][1].playerId, + canvas.width - (ctx.measureText(gameData.players[gameData.opponentId][1].playerId).width + 50), + 70, + 'left', 'alphabetic', 'normal', opponentWeight, '10', 'Arial', '#000' + ); } diff --git a/public/js/canvas/helpers.js b/public/js/canvas/helpers.js new file mode 100644 index 0000000..ac161c6 --- /dev/null +++ b/public/js/canvas/helpers.js @@ -0,0 +1,22 @@ +function printText(text, positionX, positionY, alignment = 'left', baseline = 'alphabetic', style = 'normal', weight = 'normal', size = '10', font = 'Arial', colour = '#000'){ + + // Save the styling, and content already on the canvas + ctx.save(); + + // Do the alterations and print the text + context.textAlign = alignment; + context.textBaseline = baseline; + + // Set the font styling + ctx.font = style+' '+weight+' '+size+'pt'+' '+font; + //ctx.font-style = fontStyle; // normal, italic, oblique + ctx.fillStyle = colour; + + // Actually add the text + ctx.fillText(text, positionX, positionY); + + // Restore the prior existing canvas content + ctx.restore(); + +} + diff --git a/public/js/game/socket.js b/public/js/game/socket.js new file mode 100644 index 0000000..799aaea --- /dev/null +++ b/public/js/game/socket.js @@ -0,0 +1,20 @@ +// Any socket request/responses for the actual game (when in a match) + +function requestPassTurn(){ + console.log('>> passTurn'); + socket.emit('passTurn', gameData.roomId, gameData.playerId); +} +socket.on('responsePassTurn', function (data) { + console.log('<< passTurn'); + // Set turn data for clients (bolds their name) + updateTurn(data.turn, data.playerTurn); + drawGameBoard(); +}); + +// Functions like this would be elsewhere, do client-side +// validation THEN request stuff from the server? +// This is here for now, as it's used by the button +function passTurn(){ + requestPassTurn(); +} + diff --git a/public/js/main.js b/public/js/main.js index c25aa5b..8a84e82 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -193,14 +193,8 @@ socket.on('alert', function (data) { console.log('<< alert'); alert(data.message); }); - -// GAME SERVER STUFF -// PASS TURN -function passTurn(){ - // TODO: Use itemData.player/itemData.room or whatnot here - console.log(roomId); - let playerId = prompt('PlayerId 0/1', 0); // TODO: very temp, will be playerId/arrayId - console.log('+ passTurn'); - socket.emit('passTurn', roomId, playerId); -} +socket.on('log', function (data) { + console.log('<< log'); + console.log(data.message); +});