jappel/scoreboard-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Created main frontend

Browse Source
This commit is contained in:
Julian Appel 2024-04-21 12:55:33 +02:00
parent d8b400c371
commit 43f355765a
5 changed files with 113 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
scoreboard/public/javascripts/index.js Normal file
View File

@ -0,0 +1,23 @@
let wss = "ws://" + window.location.hostname + ":3001"
const socket = io(wss);
socket.on('connected', (message) => {
console.log("Connected");
})
socket.on('timerDurationLeft', (message) => {
console.log(message)
document.getElementById("durationLeft").innerHTML = message;
});
socket.on('timerEnded', (message) => {
console.log(message)
document.getElementById("durationLeft").innerHTML = "STOP";
});
// let minutes = currentTime.setMinutes(6);
// let seconds = currentTime.setSeconds(25);
// document.getElementById("timer").innerHTML = minutes + ":" + seconds;

BIN
scoreboard/public/stylesheets/fonts/Seven Segment.woff Normal file
View File

Binary file not shown.

1
scoreboard/public/stylesheets/seven-segment.css Normal file
View File

@ -0,0 +1 @@
@font-face{font-family:seven segment;font-style:normal;font-weight:400;src:local('Seven Segment'),url('fonts/Seven\ Segment.woff') format('woff')}

54
scoreboard/public/stylesheets/style.css
View File

@ -1,8 +1,60 @@
html, body {
height: 100%
}
body { body {
padding: 50px; /* padding: 50px; */
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
} }
a { a {
color: #00B7FF; color: #00B7FF;
} }
.durationLeft {
font-family: 'Seven Segment', sans-serif;
font-weight: bold;
height: 100%;
font-size: 50vh
}
.score {
font-family: 'Seven Segment', sans-serif;
font-weight: bold;
font-size: 50vh
}
@media ( min-width: 768px ) {
.box-time {
height:25%
}
.durationLeft {
font-size: 18vh
}
.box-etc {
height: 75%
}
}
@media ( min-width: 992px ) {
.box-time {
height:50%
}
.durationLeft {
font-size: 48vh
}
.box-etc {
height: 50%
}
}

38
scoreboard/views/index.hbs
View File

@ -1,2 +1,36 @@
<h1>{{title}}</h1> <!DOCTYPE html>
<p>Welcome to {{title}}</p> <html>
<head>
<title>Counter</title>
<link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/stylesheets/seven-segment.css' />
</head>
<body>
<div class="d-flex flex-column align-items-center justify-content-center box-time" style="background-color:brown; ">
<div id="durationLeft" class="durationLeft">{{ durationLeft }}</div>
</div>
<div class="d-flex flex-sm-wrap flex-md-wrap text-center align-items-center justify-content-around box-etc" style="background-color:blueviolet;">
<div style="background-color:crimson;" class="flex-fill order-sm-1 order-md-1 order-lg-0">
<h1>L<br/>LLLLLLLLLLLLLL<br/>L<br/></h>
</div>
<div style="background-color: darkgreen" class="flex-fill order-sm-0 order-md-0 order-lg-1">
<div id="score" class="score">5:2</div>
</div>
<div style="background-color:coral" class="flex-fill order-sm-2 order-md-2 order-lg-2">
<h1>R<br/>R<br/>RRRRRRRRRRRRR<br/></h>
</div>
</div>
</body>
<script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
<script src="/javascripts/socket.io.min.js"></script>
<script src="/javascripts/moment.js"></script>
<script src="/javascripts/index.js"></script>
</html>