TSV Aufderhöhe - Sport-Livestream Scoreboard

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:
Anzeigetafel.PNG

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:
match.PNG

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>&nbsp;</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;">&nbsp;<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)
time.PNG

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;
}