Add player/opponent Id to data and client UI

public/index.html

@@ -121,7 +121,10 @@
 
 		<script src="/socket.io/socket.io.js"></script>
 
+		<!-- Will probably minifier all the JS together when done -->
 		<script src="/js/global.js"></script>
+		<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/draw.js"></script>
 

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

public/js/cards.js

@@ -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];
-

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?
+
+}
+

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

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

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