re formatting code + Adding additional comments

public/js/main.js

@@ -4,18 +4,27 @@ const addTeamOne = document.getElementById("add-team-one");
 const addTeamTwo = document.getElementById("add-team-two");
 const addReferee = document.getElementById("add-referee");
 const addWaiting = document.getElementById("add-waiting");
+
+const { outputMessage, outputNames } = require("./utils.js");
+
 //Get username and room from URL
 const { username, roomId } = Qs.parse(location.search, {
   ignoreQueryPrefix: true,
 });
+//Defining the socket
+const socket = io();
 
+//Adding the room id to be able to copy it
 const p = document.createElement("p");
 p.innerHTML = `${roomId}`;
 document.getElementById("room-name").appendChild(p);
 
-const socket = io();
-//join chatroom
+// --------------------------------------------------------------------------------------
+// Dealing with sockets
+
+//join chatroom event, which must happen when you enter any room
 socket.emit("joinRoom", { username, roomId });
+//Informing that this user will start in the waiting list
 socket.emit("updatePlayer", {
   username: username,
   roomId: roomId,
@@ -24,96 +33,76 @@ socket.emit("updatePlayer", {
 
 // Receiving the message from the server
 socket.on("message", (message) => {
+  //displaying the message
   outputMessage(message);
   //every time we get a message we want to scroll down
   chatMessages.scrollTop = chatMessages.scrollHeight;
 });
-
+// Case of receiving an updated version of waited users
 socket.on("waitedUsers", (users) => {
   outputNames(users, "waiting-users");
 });
-
+// Case of receiving an updated version of team one
 socket.on("teamOne", (username) => {
   outputNames(username, "team-one");
 });
-
+// Case of receiving an updated version of team two
 socket.on("teamTwo", (username) => {
   outputNames(username, "team-two");
 });
-
+// Case of receiving an updated version of referee
 socket.on("referee", (username) => {
   outputNames(username, "referee");
 });
 
+// --------------------------------------------------------------------------------------
+// Event Listeners
 
-//Adding a message
-document.addEventListener("submit", (e) => {
-  e.preventDefault();
-  //Getting the text of the message
-  const msg = {
-    username: username,
-  };
-  msg.text = e.target.elements.msg.value;
-  //Sending the msg to the server
-  socket.emit("chatMessage", msg);
-  //Everytime we get a message we want to clear the input field
-  e.target.elements.msg.value = "";
-  e.target.elements.msg.focus();
-});
-
-//Adding the message to the client side
-function outputMessage(message) {
-  const div = document.createElement("div");
-  div.classList.add("message");
-  div.innerHTML = `
-      <div class="message">
-        <p class="meta">${message.username}<span> ${message.time}</span></p>
-        <p class="text">${message.text}</p>
-      </div>`;
-  document.querySelector(".chat-messages").appendChild(div);
-}
-
-//Adding the name of users in waiting names
-function outputNames(users, listName) {
-  const element = document.getElementById(listName);
-  while (element.firstChild) {
-    element.removeChild(element.firstChild);
-  }
-  for (let i = 0; i < users.length; i++) {
-    const li = document.createElement("li");
-    li.innerHTML = `${users[i].username}`;
-    document.getElementById(listName).appendChild(li);
-  }
-}
-
-addTeamOne.addEventListener("click", function() {
+// Event of transforming a player from any type to team one
+addTeamOne.addEventListener("click", function () {
   socket.emit("updatePlayer", {
     username: username,
     roomId: roomId,
     type: "TEAMONE",
   });
 });
-
-addTeamTwo.addEventListener("click", function() {
+// Event of transforming a player from any type to team two
+addTeamTwo.addEventListener("click", function () {
   socket.emit("updatePlayer", {
     username: username,
     roomId: roomId,
     type: "TEAMTWO",
   });
 });
-
-addReferee.addEventListener("click", function() {
+// Event of transforming a player from any type to referee
+addReferee.addEventListener("click", function () {
   socket.emit("updatePlayer", {
     username: username,
     roomId: roomId,
     type: "REFEREE",
   });
 });
-
-addWaiting.addEventListener("click", function() {
+// Event of transforming a player from any type to waiting
+addWaiting.addEventListener("click", function () {
   socket.emit("updatePlayer", {
     username: username,
     roomId: roomId,
     type: "WAITING",
   });
 });
+
+// Event of Adding a message
+document.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const msg = {
+    username: username,
+    roomId: roomId,
+  };
+  // Getting the text of the message
+  msg.text = e.target.elements.msg.value;
+  // Sending the msg to the server
+  socket.emit("chatMessage", msg);
+  // Every time we get a message we want to clear the input field, and focus on it
+  e.target.elements.msg.value = "";
+  e.target.elements.msg.focus();
+});

public/js/utils.js

@@ -0,0 +1,32 @@
+// --------------------------------------------------------------------------------------
+// Helper Functions
+
+// Adding the message to the client side
+const outputMessage = function (message) {
+  const div = document.createElement("div");
+  div.classList.add("message");
+  div.innerHTML = `
+        <div class="message">
+          <p class="meta">${message.username}<span> ${message.time}</span></p>
+          <p class="text">${message.text}</p>
+        </div>`;
+  document.querySelector(".chat-messages").appendChild(div);
+};
+
+// Adding the name of users in any field
+const outputNames = function (users, listName) {
+  const element = document.getElementById(listName);
+  while (element.firstChild) {
+    element.removeChild(element.firstChild);
+  }
+  for (let i = 0; i < users.length; i++) {
+    const li = document.createElement("li");
+    li.innerHTML = `${users[i].username}`;
+    document.getElementById(listName).appendChild(li);
+  }
+};
+
+module.exports = {
+  outputMessage,
+  outputNames,
+};

server.js

@@ -39,7 +39,7 @@ io.on("connection", (socket) => {
 
   // Getting the chat message
   socket.on("chatMessage", (msg) => {
-    io.to(user.roomId).emit("message", formatMessage(msg));
+    io.to(msg.roomId).emit("message", formatMessage(msg));
   });
 });
 

services/users.js

@@ -1,7 +1,6 @@
 const {
   getCurrUser,
   userJoin,
-  leaveChat,
   getWaitingUsers,
   getTeamOneUsers,
   getReferee,

utils/users.js

@@ -64,7 +64,6 @@ async function updateUser(username, roomId, type) {
 module.exports = {
   userJoin,
   getCurrUser,
-  leaveChat,
   getReferee,
   getTeamOneUsers,
   getTeamTwoUsers,