Files
TheChaseBuzzer/pages/host.html
T
2022-12-29 09:20:58 +11:00

84 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>The cooler buzzer website</title>
<link rel="stylesheet" href="styleMain.css">
<!-- <link rel="preload" href="Twoson.woff2" as="font" type="font/woff2" crossorigin> -->
<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 buzzerOptions = setupBuzzerOptions();
let buzzerSound = new Audio(buzzerOptions[0]+".wav");
socket.on("userInfoToClient", (userInfo) => {
userInfoToClient(userInfo);
});
socket.on("gameStateToClient", (currentTeam, currentScore) => {
gameStateToClient(currentTeam, currentScore);
});
socket.on("clearBuzzers", () => {
$("#firstBuzz").html("");
});
socket.on("buzzInfoToClient", (buzzInfo) => {
buzzInfoToClient(buzzInfo, buzzerSound);
});
$("#plus0").click(function() {
socket.emit("scoresToServer", 0);
});
$("#plus1").click(function() {
socket.emit("scoresToServer", 1);
});
$("#plus2").click(function() {
socket.emit("scoresToServer", 2);
});
$("#unregisterUsers").click(function() {
socket.emit("unregisterUsers", 2);
});
$("#buzzerOptions").contents().mousedown(function() {
buzzerSound = selectBuzzer($(this).attr("id"));
});
});
</script>
</head>
<body>
<p id="message">hi quetz :]</p>
<div id="interface">
<p id="currentTeam"></p>
Progress:
<p id="currentScore"></p>
<button id="plus0" type="button" style="width: 230px; height: 50px; margin: 5px;">+0 Points</button>
<br>
<button id="plus1" type="button" style="width: 110px; height: 50px;">+1 Point</button>
<button id="plus2" type="button" style="width: 110px; height: 50px;">+2 Points</button>
<p style="font-size: 11px; margin: 5px;">(all points buttons clear buzzers)</p>
<!-- <br> -->
<p id="firstBuzz"></p>
<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">
Players:
<ul></ul>
</div>
<div id="ChasersList">
Chasers:
<ul></ul>
</div>
</div>
<div id="buzzerOptions">
</div>
</body>
</html>