Samuel Kent
212 lines
6.0 KiB
HTML
212 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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>
|
|
<script src="http:/socket.io/socket.io.js"></script>
|
|
|
|
<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 = [
|
|
["Kirbeep","KirbyMic2","KirbyMic3","KirbySquishy","KirbyBugzzy","KirbyKracko"],
|
|
["MarioBoing","MarioPenguin","MarioCoin","MPYosh","MPDog","MPCat","MarioPlum","WLHelloThere"],
|
|
["P3Summon"],
|
|
["EBWow","EBAttack1","SaturnHonk"],
|
|
["Ooh"],
|
|
["AAHoldIt","AATakeThat"],
|
|
["Killer7Laugh"],
|
|
["TheNumberEight","TheNumberEight","TheNumberEight","TheNumberEight","TheNumberEight","TheNumberEight","TheNumberEight","TheNumberEight"],
|
|
["Jiggluigibat"],
|
|
["FF9Moogle"],
|
|
["EmergencyMeeting"],
|
|
["PikminThrow"],
|
|
["MGSAlert"],
|
|
["HKAdido","HKShaw","HKGrub"],
|
|
["DKOK"],
|
|
["SonicCheckpoint","SonicOhNo","SonicSusic"],
|
|
["PdPSeren","TAFroggy","TAKamek"],
|
|
["PKMNLvlUp"],
|
|
["MMShakeShake"],
|
|
["AoEWololo"],
|
|
["SplatWoomy","SplatPing"],
|
|
["OneShotSun","OneShotRam","OneShotRamDemon"],
|
|
["TWEWYCrunch","TWEWYNoLimits","TWEWYSummon","TWEWYTime","TWEWYVerywell","TWEWYZettaslow"],
|
|
["BuzzinLiveBuzzer"],
|
|
["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>");
|
|
buzzerGroup.forEach((buzzerId) => {
|
|
buzzerGroupHTML.find(".buzzerGroupItems").append("<img id='"+buzzerId+"' src='"+buzzerId+".png'>");
|
|
});
|
|
$("#buzzerOptions").append(buzzerGroupHTML);
|
|
});
|
|
$("#buzzer").attr("src", buzzerOptions[0]+".png" );
|
|
$("#buzzer").css("opacity", "0.2");
|
|
let buzzable = false;
|
|
|
|
socket.emit("updateUserInfo", userName, teamName, "Kirbeep");//initial user registration
|
|
$("#buzzer").attr("src", "Kirbeep.png" );
|
|
|
|
socket.on("userInfoToClient", (userInfo) => {
|
|
userInfoToClient(userInfo);
|
|
});
|
|
|
|
socket.on("gameStateToClient", (currentTeam, currentScore) => {
|
|
gameStateToClient(currentTeam, currentScore);
|
|
});
|
|
|
|
socket.on("clearBuzzers", (currentTeam) => {
|
|
if (currentTeam == teamName) {
|
|
buzzable = true;
|
|
$("#buzzer").css("opacity", "1");
|
|
|
|
} else {
|
|
buzzable = false;
|
|
$("#buzzer").css("opacity", "0.2");
|
|
}
|
|
clearBuzzers();
|
|
});
|
|
|
|
socket.on("buzzInfoToClient", (buzzInfo) => {
|
|
buzzInfoToClient(buzzInfo);
|
|
});
|
|
|
|
socket.on("pingClient", (timeStamp) => {
|
|
const ping = new Date().getTime() - timeStamp;
|
|
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();
|
|
}
|
|
});
|
|
|
|
$("#buzzer").mousedown(function() {
|
|
buzzIn();
|
|
});
|
|
|
|
function buzzIn() {
|
|
if (buzzable) {
|
|
buzzable = false;
|
|
$("#buzzer").css("opacity", "0.2");
|
|
buzzInTime = new Date().getTime();
|
|
socket.emit("buzzerPressed", userName, buzzInTime);
|
|
socket.emit("pingServer", new Date().getTime());
|
|
}
|
|
}
|
|
|
|
$("#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();
|
|
});
|
|
|
|
$("#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);
|
|
});
|
|
|
|
$("#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>
|
|
<body>
|
|
<p id="message"></p>
|
|
<div id="interface">
|
|
<p id="currentTeam"></p>
|
|
Progress:
|
|
<p id="currentScore"></p>
|
|
<br>
|
|
<img id="buzzer" alt="The buzzer">
|
|
<br>
|
|
<p id="firstBuzz"></p>
|
|
<p id="instructions">
|
|
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>
|
|
<div id="userListPanel">
|
|
<div id="PlayersList">
|
|
Players:
|
|
<ul></ul>
|
|
</div>
|
|
<div id="ChasersList">
|
|
Chasers:
|
|
<ul></ul>
|
|
</div>
|
|
</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>
|