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

Various UI improvements

Browse Source
This commit is contained in:
Samuel Kent
2022-12-28 14:20:19 +11:00
parent 221414aff4
commit fa1874aae4
9 changed files with 110 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+16 -1
View File
@@ -34,6 +34,10 @@ io.on("connection", (socket) => {
//initial info on connection
socket.emit("gameStateToClient", teamsList[currentTeamNumber], teamsScore[currentTeamNumber]);
socket.on("pingServer", (timeStamp) => {
socket.emit("pingClient", timeStamp);
});
socket.on("buzzerPressed", (newUserName, newTimeStamp) => {
let firstBuzzTimeStamp = (function() {
if (buzzInfo.length == 0) {
@@ -48,8 +52,13 @@ io.on("connection", (socket) => {
timeStamp: newTimeStamp,
lateTime: newTimeStamp-firstBuzzTimeStamp
});
io.emit("buzzInfoToClient", buzzInfo);
// function buzzInfoToclient() {
// io.emit("buzzInfoToClient", buzzInfo);
// console.log(buzzInfo);
// }
// setTimeout(buzzInfoToclient, 1000);
// console.log(buzzInfo);
});
socket.on("scoresToServer", score => {
@@ -74,6 +83,12 @@ io.on("connection", (socket) => {
}
io.emit("userInfoToClient", userInfo);
});
socket.on("unregisterUsers", () => {
userInfo = new Object();
io.emit("userInfoToClient", userInfo);
});
});
// const io = new Server(server);
audio/OkSsuka.wav
BIN
View File
Binary file not shown.
audio/Okdesuka.wav
BIN
View File
Binary file not shown.
browserFunctions.js
+16 -7
View File
@@ -7,28 +7,37 @@ function setupBuzzerOptions() {
}
function userInfoToClient(userInfo) {
$("#PlayersList").html("");
$("#ChasersList").html("");
$("#PlayersList").find("ul").html("");
$("#ChasersList").find("ul").html("");
console.log(userInfo);
for (const user in userInfo) {
$("#"+userInfo[user].teamName+"List").append("<li id="+user+">"+user+"<var></var></li>");
const userId = user.replaceAll(" ","_");
$("#"+userInfo[user].teamName+"List").find("ul").append("<li id="+userId+">"+user+"<var></var></li>");
}
}
function gameStateToClient(currentTeam, currentScore) {
$("#PlayersList").css("opacity", 0.5);
$("#ChasersList").css("opacity", 0.5);
$("#"+currentTeam+"List").css("opacity", 1);
$("#currentTeam").html(currentTeam+" turn");
$("#currentScore").html(currentScore);
}
function buzzInfoToClient(buzzInfo, buzzerSound) {
//play sound for first buzz in
if (buzzInfo.length == 1) {
if ($("#firstBuzz").html() == "") {
buzzerSound.play();
$("#firstBuzz").html(buzzInfo[0].userName);
$("#userListPanel").find("#"+buzzInfo[0].userName).css("font-weight", 900);
$("#userListPanel").find("#"+buzzInfo[0].userName).find("var").html(" (BUZZ)")
const userId = buzzInfo[0].userName.replaceAll(" ","_");
$("#userListPanel").find("#"+userId).css("font-weight", 900);
$("#userListPanel").find("#"+userId).find("var").html(" (BUZZ)")
}
for (let i=1; i < buzzInfo.length; i++) {
$("#userListPanel").find("#"+buzzInfo[i].userName).find("var").html(" ("+buzzInfo[i].lateTime/1000+")");
const userId = buzzInfo[i].userName.replaceAll(" ","_");
$("#userListPanel").find("#"+userId).find("var").html(" ("+buzzInfo[i].lateTime/1000+")");
}
}
favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

pages/home.html
+2 -2
View File
@@ -7,9 +7,9 @@
<!-- <script src="https:/socket.io/socket.io.js"></script> -->
<script>
$(document).ready(function() {
const okdesuka = new Audio('Okdesuka.wav');
const okSsuka = new Audio('OkSsuka.wav');
$("#userName").change(function() {
okdesuka.play();
okSsuka.play();
$("#playerLink").attr("href", "/play?user="+this.value+"&team=Players");
$("#playerLink").html("Players");
pages/host.html
+21 -10
View File
@@ -39,6 +39,10 @@
socket.emit("scoresToServer", 2);
});
$("#unregisterUsers").click(function() {
socket.emit("unregisterUsers", 2);
});
$("#buzzerOptions").contents().mousedown(function() {
buzzerSound = new Audio($(this).attr("id")+".wav");
buzzerSound.play();
@@ -51,20 +55,27 @@
<div id="interface">
<p id="currentTeam"></p>
Progress:
<p id="currentScore"></p>
<!-- <br> -->
<p style="font-size: 15px">(all buttons clear buzzers)</p>
<button id="plus0" type="button">+0 Points</button>
<button id="plus1" type="button">+1 Point</button>
<button id="plus2" type="button">+2 Points</button>
<p id="currentScore"></p>
<button id="plus0" type="button" style="width: 226px; 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: 15px; 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">
Players:
<ul id="PlayersList"></ul>
Chasers:
<ul id="ChasersList"></ul>
<div id="PlayersList">
Players:
<ul></ul>
</div>
<div id="ChasersList">
Chasers:
<ul></ul>
</div>
</div>
<div id="buzzerOptions">
</div>
pages/play.html
+14 -8
View File
@@ -49,10 +49,11 @@
socket.on("buzzInfoToClient", (buzzInfo) => {
buzzInfoToClient(buzzInfo, buzzerSound);
// if (buzzList.slice(-1) == userName) {
// let ping = new Date().getTime() - buzzInTime;
// console.log("ping: "+ping);
// }
});
socket.on("pingClient", (timeStamp) => {
const ping = new Date().getTime() - timeStamp;
console.log("ping: "+ping);
});
$(document).keydown(function(e) {
@@ -71,6 +72,7 @@
$("#buzzer").css("opacity", "0.2");
buzzInTime = new Date().getTime();
socket.emit("buzzerPressed", userName, buzzInTime);
socket.emit("pingServer", new Date().getTime());
}
}
@@ -94,10 +96,14 @@
<p id="firstBuzz"></p>
</div>
<div id="userListPanel">
Players:
<ul id="PlayersList"></ul>
Chasers:
<ul id="ChasersList"></ul>
<div id="PlayersList">
Players:
<ul></ul>
</div>
<div id="ChasersList">
Chasers:
<ul></ul>
</div>
</div>
<div id="buzzerOptions">
</div>
styles/styleMain.css
+41 -2
View File
@@ -15,8 +15,31 @@ a, a:visited {
#userListPanel {
position: absolute;
right: 100px;
top: 100px;
left: 50%;
width: 1200px;
margin-left: -600px;
top: 200px;
}
#PlayersList {
position: absolute;
left: 200px;
}
#ChasersList {
position: absolute;
left: 800px;
}
ul {
list-style-type: square;
margin: 0px;
padding-left: 30px;
}
#buzzer {
position: relative;
z-index: 1000;
}
#buzzerOptions img {
@@ -35,3 +58,19 @@ a, a:visited {
top: 0px;
left: 20px;
}
@media (max-width: 576px) {
#userListPanel {
top: 80px;
width: 500px;
margin-left: -250px;
font-size: 15px;
}
#PlayersList {
left: 0px;
}
#ChasersList {
left: 350px;
}
}