Samuel Kent
105 lines
2.7 KiB
HTML
105 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>The cooler buzzer website</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 startTime;//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");
|
|
console.log(buzzerSound);
|
|
$("#buzzer").attr("src", buzzerOptions[0]+".png" );
|
|
$("#buzzer").css("opacity", "0.2");
|
|
let buzzable = false;
|
|
|
|
socket.emit("registerUser", userName, teamName);
|
|
|
|
socket.on("userListsToClient", (playerList, chaserList) => {
|
|
userListsToClient(playerList, chaserList);
|
|
});
|
|
|
|
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");
|
|
}
|
|
$("#buzzList").html("");
|
|
});
|
|
|
|
socket.on("buzzListToClient", (buzzList) => {
|
|
buzzListToClient(buzzList, buzzerSound);
|
|
if (buzzList.slice(-1) == userName) {
|
|
let ping = new Date().getTime() - startTime;
|
|
console.log("ping: "+ping);
|
|
}
|
|
});
|
|
|
|
$(document).keydown(function(e) {
|
|
if(e.which == 32) {
|
|
buzzIn();
|
|
}
|
|
});
|
|
|
|
$("#buzzer").mousedown(function() {
|
|
buzzIn();
|
|
});
|
|
|
|
function buzzIn() {
|
|
if (buzzable) {
|
|
buzzable = false;
|
|
$("#buzzer").css("opacity", "0.2");
|
|
startTime = new Date().getTime();
|
|
socket.emit("buzzerPressed", userName);
|
|
}
|
|
}
|
|
|
|
$("#buzzerOptions").contents().mousedown(function() {
|
|
buzzerSound = new Audio($(this).attr("id")+".wav");
|
|
$("#buzzer").attr("src", $(this).attr("id")+".png" );
|
|
buzzerSound.play();
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p id="message"></p>
|
|
<div id="interface">
|
|
<p id="currentTeam"></p>
|
|
<p id="currentScore"></p>
|
|
<br>
|
|
<img id="buzzer" alt="The buzzer" style="width: 200px">
|
|
<br>
|
|
<p id="buzzList"></p>
|
|
</div>
|
|
<div id="userListPanel">
|
|
Players:
|
|
<ul id="playerList"></ul>
|
|
Chasers:
|
|
<ul id="chaserList"></ul>
|
|
</div>
|
|
<div id="buzzerOptions">
|
|
</div>
|
|
</body>
|
|
</html>
|