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

app.js

@@ -1,14 +1,11 @@
 
 const http = require('http');
-// const https = require('https');
 const express = require('express');
 const app = express();
 const fs = require('fs')
 const { Server } = require("socket.io");
 
 var options = {
-  // key: fs.readFileSync('key.pem'),
-  // cert: fs.readFileSync('cert.pem')
 };
 
 const server = http.createServer(options, app);
@@ -77,9 +74,10 @@ io.on("connection", (socket) => {
 
 
 
-  socket.on("registerUser", (newUserName, newTeamName) => {
-    userInfo[newUserName] = {
-      teamName: newTeamName
+  socket.on("updateUserInfo", (userName, teamName, buzzerId) => {
+    userInfo[userName] = {
+      teamName: teamName,
+      buzzerId: buzzerId
     }
     io.emit("userInfoToClient", userInfo);
   });
@@ -112,7 +110,7 @@ app.get("/browserFunctions.js", (request, response) => {
 });
 
 //all files in these folders can be accessed with a GET request of the filename
-let assetFolders = ["styles","pages","images","audio","fonts"];
+let assetFolders = ["styles","pages","images","images/buzzers","audio","fonts"];
 assetFolders.forEach((folderName) => {
   let folderContents = fs.readdirSync(folderName);
   folderContents.forEach((fileName) => {

browserFunctions.js

@@ -1,18 +1,18 @@
-let buzzerOptions = ["Kirbeep","MPYosh","MPDog","MPCat","Wow","Ooh","MarioBoing","TheNumberEight","Mystery"];
-function setupBuzzerOptions() {
+
+// function setupBuzzerOptions() {
     
-    buzzerOptions.forEach((buzzerName) => {
-        $("#buzzerOptions").append("<img id='"+buzzerName+"' src='"+buzzerName+".png'>");
-    });
-    return buzzerOptions;
-}
+//     buzzerOptions.forEach((buzzerName) => {
+//         $("#buzzerOptions").append("<img id='"+buzzerName+"' src='"+buzzerName+".png'>");
+//     });
+//     return buzzerOptions;
+// }
 
 function userInfoToClient(userInfo) {
     $("#PlayersList").find("ul").html("");
     $("#ChasersList").find("ul").html("");
     for (const user in userInfo) {
         const userId = user.replaceAll(" ","_");
-        $("#"+userInfo[user].teamName+"List").find("ul").append("<li id="+userId+">"+user+"<var></var></li>");
+        $("#"+userInfo[user].teamName+"List").find("ul").append("<li id="+userId+">"+"<img src="+userInfo[user].buzzerId+".png data-buzzerId="+userInfo[user].buzzerId+" class=userListBuzzerSelections>"+user+"<var></var></li>");
     }
 }
 
@@ -25,14 +25,16 @@ function gameStateToClient(currentTeam, currentScore) {
     $("#currentScore").html(currentScore);
 }
 
-function buzzInfoToClient(buzzInfo, buzzerSound) {
+function buzzInfoToClient(buzzInfo) {
     //play sound for first buzz in
     if ($("#firstBuzz").html() == "") {
-        buzzerSound.play();
         $("#firstBuzz").html(buzzInfo[0].userName);
         const userId = buzzInfo[0].userName.replaceAll(" ","_");
-        $("#userListPanel").find("#"+userId).css("font-weight", 900);
-        $("#userListPanel").find("#"+userId).find("var").html(" (BUZZ)")
+        // $("#userListPanel").find("#"+userId).css("font-weight", 900);
+        $("#userListPanel").find("#"+userId).find("var").html(" (BUZZ)");
+        let buzzerId = $("#userListPanel").find("#"+userId).find("img").attr("data-buzzerId")
+        let buzzerSound = new Audio(buzzerId+".wav");
+        buzzerSound.play();
     }
 
     for (let i=1; i < buzzInfo.length; i++) {
@@ -43,9 +45,9 @@ function buzzInfoToClient(buzzInfo, buzzerSound) {
 
 function selectBuzzer(buzzerId) {
     if (buzzerId == "Mystery") {
-        buzzerId = buzzerOptions[Math.floor(Math.random()*8)];
+        buzzerId = buzzerOptions[Math.floor(Math.random()*(buzzerOptions.length-1))];
     }
-    buzzerSound = new Audio(buzzerId+".wav");
+    let buzzerSound = new Audio(buzzerId+".wav");
     $("#buzzer").attr("src", buzzerId+".png" );
     buzzerSound.play();
     return buzzerSound;

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>

styles/styleMain.css

@@ -38,7 +38,7 @@ a, a:visited {
     left: 60px;
     border: dashed;
     width: 400px;
-    min-height: 130px;
+    min-height: 170px;
     padding-left: 5px;
 }
 
@@ -47,17 +47,18 @@ a, a:visited {
     left: 724px;
     border: dashed;
     width: 400px;
-    min-height: 130px;
+    min-height: 170px;
     padding-left: 5px;
 }
 
 ul {
-    list-style-type: square;
+    list-style-type: none;
     margin: 0px;
-    padding-left: 30px;
+    padding-left: 0px;
 }
 
 #buzzer {
+    width: 200px;
     position: relative;
     z-index: 1000;
 }
@@ -86,6 +87,13 @@ ul {
     width: 14px;
 }
 
+.userListBuzzerSelections {
+    width: 30px;
+    position: relative;
+    top: 5px;
+    padding-right: 10px;
+}
+
 @media (max-width: 600px) {
     #userListPanel {
         top: 80px;