userlist now provides buzzer info

app.js

@@ -17,34 +17,39 @@ const io = new Server(server, {
 });
 
 const userMap = new Map();
-let buzzList = [];
+let buzzInfo = [];
-let playerList = [];
+let userInfo = new Object();//Each user has properties, and is stored as a property of userInfo
-let chaserList = [];
 
 const teamsList = ["Players","Chasers"]
+
 const teamsScore = [0,0]
 let currentTeamNumber = 0;
 io.on("connection", (socket) => {
   console.log("a user connected");
-  // console.log(userMap);
-  // userMap.set(socket.id, "Guest");
-  // console.log(socket.client.conn.id);
-  // console.log(socket.client.id);
-  // console.log(socket.id);
-  // console.log(userMap);
 
   socket.on("disconnect", () => {
       console.log("user disconnected");
-      console.log(userMap);
   });
 
   //initial info on connection
   socket.emit("gameStateToClient", teamsList[currentTeamNumber], teamsScore[currentTeamNumber]);
-  // socket.emit("buzzListToClient", buzzList);
   
-  socket.on("buzzerPressed", (userName) => {
+  socket.on("buzzerPressed", (newUserName, newTimeStamp) => {
-    buzzList.push(userName);
+    let firstBuzzTimeStamp = (function() { 
-    io.emit("buzzListToClient", buzzList);
+      if (buzzInfo.length == 0) {
+        return newTimeStamp
+      }
+      else {
+        return buzzInfo[0].timeStamp;
+      }
+    })();
+    buzzInfo.push({ 
+      userName: newUserName,
+      timeStamp: newTimeStamp,
+      lateTime: newTimeStamp-firstBuzzTimeStamp
+    });
+    
+    io.emit("buzzInfoToClient", buzzInfo);
   });
  
   socket.on("scoresToServer", score => {
@@ -55,33 +60,20 @@ io.on("connection", (socket) => {
       // io.emit("switchCurrentteam");
       // io.emit("dataToClient", buzzList, teamsList[currentTeamNumber], teamsScore[currentTeamNumber]);
     }
-    buzzList = [];
+    buzzInfo = [];
     io.emit("gameStateToClient", teamsList[currentTeamNumber], teamsScore[currentTeamNumber]);
-    //todo ping test
     io.emit("clearBuzzers", teamsList[currentTeamNumber]);
+    io.emit("userInfoToClient", userInfo);//resets the buzzer info 
   });
 
 
 
-  socket.on("registerUser", (userName, teamName) => {
+  socket.on("registerUser", (newUserName, newTeamName) => {
-    console.log("reg");
+    userInfo[newUserName] = {
-    if (teamName == "Players") {
+      teamName: newTeamName
-      if (!playerList.includes(userName)) {
-        playerList.push(userName);
-      }
     }
-    else if (teamName == "Chasers") {
+    io.emit("userInfoToClient", userInfo);
-      if (!chaserList.includes(userName)) {
-        chaserList.push(userName);
-      }
-    }
-    io.emit("userListsToClient", playerList, chaserList);
   });
-
-  // socket.emit("playerRoundScoreToClient");
-  // socket.emit("chaserRoundScoreToClient");
-  // socket.emit("currentTeamToClient");
-  // socket.emit("buzzListToClient");
 });
 
 // const io = new Server(server);

browserFunctions.js

@@ -5,26 +5,30 @@ function setupBuzzerOptions() {
     });
     return buzzerOptions;
 }
-function userListsToClient(playerList, chaserList) {
+
-    $("#playerList").html("");
+function userInfoToClient(userInfo) {
-    $("#chaserList").html("");
+    $("#PlayersList").html("");
-    playerList.forEach((playerName) => {
+    $("#ChasersList").html("");
-        $("#playerList").append("<li>"+playerName+"</li>");
+    for (const user in userInfo) {
-    });
+        $("#"+userInfo[user].teamName+"List").append("<li id="+user+">"+user+"<var></var></li>");
-    chaserList.forEach((chaserName) => {
+    }
-        $("#chaserList").append("<li>"+chaserName+"</li>");
-    });
 }
 
 function gameStateToClient(currentTeam, currentScore) {
-    $("#currentTeam").html(currentTeam);
+    $("#currentTeam").html(currentTeam+" turn");
     $("#currentScore").html(currentScore);
 }
 
-function buzzListToClient(buzzList, buzzerSound) {
+function buzzInfoToClient(buzzInfo, buzzerSound) {
     //play sound for first buzz in
-    if ($("#buzzList").html() == "") {
+    if (buzzInfo.length == 1) {
         buzzerSound.play();
+        $("#firstBuzz").html(buzzInfo[0].userName);
+        $("#userListPanel").find("#"+buzzInfo[0].userName).css("font-weight", 900);
+        $("#userListPanel").find("#"+buzzInfo[0].userName).find("var").html(" (BUZZ)")
+    }
+
+    for (let i=1; i < buzzInfo.length; i++) {
+        $("#userListPanel").find("#"+buzzInfo[i].userName).find("var").html(" ("+buzzInfo[i].lateTime/1000+")");
     }    
-    $("#buzzList").html(buzzList.join());
 }

pages/home.html

@@ -7,14 +7,6 @@
 		<!-- <script src="https:/socket.io/socket.io.js"></script> -->
 		<script>
 			$(document).ready(function() {
-
-				// var socket = io();
-				// const buzzerSound = new Audio('TheNumberEight.wav');
-				// // const buzzerSound = new Audio('Cat.wav');
-				// $("#buzzer").mousedown(function() {
-				// 	buzzerSound.play();
-				// 	socket.emit("buzzerPressed", userName);
-				// });
 				const okdesuka = new Audio('Okdesuka.wav');
 				$("#userName").change(function() {
 					okdesuka.play();

pages/host.html

@@ -13,9 +13,8 @@
 				let buzzerOptions = setupBuzzerOptions();
 				let buzzerSound = new Audio(buzzerOptions[0]+".wav");
 				
-
+				socket.on("userInfoToClient", (userInfo) => {
-				socket.on("userListsToClient", (playerList, chaserList) => {
+					userInfoToClient(userInfo);
-					userListsToClient(playerList, chaserList);
 				});
 
 				socket.on("gameStateToClient", (currentTeam, currentScore) => {
@@ -23,11 +22,11 @@
 				});
 
 				socket.on("clearBuzzers", () => {
-					$("#buzzList").html("");
+					$("#firstBuzz").html("");
 				});
 
-				socket.on("buzzListToClient", (buzzList) => {
+				socket.on("buzzInfoToClient", (buzzInfo) => {
-					buzzListToClient(buzzList, buzzerSound);
+					buzzInfoToClient(buzzInfo, buzzerSound);
 				});
 
 				$("#plus0").click(function() {
@@ -51,21 +50,21 @@
 		<p id="message">hi quetz :]</p>
 		<div id="interface">
 			<p id="currentTeam"></p>
+			Progress:
 			<p id="currentScore"></p>
 			<!-- <br> -->
-			(all buttons clear buzzers)
+			<p style="font-size: 15px">(all buttons clear buzzers)</p>
-			<br>
 			<button id="plus0" type="button">+0 Points</button>
 			<button id="plus1" type="button">+1 Point</button>
 			<button id="plus2" type="button">+2 Points</button>
 			<br>
-			<p id="buzzList"></p>
+			<p id="firstBuzz"></p>
 		</div>
 		<div id="userListPanel">
 			Players:
-			<ul id="playerList"></ul>
+			<ul id="PlayersList"></ul>
 			Chasers:
-			<ul id="chaserList"></ul>
+			<ul id="ChasersList"></ul>
 		</div>
 		<div id="buzzerOptions">
 		</div>

pages/play.html

@@ -11,7 +11,7 @@
 				var socket = io();
 
 
-				let startTime;//for ping check
+				let buzzInTime;//for ping check
 				let queryString = new URL(location.href);
 				let userName = queryString.searchParams.get("user");
 				$("#message").html("hi "+userName+" :]")
@@ -27,8 +27,8 @@
 
 				socket.emit("registerUser", userName, teamName);
 
-				socket.on("userListsToClient", (playerList, chaserList) => {
+				socket.on("userInfoToClient", (userInfo) => {
-					userListsToClient(playerList, chaserList);
+					userInfoToClient(userInfo);
 				});
 
 				socket.on("gameStateToClient", (currentTeam, currentScore) => {
@@ -44,15 +44,15 @@
 						buzzable = false;
 						$("#buzzer").css("opacity", "0.2");
 					}
-					$("#buzzList").html("");
+					$("#firstBuzz").html("");
 				});
 
-				socket.on("buzzListToClient", (buzzList) => {
+				socket.on("buzzInfoToClient", (buzzInfo) => {
-					buzzListToClient(buzzList, buzzerSound);
+					buzzInfoToClient(buzzInfo, buzzerSound);
-					if (buzzList.slice(-1) == userName) {
+					// if (buzzList.slice(-1) == userName) {
-						let ping =  new Date().getTime() - startTime;
+					// 	let ping =  new Date().getTime() - buzzInTime;
-						console.log("ping: "+ping);
+					// 	console.log("ping: "+ping);
-					}
+					// }
 				});
 				
 				$(document).keydown(function(e) {
@@ -69,8 +69,8 @@
 					if (buzzable) {
 						buzzable = false;
 						$("#buzzer").css("opacity", "0.2");
-						startTime = new Date().getTime();
+						buzzInTime = new Date().getTime();
-						socket.emit("buzzerPressed", userName);
+						socket.emit("buzzerPressed", userName, buzzInTime);
 					}
 				}
 
@@ -86,17 +86,18 @@
 		<p id="message"></p>
 		<div id="interface">
 			<p id="currentTeam"></p>
+			Progress:
 			<p id="currentScore"></p>
 			<br>
 			<img id="buzzer" alt="The buzzer" style="width: 200px">
 			<br>
-			<p id="buzzList"></p>
+			<p id="firstBuzz"></p>
 		</div>
 		<div id="userListPanel">
 			Players:
-			<ul id="playerList"></ul>
+			<ul id="PlayersList"></ul>
 			Chasers:
-			<ul id="chaserList"></ul>
+			<ul id="ChasersList"></ul>
 		</div>
 		<div id="buzzerOptions">
 		</div>