tsvaufderhoehe
New member
TSV Aufderhöhe 1877 Stream
TSV Aufderhöhe streams its handball-matches live due corona on facebook and twitch. Streaming-Software: OBS Studio. For the scoreboard we use 8wr.io
Links: https://www.facebook.com/tsvaufderhoehe/
Example:
The scoreboard should be improved and extended from game to game (time penalties, additional information, ...). I am happy about your feedback, suggestions, code optimizations, etc.
Showcase:
Admin MAIN:
2 Pages - Match & Spielzeit (Time)
Package --> CSS
Package --> JS
PAGE Match:
PAGE MATCH --> HTML
PAGE MATCH --> CSS
PAGE MATCH --> JS
PAGE --> Spielzeit (time)
PAGE SPIELZEIT --> HTML
PAGE SPIELZEIT --> CSS
PAGE SPIELZEIT --> JS
TSV Aufderhöhe streams its handball-matches live due corona on facebook and twitch. Streaming-Software: OBS Studio. For the scoreboard we use 8wr.io
Links: https://www.facebook.com/tsvaufderhoehe/
Example:
The scoreboard should be improved and extended from game to game (time penalties, additional information, ...). I am happy about your feedback, suggestions, code optimizations, etc.
Showcase:
Admin MAIN:
2 Pages - Match & Spielzeit (Time)
Package --> CSS
CSS:
body
{
font-family: Arial;
font-weight: 700;
}Package --> JS
JavaScript:
function elemHide(elem) {
return function (next) {
$(elem).addClass('fast hidden');
next();
}
}
function elemShow(elem) {
return function (next) {
$(elem).removeClass('fast hidden');
next();
}
}
function elemUpdate() {
return function (next) {
for (var prop in docData) {
$('#'+prop).text(docData[prop]);
}
next();
}
}
var countdown = null;
var stopwatch = null;PAGE Match:
PAGE MATCH --> HTML
HTML:
<div style="margin-top: 10px;">
<div class="scoresgesamt">
<div class="fields">
<div class="players p1 float" style="text-align: right;"><span id="players_1">Heim</span> </div>
<div class="scores float" style="text-align: center;"><span id="players_1s">0</span><span id="spielstandtrenner"> : </span><span id="players_2s">0</span></div>
<div class="players p2 float" style="text-align: left;"> <span id="players_2">Gast</span></div>
</div>
</div>
</div>PAGE MATCH --> CSS
CSS:
.scoresgesamt
{
margin: auto;
width: 600px;
background: rgb(234,232,236);
background: linear-gradient(180deg, rgba(234,232,236,1) 0%, rgba(225,224,225,1) 40%, rgba(196,196,196,1) 60%, rgba(207,206,207,1) 80%, rgba(214,212,218,1) 100%);
border-radius: 6px;
border: Solid 2px #BABABA;
text-align: center;
height: 30px;
line-height: 30px;
}
.players
{
width: 240px;
}
.scores
{
width: 120px;
background: rgb(124,127,169);
background: linear-gradient(180deg, rgba(124,127,169,1) 0%, rgba(42,56,98,1) 40%, rgba(32,47,89,1) 60%, rgba(69,79,121,1) 80%, rgba(124,127,169,1) 100%);
color: white;
}
.float
{
float: left;
}PAGE MATCH --> JS
JavaScript:
if ($('#players_1').text() != docData['players_1'] ||
$('#players_2').text() != docData['players_2'] )
{
$('body')
.queue(elemHide('.scores')).delay(1)
.queue(elemHide('.players')).delay(1)
.queue(elemUpdate()).delay(1)
.queue(elemShow('.players')).delay(1)
.queue(elemShow('.scores'));
}
else if ($('#players_1s').text() != docData['players_1s'] ||
$('#players_2s').text() != docData['players_2s'] )
{
$('body')
.queue(elemHide('.scores')).delay(1)
.queue(elemUpdate()).delay(1)
.queue(elemShow('.scores'));
}PAGE --> Spielzeit (time)
PAGE SPIELZEIT --> HTML
HTML:
<div style="margin-top: 42px;">
<div class="timegesamt">
<div class="stopwatch"></div>
</div>
</div>PAGE SPIELZEIT --> CSS
CSS:
.timegesamt
{
margin: auto;
width: 116px;
background: rgb(234,232,236);
background: linear-gradient(180deg, rgba(234,232,236,1) 0%, rgba(225,224,225,1) 40%, rgba(196,196,196,1) 60%, rgba(207,206,207,1) 80%, rgba(214,212,218,1) 100%);
border: Solid 2px #BABABA;
text-align: center;
height: 20px;
line-height: 20px;
font-size: 11pt;
}PAGE SPIELZEIT --> JS
JavaScript:
clearInterval(countdown);
clearInterval(stopwatch);
$('.stopwatch').text(calcTimer(docData['watch_o']));
if (docData['watch_s'] > 0)
{
stopwatch = setInterval(function()
{
time = new Date().getTime() - parseInt(docData['watch_e']) + parseInt(docData['watch_o']);
$('.stopwatch').text(calcTimer(time));
}, 100);
}
function calcTimer(time)
{
let neg = (time < 0) ? '- ' : '';
time = Math.abs(time / 1000);
hours = (Math.floor(time / 3600)).toString().padStart(2, '0');
minutes = (Math.floor(time % 3600 / 60)).toString().padStart(2, '0');
seconds = (time % 60).toFixed(0).toString().padStart(2, '0');
return neg + minutes + ':' + seconds;
}