friends/TheChaseBuzzer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added basic user list, Boing and Kirbeep buzzers as well as some refactoring and ui adjustments

Browse Source
This commit is contained in:
Samuel Kent
2022-12-27 09:30:49 +11:00
parent ced7fa5092
commit 252fa97606
15 changed files with 143 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/home.html
+4 -5
View File
@@ -4,7 +4,7 @@
<title>The cooler buzzer website</title>
<link rel="stylesheet" href="styleMain.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https:/socket.io/socket.io.js"></script>
<!-- <script src="https:/socket.io/socket.io.js"></script> -->
<script>
$(document).ready(function() {
@@ -28,10 +28,9 @@
</script>
</head>
<body>
<div class="interface">
<header>
<h1>Welcome!</h1>
</header>
<div id="interface">
<img src="MainLogo.png">
<br>
Your name, please:
<br>
<input type="text" id="userName" placeholder="User name">
pages/host.html
+28 -21
View File
@@ -3,26 +3,33 @@
<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="https:/socket.io/socket.io.js"></script>
<script src="http:/socket.io/socket.io.js"></script>
<script>
$(document).ready(function() {
var socket = io();
let buzzerSound = new Audio('MPYosh.wav');
socket.on("gameStateToClient", (currentTeam, currentScore) => {
$("#currentTeam").html(currentTeam);
$("#currentScore").html(currentScore);
let buzzerOptions = setupBuzzerOptions();
let buzzerSound = new Audio(buzzerOptions[0]+".wav");
socket.on("userListsToClient", (playerList, chaserList) => {
userListsToClient(playerList, chaserList);
});
socket.on("gameStateToClient", (currentTeam, currentScore) => {
gameStateToClient(currentTeam, currentScore);
});
socket.on("clearBuzzers", () => {
$("#buzzList").html("");
});
socket.on("buzzListToClient", (buzzList) => {
//play sound for first buzz in
if ($("#buzzList").html() == "") {
buzzerSound.play();
}
$("#buzzList").html(buzzList.join());
buzzListToClient(buzzList, buzzerSound);
});
$("#plus0").click(function() {
socket.emit("scoresToServer", 0);
});
@@ -41,26 +48,26 @@
</script>
</head>
<body>
<header>
<h1>hi quetz :]</h1>
</header>
<div class="interface">
<p id="message">hi quetz :]</p>
<div id="interface">
<p id="currentTeam"></p>
<p id="currentScore"></p>
<!-- <br> -->
(all buttons clear buzzers)
<br>
<button id="plus0" type="button">Clear buzzers</button>
<button id="plus0" type="button">+0 Points</button>
<button id="plus1" type="button">+1 Point</button>
<button id="plus2" type="button">+2 Points</button>
<br>
<p id="buzzList"></p>
</div>
<div id="userListPanel">
Players:
<ul id="playerList"></ul>
Chasers:
<ul id="chaserList"></ul>
</div>
<div id="buzzerOptions">
<img id="MPYosh" src="MPYosh.png">
<img id="MPDog" src="MPDog.png">
<img id="MPCat" src="MPCat.png">
<img id="Wow" src="Wow.png">
<img id="TheNumberEight" src="TheNumberEight.png">
<img id="Ooh" src="Ooh.png">
</div>
</body>
</html>
pages/play.html
+37 -24
View File
@@ -3,23 +3,38 @@
<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="https:/socket.io/socket.io.js"></script>
<script src="http:/socket.io/socket.io.js"></script>
<script>
$(document).ready(function() {
var socket = io();
let startTime;
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 buzzerSound = new Audio('MPYosh.wav');
let buzzable = false;
let buzzerOptions = setupBuzzerOptions();
let buzzerSound = new Audio(buzzerOptions[0]+".wav");
console.log(buzzerSound);
$("#buzzer").attr("src", buzzerOptions[0]+".png" );
$("#buzzer").css("opacity", "0.2");
socket.on("gameStateToClient", (currentTeam, currentScore) => {
$("#currentTeam").html(currentTeam);
$("#currentScore").html(currentScore);
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;
@@ -31,12 +46,9 @@
}
$("#buzzList").html("");
});
socket.on("buzzListToClient", (buzzList) => {
//play sound for first buzz in
if ($("#buzzList").html() == "") {
buzzerSound.play();
}
$("#buzzList").html(buzzList.join());
buzzListToClient(buzzList, buzzerSound);
if (buzzList.slice(-1) == userName) {
let ping = new Date().getTime() - startTime;
console.log("ping: "+ping);
@@ -48,9 +60,11 @@
buzzIn();
}
});
$("#buzzer").mousedown(function() {
buzzIn();
});
function buzzIn() {
if (buzzable) {
buzzable = false;
@@ -59,33 +73,32 @@
socket.emit("buzzerPressed", userName);
}
}
$("#buzzerOptions").contents().mousedown(function() {
buzzerSound = new Audio($(this).attr("id")+".wav");
$("#buzzer").attr("src", $(this).attr("id")+".png" )
$("#buzzer").attr("src", $(this).attr("id")+".png" );
buzzerSound.play();
});
});
</script>
</head>
<body>
<header>
<h1 id="message"></h1>
</header>
<div class="interface">
<p id="message"></p>
<div id="interface">
<p id="currentTeam"></p>
<p id="currentScore"></p>
<br>
<img id="buzzer" src="MPYosh.png" alt="The buzzer" style="width: 200px">
<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">
<img id="MPYosh" src="MPYosh.png">
<img id="MPDog" src="MPDog.png">
<img id="MPCat" src="MPCat.png">
<img id="Wow" src="Wow.png">
<img id="TheNumberEight" src="TheNumberEight.png">
<img id="Ooh" src="Ooh.png">
</div>
</body>
</html>