IDK Button implemented + new buzzers

app.js

@@ -14,10 +14,10 @@ const io = new Server(server, {
 
 const userMap = new Map();
 let buzzInfo = [];
+let idkList = [];
 let userInfo = new Object();//Each user has properties, and is stored as a property of userInfo
 let anyObjections = false;
 const teamsList = ["Players","Chasers"]
-
 const teamsScore = [0,0];
 let currentTeamNumber = 0;
 io.on("connection", (socket) => {
@@ -56,6 +56,22 @@ io.on("connection", (socket) => {
     io.emit("buzzInfoToClient", buzzInfo);
   });
 
+  socket.on("idkButtonPressed", (newUserName) => {
+    if (!idkList.includes(newUserName) && userInfo[newUserName] != null && userInfo[newUserName].teamName == teamsList[currentTeamNumber]) {
+      idkList.push(newUserName);
+      let teamSize = 0;
+      for (const user in userInfo) {
+        if (userInfo[user].teamName == userInfo[newUserName].teamName) {
+          teamSize++;
+        }
+      }
+      io.emit("idkListToClient", idkList);
+      if (idkList.length >= teamSize) {
+        io.emit("passToClient", teamsList[currentTeamNumber]);
+      }
+    }
+  });
+ 
   socket.on("scoresToServer", score => {
     teamsScore[currentTeamNumber] += score;
     if (teamsScore[currentTeamNumber] >= 2) {
@@ -63,9 +79,9 @@ io.on("connection", (socket) => {
       currentTeamNumber = (currentTeamNumber+1)%2;
     }
     buzzInfo = [];
+    idkList = [];
     io.emit("gameStateToClient", teamsList[currentTeamNumber], teamsScore[currentTeamNumber]);
     io.emit("clearBuzzers", teamsList[currentTeamNumber]);
-    io.emit("userInfoToClient", userInfo);//resets the buzzer info 
   });
 
   socket.on("updateUserInfo", (userName, teamName, buzzerId) => {

browserFunctions.js

@@ -1,9 +1,16 @@
 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+">"+"<img src="+userInfo[user].buzzerId+".png data-buzzerId="+userInfo[user].buzzerId+" class=userListBuzzerSelections>"+user+"<var></var></li>");
+        console.log($("#userListPanel").find("#"+userId));
+        if ($("#userListPanel").find("#"+userId).length >= 1) {
+            //update buzzer icon of existing user
+            $("#userListPanel").find("#"+userId).find("img").attr("data-buzzerId",userInfo[user].buzzerId);
+            $("#userListPanel").find("#"+userId).find("img").attr("src", userInfo[user].buzzerId+".png");
+        }
+        else {
+            //new user
+            $("#"+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>");
+        }
     }
 }
 
@@ -16,12 +23,17 @@ function gameStateToClient(currentTeam, currentScore) {
     $("#currentScore").html(currentScore);
 }
 
+function clearBuzzers() {
+    $("#firstBuzz").html("");
+    $("#userListPanel").find("var").html("");
+}
+
 function buzzInfoToClient(buzzInfo) {
     //play sound for first buzz in
     if ($("#firstBuzz").html() == "") {
         $("#firstBuzz").html(buzzInfo[0].userName);
         const userId = buzzInfo[0].userName.replaceAll(" ","_");
-        let buzzerId = $("#userListPanel").find("#"+userId).find("img").attr("data-buzzerId")
+        let buzzerId = $("#userListPanel").find("#"+userId).find("img").attr("data-buzzerId");
         let buzzerSound = new Audio(buzzerId+".wav");
         buzzerSound.play();
     }
@@ -33,6 +45,19 @@ function buzzInfoToClient(buzzInfo) {
     }    
 }
 
+function idkListToClient(idkList) {
+    idkList.forEach((userName) => {
+        const userId = userName.replaceAll(" ","_");
+        $("#userListPanel").find("#"+userId).find("var").html("<div style='display: inline; font-family: Times New Roman; font-size: 20px;'> ¯\\\_(ツ)_/¯</div>");
+    });
+}
+
+function passToClient(teamName) {
+    let passSound = new Audio("PikminDeath.wav");
+    passSound.play();
+    $("#firstBuzz").html(teamName+" have Passed!");
+}
+
 function selectBuzzer(buzzerId) {
     if (buzzerId == "Mystery") {
         buzzerId = buzzerOptions[Math.floor(Math.random()*(buzzerOptions.length-1))];

pages/home.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Now with more buzzers per buzzer!</title>
+		<title>Pledge Monolith!</title>
 		<link rel="stylesheet" href="styleMain.css">
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 		<script>

pages/host.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Now with more buzzers per buzzer!</title>
+		<title>Pledge Monolith!</title>
 		<link rel="stylesheet" href="styleMain.css">
 		<script src="browserFunctions.js"></script>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
@@ -18,14 +18,22 @@
 					gameStateToClient(currentTeam, currentScore);
 				});
 
-				socket.on("clearBuzzers", () => {
+				socket.on("clearBuzzers", (currentTeam) => {
-					$("#firstBuzz").html("");
+					clearBuzzers();
 				});
 
 				socket.on("buzzInfoToClient", (buzzInfo) => {
 					buzzInfoToClient(buzzInfo);
 				});
 
+				socket.on("idkListToClient", (idkList) => {
+					idkListToClient(idkList);
+				});
+
+				socket.on("passToClient", (teamName) => {
+					passToClient(teamName);
+				});
+
 				$("#plus0").click(function() {
 					socket.emit("scoresToServer", 0);
 				});

pages/play.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Now with more buzzers per buzzer!</title>
+		<title>Pledge Monolith!</title>
 		<link rel="stylesheet" href="styleMain.css">
 		<script src="browserFunctions.js"></script>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
@@ -15,7 +15,7 @@
 				let userName = queryString.searchParams.get("user");
 				$("#message").html("hi "+userName+" :]")
 				let teamName = queryString.searchParams.get("team");
-				let buzzerOptions = [["Kirbeep","KirbyMic2","KirbyMic3","KirbySquishy","KirbyBugzzy","KirbyKracko"],["MarioBoing","MarioPenguin","MarioCoin","MPYosh","MPDog","MPCat"],["EBWow","EBAttack1","SaturnHonk"],["Ooh"],["Jiggluigibat"],["AAHoldIt","AATakeThat"],["EmergencyMeeting"],["TheNumberEight"],["PikminThrow","PikminDeath"],["MGSAlert"],["FF9Moogle"],["P3Summon"],["HKAdido","HKShaw","HKGrub"],["DKOK"],["SonicOhNo"],["PdPSeren","TAFroggy"],["PKMNLvlUp"],["Mystery"]];
+				let buzzerOptions = [["Kirbeep","KirbyMic2","KirbyMic3","KirbySquishy","KirbyBugzzy","KirbyKracko"],["MarioBoing","MarioPenguin","MarioCoin","MPYosh","MPDog","MPCat"],["P3Summon"],["EBWow","EBAttack1","SaturnHonk"],["Ooh"],["AAHoldIt","AATakeThat"],["Killer7Laugh"],["TheNumberEight"],["Jiggluigibat"],["FF9Moogle"],["EmergencyMeeting"],["PikminThrow"],["MGSAlert"],["HKAdido","HKShaw","HKGrub"],["DKOK"],["SonicCheckpoint","SonicOhNo","SonicSusic"],["PdPSeren","TAFroggy","TAKamek"],["PKMNLvlUp"],["MMShakeShake"],["AoEWololo"],["Mystery"]];
 				buzzerOptions.forEach((buzzerGroup) => {
 					const groupFaceId = buzzerGroup[0];
 					const buzzerGroupHTML = $("<div class=buzzerGroup><small>"+buzzerGroup.length+"</small><img id='"+groupFaceId+"' src='"+groupFaceId+".png'> <div class=buzzerGroupItems hidden> </div>");
@@ -48,7 +48,7 @@
 						buzzable = false;
 						$("#buzzer").css("opacity", "0.2");
 					}
-					$("#firstBuzz").html("");
+					clearBuzzers();
 				});
 
 				socket.on("buzzInfoToClient", (buzzInfo) => {
@@ -60,6 +60,14 @@
 					console.log("ping: "+ping);
 				});
 				
+				socket.on("idkListToClient", (idkList) => {
+					idkListToClient(idkList);
+				});
+
+				socket.on("passToClient", (teamName) => {
+					passToClient(teamName);
+				});
+
 				$(document).keydown(function(e) {
 					if(e.which == 32) {
 						buzzIn();
@@ -80,6 +88,16 @@
 					}
 				}
 
+				$("#idkButton").mousedown(function() {
+					socket.emit("idkButtonPressed", userName);
+				});
+
+				$(document).keydown(function(e) {
+					if(e.which == 73 || e.which == 68 || e.which == 75) {
+						socket.emit("idkButtonPressed", userName);
+					}
+				});
+
 				$(".buzzerGroup").mousedown(function() {
 					$(".buzzerGroupItems").hide();
 					$(this).find(".buzzerGroupItems").show();
@@ -133,7 +151,13 @@
 				Click the buzzer above or press spacebar to buzz in.
 				<br>
 				You can only buzz in on your team's turn.
+				<br>
+				<br>
+				Click the button below to let your team know you are willing to pass.
+				<br>
+				You can also do this by pressing the I, D or K key.
 			</p>
+			<img id="idkButton" src="idkButton.png" width="125px">
 			<div id="objection">
 			</div>
 		</div>

styles/styleMain.css

@@ -27,14 +27,14 @@ a, a:visited {
 #objection {
     left: 50%;
     margin-left: -250px;
-    min-height: 310px;
+    min-height: 100px;
     width: 500px;
     position: relative;
 }
 
 #objection img{
     text-align: center;
-    width: 300px;
+    width: 200px;
 }
 
 #contestAnswer {
@@ -75,6 +75,7 @@ a, a:visited {
     width: 400px;
     min-height: 170px;
     padding-left: 5px;
+    padding-bottom: 5px;
 }
 
 #ChasersList {
@@ -84,6 +85,7 @@ a, a:visited {
     width: 400px;
     min-height: 170px;
     padding-left: 5px;
+    padding-bottom: 5px;
 }
 
 ul {
@@ -190,6 +192,6 @@ ul {
         url('Twoson.woff') format('woff'),
         url('Twoson.ttf') format('truetype');
     font-weight: normal;
-    font-style: italic;
+    /* font-style: italic; */
     font-display: swap;
 }