added objection button and some new buzzers

app.js

@@ -16,10 +16,10 @@ const io = new Server(server, {
 const userMap = new Map();
 let buzzInfo = [];
 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]
+const teamsScore = [0,0];
 let currentTeamNumber = 0;
 io.on("connection", (socket) => {
   console.log("a user connected");
@@ -31,6 +31,10 @@ io.on("connection", (socket) => {
   //initial info on connection
   socket.emit("gameStateToClient", teamsList[currentTeamNumber], teamsScore[currentTeamNumber]);
   
+  if (anyObjections == true) {
+    socket.emit("objectionToClient", "????");
+  }
+
   socket.on("pingServer", (timeStamp) => {
     socket.emit("pingClient", timeStamp);
   });
@@ -84,10 +88,22 @@ io.on("connection", (socket) => {
   });
 
   socket.on("unregisterUsers", () => {
+    // console.log("whaat?");
     userInfo = new Object();
     io.emit("userInfoToClient", userInfo);
   });
 
+  socket.on("objectionToServer", (userName) => {
+    if (anyObjections == false) {
+      io.emit("objectionToClient", userName);
+      anyObjections = true;
+    }
+  });
+
+  socket.on("clearObjectionToServer", () => {
+    anyObjections = false;
+    io.emit("clearObjectionToClient");
+  });
 });
 
 // const io = new Server(server);

browserFunctions.js

@@ -43,4 +43,14 @@ function selectBuzzer(buzzerId) {
     $("#buzzer").attr("src", buzzerId+".png" );
     buzzerSound.play();
     return buzzerSound;
+}
+
+let objectionSound = new Audio("AAObjection.wav");
+function objectionToClient(userName) {
+    objectionSound.play();
+    $("#objection").html("<img src='AAObjection.gif?"+Math.random()+"'><br>"+userName+" is objecting!<br>");
+}
+
+function clearObjectionToClient() {
+    $("#objection").html("");
 }

pages/host.html

@@ -38,7 +38,19 @@
 				});
 
 				$("#unregisterUsers").click(function() {
-					socket.emit("unregisterUsers", 2);
+					socket.emit("unregisterUsers");
+				});
+
+				socket.on("objectionToClient", (userName) => {
+					objectionToClient(userName);
+					$("#objection").append("<button id='clearObjection' type='button' style='height: 30px;'>Clear Objections</button>");
+					$("#clearObjection").click(function() {
+						socket.emit("clearObjectionToServer");
+					});
+				});
+
+				socket.on("clearObjectionToClient", () => {
+					clearObjectionToClient();
 				});
 			});
 		</script>
@@ -56,9 +68,15 @@
 			<p style="font-size: 11px; margin: 5px;">(all points buttons clear buzzers)</p>
 			<!-- <br> -->
 			<p id="firstBuzz"></p>
-			<br><br><br>
+			<p id="objection">
+			</p>
+			<br>
+			<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">
 			<div id="PlayersList">

pages/play.html

@@ -17,7 +17,7 @@
 				$("#message").html("hi "+userName+" :]")
 				let teamName = queryString.searchParams.get("team");
 
-				let buzzerOptions = ["Kirbeep","MPYosh","MPDog","MPCat","EBWow","Ooh","MarioBoing","TheNumberEight","EBAttack1","SaturnHonk","PuffRest","AAHoldIt","EmergencyMeeting","Mystery"];
+				let buzzerOptions = ["Kirbeep","MPYosh","MPDog","MPCat","EBWow","EBAttack1","Ooh","TheNumberEight","MarioBoing","MarioCoin","SaturnHonk","PuffRest","AAHoldIt","EmergencyMeeting","PikminThrow","MGSAlert","FF9Moogle","Mystery"];
 				buzzerOptions.forEach((buzzerId) => {
 					$("#buzzerOptions").append("<img id='"+buzzerId+"' src='"+buzzerId+".png'>");
 				});
@@ -86,6 +86,26 @@
 					$("#buzzer").attr("src", buzzerId+".png" );
 					buzzerSound.play();
 				});
+
+				$("#contestAnswer").find("img").mousedown(function() {
+					socket.emit("objectionToServer", userName);
+				});
+
+				$("#contestAnswer").find("img").hover(
+					function() {
+						$(this).attr("src", "AAEvidence.gif");
+					}, function() {
+						$(this).attr("src", "AAEvidence.png");
+					}
+				);
+
+				socket.on("objectionToClient", (userName) => {
+					objectionToClient(userName);
+				});
+				
+				socket.on("clearObjectionToClient", () => {
+					clearObjectionToClient();
+				});
 			});
 		</script>
 	</head>
@@ -99,6 +119,8 @@
 			<img id="buzzer" alt="The buzzer">
 			<br>
 			<p id="firstBuzz"></p>
+			<div id="objection">
+			</div>
 		</div>
 		<div id="userListPanel">
 			<div id="PlayersList">
@@ -112,5 +134,14 @@
 		</div>
 		<div id="buzzerOptions">
 		</div>
+		<div id="contestAnswer">
+			<img src="AAEvidence.png" >
+			<p>
+				Click to contest an answer marked incorrectly.
+				<br>
+				(please use sparingly)
+			</p>
+		<div>
+
 	</body>
 </html>

styles/styleMain.css

@@ -10,6 +10,8 @@ body {
 
 button {
     font-family: 'Twoson';
+    position: relative;
+    z-index: 1;
 }
 
 input {
@@ -20,7 +22,43 @@ a, a:visited {
     color: rgb(199, 147, 255);
 }
 
+#firstBuzz {
+    min-height: 30px;
+}
+
+#objection {
+    left: 50%;
+    margin-left: -250px;
+    min-height: 310px;
+    width: 500px;
+    position: relative;
+    /* bottom: 150px; */
+}
+
+#objection img{
+    text-align: center;
+    width: 300px;
+}
+
+#contestAnswer {
+    position: absolute;
+    right: 50px;
+    bottom: 50px;
+    text-align: center;
+    width: 200px;
+}
+#contestAnswer img {
+    width: 100px;
+}
+
+#contestAnswer p {
+    margin: 0px;
+    font-size: 12px;
+    border: dashed;
+}
+
 #interface {
+    z-index: -1;
     text-align: center;
 }
 
@@ -95,6 +133,20 @@ ul {
 }
 
 @media (max-width: 600px) {
+    #objection {
+        margin-left: 0px;
+        left: -65px;
+        bottom: 150px;
+        font-size: 15px;
+        text-align: left;
+        min-height: 0px;
+        height: 0px;
+    }
+
+    #objection img{
+        width: 150px;
+        /* text-align: left; */
+    }
     #userListPanel {
         top: 80px;
         width: 500px;