improved buzzer selction UI, responsive cursors and implemented 'special' buzzers (and some other buzzers as well)

2023-05-27 12:38:33 +10:00
parent d84f67b499
commit d11c79423d
72 changed files with 114 additions and 44 deletions
@@ -58,15 +58,15 @@ function passToClient(teamName) {
    $("#firstBuzz").html(teamName+" have Passed!");
 }
-function selectBuzzer(buzzerId) {
+// function selectBuzzer(buzzerId) {
-    if (buzzerId == "Mystery") {
+//     if (buzzerId == "Mystery") {
-        buzzerId = buzzerOptions[Math.floor(Math.random()*(buzzerOptions.length-1))];
+//         buzzerId = buzzerOptions[Math.floor(Math.random()*(buzzerOptions.length-1))];
-    }
+//     }
-    let buzzerSound = new Audio(buzzerId+".wav");
+//     let buzzerSound = new Audio(buzzerId+".wav");
-    $("#buzzer").attr("src", buzzerId+".png" );
+//     $("#buzzer").attr("src", buzzerId+".png" );
-    buzzerSound.play();
+//     buzzerSound.play();
-    return buzzerSound;
+//     return buzzerSound;
-}
+// }
 let objectionSound = new Audio("AAObjection.wav");
 function objectionToClient(userName) {
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>Pledge Monolith!</title>
+		<title>Pledge Monolith! (please)</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,46 +15,104 @@
 				let userName = queryString.searchParams.get("user");
 				$("#message").html("hi "+userName+" :]")
 				let teamName = queryString.searchParams.get("team");
 				let clientBuzzer = "Kirbeep";//this is mostly just used as a reference for if they have a special buzzer
 				let buzzerOptions = [
-					["Kirbeep","KirbyMic2","KirbyMic3","KirbySquishy","KirbyBugzzy","KirbyKracko"],
+					["Kirbeep","KirbyMic2","KirbySquishy","KirbyBugzzy","KirbyKracko"],
-					["MarioBoing","MarioPenguin","MarioCoin","MPYosh","MPDog","MPCat","MarioPlum","WLHelloThere"],
+					["MarioBoing","MarioPenguin","MarioCoin","MPYosh","MPDogF","MPCatF","MarioPlum","WLHelloThere"],
-					["P3Summon"],
+					["PizzaTowerTaunt1"],
 					["EBWow","EBAttack1","SaturnHonk"],
 					["Ooh"],
 					["AAHoldIt","AATakeThat"],
 					["Killer7Laugh"],
 					["TheNumberEight","TheNumberEight","TheNumberEight","TheNumberEight","TheNumberEight","TheNumberEight","TheNumberEight","TheNumberEight"],
-					["Jiggluigibat"],
+					["Jiggluigibat","SaturnHonk","Kirbeep"],
 					["PikminThrow","Pikmin2LouieAMV"],
 					["FF9Moogle"],
 					["EmergencyMeeting"],
 					["PikminThrow"],
 					["MGSAlert"],
-					["HKAdido","HKShaw","HKGrub"],
+					["HKAdido","HKGrub"],
 					["DKOK"],
 					["SonicCheckpoint","SonicOhNo","SonicSusic"],
 					["EmergencyMeeting"],
 					["PdPSeren","TAFroggy","TAKamek"],
 					["PKMNLvlUp"],
 					["MMShakeShake"],
 					["AoEWololo"],
 					["P3Summon"],
 					["SplatWoomy","SplatPing"],
-					["OneShotSun","OneShotRam","OneShotRamDemon"],
+					["OneShotSun","OneShotRam"],
 					["TWEWYCrunch","TWEWYNoLimits","TWEWYSummon","TWEWYTime","TWEWYVerywell","TWEWYZettaslow"],
 					["BMYoSun","BMOuch","BMBoing"],
 					["EWJPain"],
 					["BuzzinLiveBuzzer"],
 					["Mystery"]
 				];
-				buzzerOptions.forEach((buzzerGroup) => {
+				let specialBuzzers = { 
-					const groupFaceId = buzzerGroup[0];
+					PizzaTowerTaunt1: ["PizzaTowerTaunt-1","PizzaTowerTaunt0","PizzaTowerTaunt1","PizzaTowerTaunt2","PizzaTowerTaunt3","PizzaTowerTaunt4","PizzaTowerTaunt5","PizzaTowerTaunt6","PizzaTowerTaunt7","PizzaTowerTaunt8"],
-					const buzzerGroupHTML = $("<div class=buzzerGroup><small>"+buzzerGroup.length+"</small><img id='"+groupFaceId+"' src='"+groupFaceId+".png'> <div class=buzzerGroupItems hidden> </div>");
+					OneShotRam: ["OneShotRam","OneShotRam","OneShotRam","OneShotRamDemon"],
-					buzzerGroup.forEach((buzzerId) => {
+					MarioPenguin: ["MarioPenguin","MarioPenguin","MarioPenguin","MarioPenguin","MarioPenguin","MarioMegPenguin"],
-						buzzerGroupHTML.find(".buzzerGroupItems").append("<img id='"+buzzerId+"' src='"+buzzerId+".png'>");
+					KirbyMic2: ["KirbyMic1","KirbyMic2","KirbyMic3"],
 					HKAdido: ["HKAdido","HKShaw"],
 					MPDogF: ["MPDogA","MPDogB","MPDogC","MPDogD","MPDogE","MPDogF","MPDogG"],
 					MPCatF: ["MPCatA","MPCatB","MPCatC","MPCatD","MPCatE","MPCatF","MPCatG"]
 				}
 				let buzzerOptionsCurrentRow = 0;
 				let buzzerOptionsTotalRows = 3;
 				function displayBuzzerOptions() {
 					$("#buzzerOptions").html("");
 					$("#buzzerOptions").append("<div class=buzzerGroup id='buzzerOptionsPrev'>\<</div>");
 					for (let i= 0; i<10; i++){
 						let buzzerGroup = buzzerOptions[buzzerOptionsCurrentRow*10+i];
 						if (buzzerGroup != null) {
 							const groupFaceId = buzzerGroup[0];
 							const buzzerGroupHTML = $("<div class=buzzerGroup><small>"+buzzerGroup.length+"</small><img id='"+groupFaceId+"' src='"+groupFaceId+".png'> <div class=buzzerGroupItems hidden> </div>");
 							buzzerGroup.forEach((buzzerId) => {						
 								buzzerGroupHTML.find(".buzzerGroupItems").append("<img id='"+buzzerId+"' src='"+buzzerId+".png'>");
 							});
 							$("#buzzerOptions").append(buzzerGroupHTML);
 						}
 					}
 					$("#buzzerOptions").append("<div class=buzzerGroup id='buzzerOptionsNext'>\></div>");
 					$(".buzzerGroup").mousedown(function() {
 						$(".buzzerGroupItems").hide();
 						$(this).find(".buzzerGroupItems").show();
 					});
-					$("#buzzerOptions").append(buzzerGroupHTML);
+
-				});
+					$("#buzzerOptions img").mousedown(function() {
 						buzzerId = $(this).attr("id");
 						clientBuzzer = buzzerId;
 						if (specialBuzzers[buzzerId] != null) {
 							buzzerId = specialBuzzers[buzzerId][Math.floor(Math.random()*(specialBuzzers[buzzerId].length))];
 						}
 						if (buzzerId == "Mystery") {
 							buzzerOptionsFlat = buzzerOptions.flat();
 							buzzerId = buzzerOptionsFlat[Math.floor(Math.random()*(buzzerOptionsFlat.length-1))];
 						}
 						socket.emit("updateUserInfo", userName, teamName, buzzerId);
 						let buzzerSound = new Audio(buzzerId+".wav");
 						$("#buzzer").attr("src", buzzerId+".png" );
 						buzzerSound.play();
 					});
 					$("#buzzerOptionsNext").mousedown(function() {
 						buzzerOptionsCurrentRow += 1;
 						buzzerOptionsCurrentRow = ((buzzerOptionsCurrentRow % buzzerOptionsTotalRows) + buzzerOptionsTotalRows) % buzzerOptionsTotalRows //true modulo
 						displayBuzzerOptions();
 					});
 					$("#buzzerOptionsPrev").mousedown(function() {
 						buzzerOptionsCurrentRow = buzzerOptionsCurrentRow-1;
 						buzzerOptionsCurrentRow = ((buzzerOptionsCurrentRow % buzzerOptionsTotalRows) + buzzerOptionsTotalRows) % buzzerOptionsTotalRows	//true modulo
 						displayBuzzerOptions();
 					});
 				}
 				displayBuzzerOptions();
 				$("#buzzer").attr("src", buzzerOptions[0]+".png" );
 				$("#buzzer").css("opacity", "0.2");
 				$("#buzzer").css("cursor", "not-allowed");
 				let buzzable = false;
-				socket.emit("updateUserInfo", userName, teamName, "Kirbeep");//initial user registration
+				socket.emit("updateUserInfo", userName, teamName, clientBuzzer);//initial user registration
 				$("#buzzer").attr("src", "Kirbeep.png" );
 				socket.on("userInfoToClient", (userInfo) => {
@@ -68,10 +126,11 @@
 				socket.on("clearBuzzers", (currentTeam) => {
 					if (currentTeam == teamName) {
 						buzzable = true;
 						$("#buzzer").css("cursor", "pointer");
 						$("#buzzer").css("opacity", "1");
 					} else {
 						buzzable = false;
 						$("#buzzer").css("cursor", "not-allowed");
 						$("#buzzer").css("opacity", "0.2");
 					}
 					clearBuzzers();
@@ -106,9 +165,19 @@
 				function buzzIn() {
 					if (buzzable) {
 						buzzable = false;
 						$("#buzzer").css("opacity", "0.2");
 						$("#buzzer").css("cursor", "not-allowed");
 						buzzInTime = new Date().getTime();
 						if (specialBuzzers[clientBuzzer] != null) {
 							let buzzerId = specialBuzzers[clientBuzzer][Math.floor(Math.random()*(specialBuzzers[clientBuzzer].length))];
 							$("#buzzer").attr("src", buzzerId+".png" );
 							socket.emit("updateUserInfo", userName, teamName, buzzerId);
 						}
 						socket.emit("buzzerPressed", userName, buzzInTime);
 						socket.emit("pingServer", new Date().getTime());
 					}
@@ -124,23 +193,6 @@
 					}
 				});
 				$(".buzzerGroup").mousedown(function() {
 					$(".buzzerGroupItems").hide();
 					$(this).find(".buzzerGroupItems").show();
 				});
 				$("#buzzerOptions img").mousedown(function() {
 					buzzerId = $(this).attr("id");
 					if (buzzerId == "Mystery") {
 						buzzerOptionsFlat = buzzerOptions.flat();
 						buzzerId = buzzerOptionsFlat[Math.floor(Math.random()*(buzzerOptionsFlat.length-1))];
 					}
 					socket.emit("updateUserInfo", userName, teamName, buzzerId);
 					let buzzerSound = new Audio(buzzerId+".wav");
 					$("#buzzer").attr("src", buzzerId+".png" );
 					buzzerSound.play();
 				});
 				$("#contestAnswer").find("img").mousedown(function() {
 					socket.emit("objectionToServer", userName);
 				});
@@ -10,6 +10,7 @@ button {
    font-family: 'Twoson';
    position: relative;
    z-index: 1;
    cursor: pointer;
 }
 input {
@@ -47,6 +48,7 @@ a, a:visited {
 #contestAnswer img {
    width: 100px;
    cursor: pointer;
 }
 #contestAnswer p {
@@ -100,12 +102,27 @@ ul {
    z-index: 1000;
 }
 #idkButton {
    cursor: pointer;
 }
 #instructions {
    font-size: 14px;
 }
 #buzzerOptions img {
    width: 50px;
    cursor: pointer;
 }
 #buzzerOptionsNext {
    font-size: 75px;
    cursor: pointer;
 }
 #buzzerOptionsPrev{
    font-size: 75px;
    cursor: pointer;
 }
 #buzzerOptions small {
@@ -145,6 +162,7 @@ ul {
    top: 20px;
    right: 20px;
    width: 14px;
    cursor: pointer;
 }
 .userListBuzzerSelections {