Add pass turn and turn identifier

Pass turn via server
Identify whose turn by making their name bold

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');
+
 	
 }
 

public/index.html

@@ -126,10 +126,15 @@
 		<script src="/js/game/components.js"></script>
 		<script src="/js/game/dataUpdate.js"></script>
 		<script src="/js/canvas/main.js"></script>
+		<script src="/js/canvas/helpers.js"></script>
 		<script src="/js/canvas/draw.js"></script>
 
 		<script src="/js/shapes.js"></script>
+
 		<script src="/js/main.js"></script>
+		<!-- Sockets likely rely on other things existing -->
+		<script src="/js/game/socket.js"></script>
+
 		<script src="/js/board.js"></script>
 		<script src="/js/helper.js"></script>
 		<script src="/js/effect.js"></script>

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'
+	);
 
 }
 

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();
+
+}
+

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();
+}
+

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);
+});