Various UI improvements

app.js

@@ -34,6 +34,10 @@ io.on("connection", (socket) => {
   //initial info on connection
   socket.emit("gameStateToClient", teamsList[currentTeamNumber], teamsScore[currentTeamNumber]);
   
+  socket.on("pingServer", (timeStamp) => {
+    socket.emit("pingClient", timeStamp);
+  });
+
   socket.on("buzzerPressed", (newUserName, newTimeStamp) => {
     let firstBuzzTimeStamp = (function() { 
       if (buzzInfo.length == 0) {
@@ -48,8 +52,13 @@ io.on("connection", (socket) => {
       timeStamp: newTimeStamp,
       lateTime: newTimeStamp-firstBuzzTimeStamp
     });
-    
     io.emit("buzzInfoToClient", buzzInfo);
+    // function buzzInfoToclient() {
+    //   io.emit("buzzInfoToClient", buzzInfo);
+    //   console.log(buzzInfo);
+    // }
+    // setTimeout(buzzInfoToclient, 1000);
+    // console.log(buzzInfo);
   });
  
   socket.on("scoresToServer", score => {
@@ -74,6 +83,12 @@ io.on("connection", (socket) => {
     }
     io.emit("userInfoToClient", userInfo);
   });
+
+  socket.on("unregisterUsers", () => {
+    userInfo = new Object();
+    io.emit("userInfoToClient", userInfo);
+  });
+
 });
 
 // const io = new Server(server);

browserFunctions.js

@@ -7,28 +7,37 @@ function setupBuzzerOptions() {
 }
 
 function userInfoToClient(userInfo) {
-    $("#PlayersList").html("");
+    $("#PlayersList").find("ul").html("");
-    $("#ChasersList").html("");
+    $("#ChasersList").find("ul").html("");
+    console.log(userInfo);
+   
     for (const user in userInfo) {
-        $("#"+userInfo[user].teamName+"List").append("<li id="+user+">"+user+"<var></var></li>");
+        const userId = user.replaceAll(" ","_");
+        $("#"+userInfo[user].teamName+"List").find("ul").append("<li id="+userId+">"+user+"<var></var></li>");
     }
 }
 
 function gameStateToClient(currentTeam, currentScore) {
+    $("#PlayersList").css("opacity", 0.5);
+    $("#ChasersList").css("opacity", 0.5);
+    $("#"+currentTeam+"List").css("opacity", 1);
+    
     $("#currentTeam").html(currentTeam+" turn");
     $("#currentScore").html(currentScore);
 }
 
 function buzzInfoToClient(buzzInfo, buzzerSound) {
     //play sound for first buzz in
-    if (buzzInfo.length == 1) {
+    if ($("#firstBuzz").html() == "") {
         buzzerSound.play();
         $("#firstBuzz").html(buzzInfo[0].userName);
-        $("#userListPanel").find("#"+buzzInfo[0].userName).css("font-weight", 900);
+        const userId = buzzInfo[0].userName.replaceAll(" ","_");
-        $("#userListPanel").find("#"+buzzInfo[0].userName).find("var").html(" (BUZZ)")
+        $("#userListPanel").find("#"+userId).css("font-weight", 900);
+        $("#userListPanel").find("#"+userId).find("var").html(" (BUZZ)")
     }
 
     for (let i=1; i < buzzInfo.length; i++) {
-        $("#userListPanel").find("#"+buzzInfo[i].userName).find("var").html(" ("+buzzInfo[i].lateTime/1000+")");
+        const userId = buzzInfo[i].userName.replaceAll(" ","_");
+        $("#userListPanel").find("#"+userId).find("var").html(" ("+buzzInfo[i].lateTime/1000+")");
     }    
 }

pages/home.html

@@ -7,9 +7,9 @@
 		<!-- <script src="https:/socket.io/socket.io.js"></script> -->
 		<script>
 			$(document).ready(function() {
-				const okdesuka = new Audio('Okdesuka.wav');
+				const okSsuka = new Audio('OkSsuka.wav');
 				$("#userName").change(function() {
-					okdesuka.play();
+					okSsuka.play();
 					$("#playerLink").attr("href", "/play?user="+this.value+"&team=Players");
 					$("#playerLink").html("Players");
 					

pages/host.html

@@ -39,6 +39,10 @@
 					socket.emit("scoresToServer", 2);
 				});
 
+				$("#unregisterUsers").click(function() {
+					socket.emit("unregisterUsers", 2);
+				});
+
 				$("#buzzerOptions").contents().mousedown(function() {
 					buzzerSound = new Audio($(this).attr("id")+".wav");
 					buzzerSound.play();
@@ -51,20 +55,27 @@
 		<div id="interface">
 			<p id="currentTeam"></p>
 			Progress:
-			<p id="currentScore"></p>
+			<p id="currentScore"></p>			
-			<!-- <br> -->
+			<button id="plus0" type="button" style="width: 226px; height: 50px; margin: 5px;">+0 Points</button>
-			<p style="font-size: 15px">(all buttons clear buzzers)</p>
+			<br>
-			<button id="plus0" type="button">+0 Points</button>
+			<button id="plus1" type="button" style="width: 110px; height: 50px;">+1 Point</button>
-			<button id="plus1" type="button">+1 Point</button>
+			<button id="plus2" type="button" style="width: 110px; height: 50px;">+2 Points</button>
-			<button id="plus2" type="button">+2 Points</button>
+			<p style="font-size: 15px; margin: 5px;">(all points buttons clear buzzers)</p>
 			<br>
 			<p id="firstBuzz"></p>
+			<br><br><br>
+			<button id="unregisterUsers" type="button" style="height: 30px;">Remove all players</button>
+			<!-- <input type="text" id="bufferInput" placeholder="Buffer"> -->
 		</div>
 		<div id="userListPanel">
-			Players:
+			<div id="PlayersList">
-			<ul id="PlayersList"></ul>
+				Players:
-			Chasers:
+				<ul></ul>
-			<ul id="ChasersList"></ul>
+			</div>
+			<div id="ChasersList">
+				Chasers:
+				<ul></ul>
+			</div>
 		</div>
 		<div id="buzzerOptions">
 		</div>

pages/play.html

@@ -49,10 +49,11 @@
 
 				socket.on("buzzInfoToClient", (buzzInfo) => {
 					buzzInfoToClient(buzzInfo, buzzerSound);
-					// if (buzzList.slice(-1) == userName) {
+				});
-					// 	let ping =  new Date().getTime() - buzzInTime;
+				
-					// 	console.log("ping: "+ping);
+				socket.on("pingClient", (timeStamp) => {
-					// }
+					const ping = new Date().getTime() - timeStamp;
+					console.log("ping: "+ping);
 				});
 				
 				$(document).keydown(function(e) {
@@ -71,6 +72,7 @@
 						$("#buzzer").css("opacity", "0.2");
 						buzzInTime = new Date().getTime();
 						socket.emit("buzzerPressed", userName, buzzInTime);
+						socket.emit("pingServer", new Date().getTime());
 					}
 				}
 
@@ -94,10 +96,14 @@
 			<p id="firstBuzz"></p>
 		</div>
 		<div id="userListPanel">
-			Players:
+			<div id="PlayersList">
-			<ul id="PlayersList"></ul>
+				Players:
-			Chasers:
+				<ul></ul>
-			<ul id="ChasersList"></ul>
+			</div>
+			<div id="ChasersList">
+				Chasers:
+				<ul></ul>
+			</div>
 		</div>
 		<div id="buzzerOptions">
 		</div>

styles/styleMain.css

@@ -15,8 +15,31 @@ a, a:visited {
 
 #userListPanel {
     position: absolute;
-    right: 100px;
+    left: 50%;
-    top: 100px;
+    width: 1200px;
+    margin-left: -600px;
+    top: 200px;
+}
+
+#PlayersList {
+    position: absolute;
+    left: 200px;
+}
+
+#ChasersList {
+    position: absolute;
+    left: 800px;
+}
+
+ul {
+    list-style-type: square;
+    margin: 0px;
+    padding-left: 30px;
+}
+
+#buzzer {
+    position: relative;
+    z-index: 1000;
 }
 
 #buzzerOptions img {
@@ -35,3 +58,19 @@ a, a:visited {
     top: 0px;
     left: 20px;
 }
+
+@media (max-width: 576px) {
+ 
+    #userListPanel {
+        top: 80px;
+        width: 500px;
+        margin-left: -250px;
+        font-size: 15px;
+    }
+    #PlayersList {
+        left: 0px;
+    }
+    #ChasersList {
+        left: 350px;
+    }
+}