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

app.js

@@ -1,23 +1,25 @@
 
-// const http = require('http');
-const https = require('https');
+const http = require('http');
+// const https = require('https');
 const express = require('express');
 const app = express();
 const fs = require('fs')
 const { Server } = require("socket.io");
 
 var options = {
-  key: fs.readFileSync('key.pem'),
-  cert: fs.readFileSync('cert.pem')
+  // key: fs.readFileSync('key.pem'),
+  // cert: fs.readFileSync('cert.pem')
 };
 
-const server = https.createServer(options, app);
+const server = http.createServer(options, app);
 const io = new Server(server, {
   maxHttpBufferSize: 1e8
 });
 
 const userMap = new Map();
 let buzzList = [];
+let playerList = [];
+let chaserList = [];
 
 const teamsList = ["Players","Chasers"]
 const teamsScore = [0,0]
@@ -58,6 +60,24 @@ io.on("connection", (socket) => {
     //todo ping test
     io.emit("clearBuzzers", teamsList[currentTeamNumber]);
   });
+
+
+
+  socket.on("registerUser", (userName, teamName) => {
+    console.log("reg");
+    if (teamName == "Players") {
+      if (!playerList.includes(userName)) {
+        playerList.push(userName);
+      }
+    } 
+    else if (teamName == "Chasers") {
+      if (!chaserList.includes(userName)) {
+        chaserList.push(userName);
+      }
+    }
+    io.emit("userListsToClient", playerList, chaserList);
+  });
+
   // socket.emit("playerRoundScoreToClient");
   // socket.emit("chaserRoundScoreToClient");
   // socket.emit("currentTeamToClient");
@@ -80,6 +100,10 @@ app.get("/play", (request, response) => {
   response.sendFile("pages/play.html", {root: __dirname });
 });
 
+app.get("/browserFunctions.js", (request, response) => {
+  response.sendFile("browserFunctions.js", {root: __dirname });
+});
+
 //all files in these folders can be accessed with a GET request of the filename
 let assetFolders = ["styles","pages","images","audio"];
 assetFolders.forEach((folderName) => {

browserFunctions.js

@@ -0,0 +1,30 @@
+function setupBuzzerOptions() {
+    let buzzerOptions = ["Kirbeep","MPYosh","MPDog","MPCat","Wow","Ooh","MarioBoing","TheNumberEight"];
+    buzzerOptions.forEach((buzzerName) => {
+        $("#buzzerOptions").append("<img id='"+buzzerName+"' src='"+buzzerName+".png'>");
+    });
+    return buzzerOptions;
+}
+function userListsToClient(playerList, chaserList) {
+    $("#playerList").html("");
+    $("#chaserList").html("");
+    playerList.forEach((playerName) => {
+        $("#playerList").append("<li>"+playerName+"</li>");
+    });
+    chaserList.forEach((chaserName) => {
+        $("#chaserList").append("<li>"+chaserName+"</li>");
+    });
+}
+
+function gameStateToClient(currentTeam, currentScore) {
+    $("#currentTeam").html(currentTeam);
+    $("#currentScore").html(currentScore);
+}
+
+function buzzListToClient(buzzList, buzzerSound) {
+    //play sound for first buzz in
+    if ($("#buzzList").html() == "") {
+        buzzerSound.play();
+    }
+    $("#buzzList").html(buzzList.join());
+}

cert.pem

@@ -1,20 +0,0 @@
------BEGIN CERTIFICATE-----
-MIIDVTCCAj2gAwIBAgIJANaaPrKhekfHMA0GCSqGSIb3DQEBCwUAMEExCzAJBgNV
-BAYTAkFVMQwwCgYDVQQIDANOU1cxDzANBgNVBAcMBlN5ZG5leTETMBEGA1UEAwwK
-TWFzcGVuZ3VpbjAeFw0yMTExMDgwMzE0NTVaFw0zMTExMDYwMzE0NTVaMEExCzAJ
-BgNVBAYTAkFVMQwwCgYDVQQIDANOU1cxDzANBgNVBAcMBlN5ZG5leTETMBEGA1UE
-AwwKTWFzcGVuZ3VpbjCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBANMm
-T3VPVFEVrDss2i5Ya9jAxWRUbM38XhaDduTSF6aYAxlmZXbFASvNXpAU+5hSU1XJ
-TLdtweTlZvNIs2UlKiG+A/8mykuydcHao8qy5gUbl8i2Ncmq43APQbbWMoMgP3kU
-d6vSTngJtfpJEnKK7V3MtrcQRD0Vy94cLd/sqFA1gNRyD00nAjWRI3tUCgYikt9W
-+GJK5UIGT9W3107Stf/sd5bSeb3eiFUoOFdi72cUeXejGxfsWbgUxAreXHic5ghb
-zUrhiWkTB/jnXMDGGTZ2LuXRXXDReerSXZEblxTwT56yalSX2kwkbSpiCrni8ka7
-/sTCT4CbV6sKuvTUh4ECAwEAAaNQME4wHQYDVR0OBBYEFK62EddLdJaIODQ00EwA
-dxx/YmcpMB8GA1UdIwQYMBaAFK62EddLdJaIODQ00EwAdxx/YmcpMAwGA1UdEwQF
-MAMBAf8wDQYJKoZIhvcNAQELBQADggEBAG+ZN9bmqNtiXnw28lR8ezX/xpzwtPMu
-75/Od5RL8nBo04C8T4R/g0OrhO27LIz26AGQ2wF/GOWs9u4N7d38JMtF3eO7ZVNQ
-yPAUCWp7p+xWrG0FTEcnN6vmcyxWD9umfzNUkxB8BWiwP1u+48TcdrX3h/bHYUAp
-y5GqiKQRuOjQQj3Oc8pmgHp3+UUkzaJVd5n851xLu79AMcZxMzRayN2Xbak6oGME
-WAzH4EFjBrHYimXctG1m/L3xxb7zJZ8Ev+VbpqE3OB0A5DpvzZenwokrNK6MvgRm
-5mFSMXJJU59SGOnwEh1uj3M3GMPjY9zYJPQ0giDipBznmLTTty/NLOE=
------END CERTIFICATE-----

key.pem

@@ -1,28 +0,0 @@
------BEGIN PRIVATE KEY-----
-MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDTJk91T1RRFaw7
-LNouWGvYwMVkVGzN/F4Wg3bk0hemmAMZZmV2xQErzV6QFPuYUlNVyUy3bcHk5Wbz
-SLNlJSohvgP/JspLsnXB2qPKsuYFG5fItjXJquNwD0G21jKDID95FHer0k54CbX6
-SRJyiu1dzLa3EEQ9FcveHC3f7KhQNYDUcg9NJwI1kSN7VAoGIpLfVvhiSuVCBk/V
-t9dO0rX/7HeW0nm93ohVKDhXYu9nFHl3oxsX7Fm4FMQK3lx4nOYIW81K4YlpEwf4
-51zAxhk2di7l0V1w0Xnq0l2RG5cU8E+esmpUl9pMJG0qYgq54vJGu/7Ewk+Am1er
-Crr01IeBAgMBAAECggEAVE15cAbqTS1wBHhV7CcVeAcPSI2Em4FlN2vprlZLZxJO
-Onftjsv9ObXXSYN3KEvGRfwHCz1hKriEsCGYrot2FN6+zcJ5BlwMNAfNWYKv394y
-bcqCEzCNehI9VHiU1lGrxfXsCcf/2GFYLMO7/8uEFe1EDjcKZ7EqIlXx4vOkB9F6
-T3ra4CRmCdsOvcTsWq9Z+beL2+mUEDbuYMTqOcciDOnDrzgtPCSnIii9pg4EcUuO
-naXGBr0PeLZICCCuYM5oHWmcQKlPlKNedAdo4uHVHc4FK3QVQNZ28dUExkZB4/um
-pxWs+urCstU+YFlo15RRnBxyrV1iWcbXpO+sVIAFIQKBgQD/nBD8PF7l2dkv+ate
-ts0fPZIcyThHgdVldbyYe+yrpLBBtjakUPMrO48fGi/IKOMKNajZeH3Xd84rdm/0
-5eRgvwiSww7W3xo/jCFA/So33sODLnmHFoCenqzVp9AgLAqz9OX1aHrqs+pw+5fA
-yrevFlnK4AsqRWRjCjNT/DsWfQKBgQDTeNyjlJg6RjkNCKhQ1YygDxi6TK/rKUwb
-vxD0mRVRIZJrIVHESAQzpfnDaKSFlYCz8m6veBIwFwK1oiQaMG0ZVcDKJwcJrEig
-b2CuiUCAJ6sgtvWGHhcYiloGNMGNT+JukqWxcDwIQOXaZNZeqn7mv53CEmKT+KeD
-RtGPCxtQVQKBgC8oYO3YSX3IekximJ5JxYA9AMb0zMBMkM0+MoRDYL+uC6Kj9mLM
-WICiZV5Mm4InIPQSQEuW8kidXtkf6bnZ7A95TyCcghFcaeBNfxkZW/+gxpteKKem
-nCYniiWE5134IiVfSknDc+H3PYqIsE+uVsMjsX8/ZG/xC3tGN4AIKfKVAoGAA5QW
-/7mi/dF0Y7ES0BNdBtRakcR8cZlITWvlSI5SmwXbaW6t6IljcNBNMq5RomUOQX1H
-vDZm8GNjS1mMDNlm7zfRRFp2twYwUG6yDyIJcmG5dptB+lwF/gdRUKuR3udMKJzY
-qvEAQw9+FD0Cl6WA8jyp2b/f5SsfAoyvPSFt++UCgYEAkiOB6doKixOB5sZzckar
-BTG2iLqYViGOmkdbOzRH2meo7Rzdwf7vuGK8VkzfMCjq40PGMR8u+LCwIZVkr4ky
-+WnM2x4Wekh6hP/N0N8tfVepYf+dxyKiUzcskmYB98Ww6Cq4eQAj5y1RhXi2mnYj
-CpQ0RfV1bB/diZISYLCioPo=
------END PRIVATE KEY-----

pages/home.html

@@ -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

@@ -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

@@ -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>

styles/styleMain.css

@@ -9,10 +9,16 @@ a, a:visited {
     color: rgb(199, 147, 255);
 }
 
-.interface {
+#interface {
     text-align: center;
 }
 
+#userListPanel {
+    position: absolute;
+    right: 100px;
+    top: 100px;
+}
+
 #buzzerOptions img {
     width: 50px;
 }
@@ -21,4 +27,11 @@ a, a:visited {
     position: absolute;
     bottom: 10px;
     left: 10px;
-}
+}
+
+#message {
+    position: absolute;
+    font-size: 15px;
+    top: 0px;
+    left: 20px;
+}