Video Tutorial - Advanced Scripting and Coding

[Jaxel]

The code I used in this video, is available below.

Package CSS:

body
{
    color: white;
    font-family: Tahoma;
    text-shadow: 2px 2px black;
    font-size: 24px;
}

.colorB { background: var(--border-color); }
.color1 { background: var(--main-color1); }
.color2 { background: var(--main-color2); }
.color3 { background: var(--main-color3); }

.slow { transition: all 0.50s ease-out; }
.fast { transition: all 0.25s ease-in; }

Package JS:

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

Page HTML:

<div class="scores s1 color2 slow hidden" id="players_1s">0</div>
<div class="scores s2 color2 slow hidden" id="players_2s">0</div>

<div class="players p1 color1 slow hidden" id="players_1">one</div>
<div class="players p2 color1 slow hidden" id="players_2">two</div>

Page CSS:

.players
{
    position: absolute;
    top: 0;
    width: 600px;
    height: 40px;
    line-height: 40px;
    text-align: center;

    clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
}
.players.p1 { left: 300px; }
.players.p2 { right: 300px; }

.scores
{
    position: absolute;
    top: 0;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;

    clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);
}
.scores.s1 { left: 230px; }
.scores.s2 { right: 230px; }

.hidden { top: -40px !important; }

Page JS: (the code is broken in the video, I didn't notice it)

if ($('#players_1').text() != docData['players_1'] ||
    $('#players_2').text() != docData['players_2'] )
{
    $('body')
        .queue(elemHide('.scores')).delay(1000)
        .queue(elemHide('.players')).delay(1000)
        .queue(elemUpdate()).delay(1000)
        .queue(elemShow('.players')).delay(1000)
        .queue(elemShow('.scores'));
}
else if ($('#players_1s').text() != docData['players_1s'] ||
    $('#players_2s').text() != docData['players_2s'] )
{
    $('body')
        .queue(elemHide('.scores')).delay(1000)
        .queue(elemUpdate()).delay(1000)
        .queue(elemShow('.scores'));
}