userlist now provides buzzer info

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("userListsToClient", (playerList, chaserList) => {
-					userListsToClient(playerList, chaserList);
+				socket.on("userInfoToClient", (userInfo) => {
+					userInfoToClient(userInfo);
 				});
 
 				socket.on("gameStateToClient", (currentTeam, currentScore) => {
@@ -23,11 +22,11 @@
 				});
 
 				socket.on("clearBuzzers", () => {
-					$("#buzzList").html("");
+					$("#firstBuzz").html("");
 				});
 
-				socket.on("buzzListToClient", (buzzList) => {
-					buzzListToClient(buzzList, buzzerSound);
+				socket.on("buzzInfoToClient", (buzzInfo) => {
+					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)
-			<br>
+			<p style="font-size: 15px">(all buttons clear buzzers)</p>
 			<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) => {
-					userListsToClient(playerList, chaserList);
+				socket.on("userInfoToClient", (userInfo) => {
+					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) => {
-					buzzListToClient(buzzList, buzzerSound);
-					if (buzzList.slice(-1) == userName) {
-						let ping =  new Date().getTime() - startTime;
-						console.log("ping: "+ping);
-					}
+				socket.on("buzzInfoToClient", (buzzInfo) => {
+					buzzInfoToClient(buzzInfo, buzzerSound);
+					// if (buzzList.slice(-1) == userName) {
+					// 	let ping =  new Date().getTime() - buzzInTime;
+					// 	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();
-						socket.emit("buzzerPressed", userName);
+						buzzInTime = new Date().getTime();
+						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>