Buzzers now play the selection of each user, buzzers also displayed on user lists. Also added some new buzzers

pages/host.html

@@ -10,9 +10,6 @@
 		<script>
 			$(document).ready(function() {
 				var socket = io();
-
-				let buzzerOptions = setupBuzzerOptions();
-				let buzzerSound = new Audio(buzzerOptions[0]+".wav");
 				
 				socket.on("userInfoToClient", (userInfo) => {
 					userInfoToClient(userInfo);
@@ -27,7 +24,7 @@
 				});
 
 				socket.on("buzzInfoToClient", (buzzInfo) => {
-					buzzInfoToClient(buzzInfo, buzzerSound);
+					buzzInfoToClient(buzzInfo);
 				});
 
 				$("#plus0").click(function() {
@@ -43,10 +40,6 @@
 				$("#unregisterUsers").click(function() {
 					socket.emit("unregisterUsers", 2);
 				});
-
-				$("#buzzerOptions").contents().mousedown(function() {
-					buzzerSound = selectBuzzer($(this).attr("id"));
-				});
 			});
 		</script>
 	</head>
@@ -77,7 +70,5 @@
 				<ul></ul>
 			</div>
 		</div>
-		<div id="buzzerOptions">
-		</div>
 	</body>
 </html>

pages/play.html

@@ -11,22 +11,22 @@
 		<script>
 			$(document).ready(function() {
 				var socket = io();
-
-
 				let buzzInTime;//for ping check
 				let queryString = new URL(location.href);
 				let userName = queryString.searchParams.get("user");
 				$("#message").html("hi "+userName+" :]")
 				let teamName = queryString.searchParams.get("team");
 
-
-				let buzzerOptions = setupBuzzerOptions();
-				let buzzerSound = new Audio(buzzerOptions[0]+".wav");
+				let buzzerOptions = ["Kirbeep","MPYosh","MPDog","MPCat","EBWow","Ooh","MarioBoing","TheNumberEight","EBAttack1","SaturnHonk","PuffRest","AAHoldIt","EmergencyMeeting","Mystery"];
+				buzzerOptions.forEach((buzzerId) => {
+					$("#buzzerOptions").append("<img id='"+buzzerId+"' src='"+buzzerId+".png'>");
+				});
+				// let buzzerSound = new Audio(buzzerOptions[0]+".wav");
 				$("#buzzer").attr("src", buzzerOptions[0]+".png" );
 				$("#buzzer").css("opacity", "0.2");
 				let buzzable = false;
 
-				socket.emit("registerUser", userName, teamName);
+				socket.emit("updateUserInfo", userName, teamName, "Kirbeep");//initial user registration
 
 				socket.on("userInfoToClient", (userInfo) => {
 					userInfoToClient(userInfo);
@@ -49,7 +49,7 @@
 				});
 
 				socket.on("buzzInfoToClient", (buzzInfo) => {
-					buzzInfoToClient(buzzInfo, buzzerSound);
+					buzzInfoToClient(buzzInfo);
 				});
 				
 				socket.on("pingClient", (timeStamp) => {
@@ -78,7 +78,14 @@
 				}
 
 				$("#buzzerOptions").contents().mousedown(function() {
-					buzzerSound = selectBuzzer($(this).attr("id"));
+					buzzerId = $(this).attr("id")
+					if (buzzerId == "Mystery") {
+						buzzerId = buzzerOptions[Math.floor(Math.random()*(buzzerOptions.length-1))];
+					}
+					socket.emit("updateUserInfo", userName, teamName, buzzerId);
+					buzzerSound = new Audio(buzzerId+".wav");
+					$("#buzzer").attr("src", buzzerId+".png" );
+					buzzerSound.play();
 				});
 			});
 		</script>
@@ -90,7 +97,7 @@
 			Progress:
 			<p id="currentScore"></p>
 			<br>
-			<img id="buzzer" alt="The buzzer" style="width: 200px">
+			<img id="buzzer" alt="The buzzer">
 			<br>
 			<p id="firstBuzz"></p>
 		</div>