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

Added font and did UI adjustments

Browse Source
This commit is contained in:
Samuel Kent
2022-12-29 09:20:58 +11:00
parent 6b3507cd18
commit c9d384015a
9 changed files with 48 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+1 -1
View File
@@ -112,7 +112,7 @@ app.get("/browserFunctions.js", (request, response) => {
}); });
//all files in these folders can be accessed with a GET request of the filename //all files in these folders can be accessed with a GET request of the filename
let assetFolders = ["styles","pages","images","audio"]; let assetFolders = ["styles","pages","images","audio","fonts"];
assetFolders.forEach((folderName) => { assetFolders.forEach((folderName) => {
let folderContents = fs.readdirSync(folderName); let folderContents = fs.readdirSync(folderName);
folderContents.forEach((fileName) => { folderContents.forEach((fileName) => {
fonts/Twoson.eot
BIN
View File
Binary file not shown.
fonts/Twoson.ttf
BIN
View File
Binary file not shown.
fonts/Twoson.woff
BIN
View File
Binary file not shown.
fonts/Twoson.woff2
BIN
View File
Binary file not shown.
pages/home.html
+2 -1
View File
@@ -3,6 +3,7 @@
<head> <head>
<title>The cooler buzzer website</title> <title>The cooler buzzer website</title>
<link rel="stylesheet" href="styleMain.css"> <link rel="stylesheet" href="styleMain.css">
<!-- <link rel="preload" href="Twoson.woff2" as="font" type="font/woff2" crossorigin> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.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="https:/socket.io/socket.io.js"></script> -->
<script> <script>
@@ -41,7 +42,7 @@
<br> <br>
Your name, please: Your name, please:
<br> <br>
<input type="text" id="userName" placeholder="User name"> <input type="text" id="userName" placeholder="User name" style="margin-top: 10px; width: 240px;">
<br> <br>
<br> <br>
Then pick a team: Then pick a team:
pages/host.html
+4 -3
View File
@@ -3,6 +3,7 @@
<head> <head>
<title>The cooler buzzer website</title> <title>The cooler buzzer website</title>
<link rel="stylesheet" href="styleMain.css"> <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="browserFunctions.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.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 src="http:/socket.io/socket.io.js"></script>
@@ -55,12 +56,12 @@
<p id="currentTeam"></p> <p id="currentTeam"></p>
Progress: Progress:
<p id="currentScore"></p> <p id="currentScore"></p>
<button id="plus0" type="button" style="width: 226px; height: 50px; margin: 5px;">+0 Points</button> <button id="plus0" type="button" style="width: 230px; height: 50px; margin: 5px;">+0 Points</button>
<br> <br>
<button id="plus1" type="button" style="width: 110px; height: 50px;">+1 Point</button> <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> <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> <p style="font-size: 11px; margin: 5px;">(all points buttons clear buzzers)</p>
<br> <!-- <br> -->
<p id="firstBuzz"></p> <p id="firstBuzz"></p>
<br><br><br> <br><br><br>
<button id="unregisterUsers" type="button" style="height: 30px;">Remove all players</button> <button id="unregisterUsers" type="button" style="height: 30px;">Remove all players</button>
pages/play.html
+2
View File
@@ -3,9 +3,11 @@
<head> <head>
<title>The cooler buzzer website</title> <title>The cooler buzzer website</title>
<link rel="stylesheet" href="styleMain.css"> <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="browserFunctions.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.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 src="http:/socket.io/socket.io.js"></script>
<script> <script>
$(document).ready(function() { $(document).ready(function() {
var socket = io(); var socket = io();
styles/styleMain.css
+39 -5
View File
@@ -1,10 +1,21 @@
body { body {
font-family: 'Twoson';
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
background-color: rgb(23, 23, 23); background-color: rgb(23, 23, 23);
font-size: 25px; font-size: 25px;
padding: 20px 60px; padding: 20px 60px;
} }
button {
font-family: 'Twoson';
}
input {
font-family: 'Twoson';
}
a, a:visited { a, a:visited {
color: rgb(199, 147, 255); color: rgb(199, 147, 255);
} }
@@ -22,13 +33,22 @@ a, a:visited {
} }
#PlayersList { #PlayersList {
/* font-family: "Lucida Console"; */
position: absolute; position: absolute;
left: 200px; left: 110px;
border: dashed;
width: 350px;
min-height: 130px;
padding-left: 5px;
} }
#ChasersList { #ChasersList {
position: absolute; position: absolute;
left: 800px; left: 724px;
border: dashed;
width: 350px;
min-height: 130px;
padding-left: 5px;
} }
ul { ul {
@@ -71,12 +91,26 @@ ul {
top: 80px; top: 80px;
width: 500px; width: 500px;
margin-left: -250px; margin-left: -250px;
font-size: 15px; font-size: 11px;
} }
#PlayersList { #PlayersList {
left: 10px; left: 0px;
width: 120px;
} }
#ChasersList { #ChasersList {
left: 350px; left: 370px;
width: 120px;
} }
} }
@font-face {
font-family: 'Twoson';
src: url('Twoson.eot');
src: url('Twoson.eot?#iefix') format('embedded-opentype'),
url('Twoson.woff2') format('woff2'),
url('Twoson.woff') format('woff'),
url('Twoson.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}