Merge branch '1-develop-web-socket-code' into 'main'

Resolve "Develop Web Socket Code"

Closes #1

See merge request !7

app.js

@@ -14,7 +14,7 @@ let connections = [];
 let gameBoard = [
   [0, 0, 0, 0, 0, 0, 0, 0, 0],
   [0, 1, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 2, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0, 0],
 ];
@@ -22,38 +22,40 @@ let gameBoard = [
 let moveHandler = (connection, message) => {
   console.log("Received move: " + message.data);
   let movement = message.data;
+  let pid = message.pid;
+  console.log("pid: ", pid);
 
   for (var i = 0; i < gameBoard.length; i++) {
     for (var j = 0; j < gameBoard[0].length; j++) {
-      if (movement === "up" && gameBoard[i][j] === 1 && i > 0) {
+      if (movement === "up" && gameBoard[i][j] === pid && i > 0) {
         gameBoard[i][j] = 0;
-        gameBoard[i - 1][j] = 1;
+        gameBoard[i - 1][j] = pid;
         return;
       }
 
       if (
         movement === "down" &&
-        gameBoard[i][j] === 1 &&
+        gameBoard[i][j] === pid &&
         i < gameBoard.length - 1
       ) {
         gameBoard[i][j] = 0;
-        gameBoard[i + 1][j] = 1;
+        gameBoard[i + 1][j] = pid;
         return;
       }
 
-      if (movement === "left" && gameBoard[i][j] === 1 && j > 0) {
+      if (movement === "left" && gameBoard[i][j] === pid && j > 0) {
         gameBoard[i][j] = 0;
-        gameBoard[i][j - 1] = 1;
+        gameBoard[i][j - 1] = pid;
         return;
       }
 
       if (
         movement === "right" &&
-        gameBoard[i][j] === 1 &&
+        gameBoard[i][j] === pid &&
         j < gameBoard[0].length - 1
       ) {
         gameBoard[i][j] = 0;
-        gameBoard[i][j + 1] = 1;
+        gameBoard[i][j + 1] = pid;
         return;
       }
     }
@@ -64,6 +66,9 @@ sockserver.on("connection", (connection) => {
   console.log("New client connected!");
 
   connections.push(connection);
+  connection.send(
+    JSON.stringify({ type: "newUser", data: connections.length }),
+  );
 
   connection.on("close", () => {
     connections = connections.filter((curr) => curr !== connection);
@@ -77,7 +82,9 @@ sockserver.on("connection", (connection) => {
       if (message.type === "move") {
         console.log("Received move: " + message.data);
         moveHandler(connection, message);
-        connection.send(JSON.stringify({ type: "gameBoard", data: gameBoard }));
+        for (let conn of connections) {
+          conn.send(JSON.stringify({ type: "gameBoard", data: gameBoard }));
+        }
       } else if (message.type === "chat") {
         console.log("Received chat: " + message.data);
       } else if (message.type === "join") {

public/index.html

@@ -22,7 +22,7 @@
       const width = canvas.width;
       const height = canvas.height;
 
-      let moveMessage = { type: "move", data: "up" };
+      let moveMessage = { type: "move", data: "up", pid: 0 };
 
       let gameBoardHandler = (event) => {
         let ctx = canvas.getContext("2d");
@@ -60,6 +60,10 @@
         }
       };
 
+      let newUserHandler = (event) => {
+        moveMessage.pid = event.data;
+      };
+
       socket.addEventListener("open", () => {
         console.log("Connected to server");
         socket.send(JSON.stringify(joinMessage));
@@ -70,6 +74,8 @@
           let msg = JSON.parse(event.data);
           if (msg.type === "gameBoard") {
             gameBoardHandler(msg);
+          } else if (msg.type === "newUser") {
+            newUserHandler(msg);
           } else {
             const messages = document.getElementById("messages");
             const messageElement = document.createElement("div");