Basic graphical scoreboard

Stardust1 · Nov 7, 2024

Hi all,

I would like to share with you my version of a basic scoreboard. It looks like this:

It uses a PNG file as background image and includes animations for the player names and scores. I have used the following resources to compile this:

a) Jaxel's guides: http://8wr.io/forums/guides-tutorials.3/

b) The scoreboard showcase by tsvaufderhoehe :http://8wr.io/threads/tsv-aufderhoehe-sport-livestream-scoreboard.76/

c) The scoreboard image is part of the cool scoreboard tool for OBS by Deviaphan: https://obsproject.com/forum/resources/versus-Ⓡevolution-scoreboard.1339/

I will attach the scoreboard PNG file to this post.

INSTALLATION:
----------------
1) Go to your package, open the "Package controls" and click "Add page". Define a title at your conveniance and set the type to "Field collection". Click "Save".

2) Click on "Add field", set the following values and click "Save":
- "Unique key": players
- "Title": Players
- "Type": Scoreboard
- "Show clear/reset buttons": yes (ticked)
- "Rows": 2

3) In the "Package controls", add the attached code in the respective sections (CSS, JS).

4) In the "Page controls", add the attached code in the respective sections (HTML, CSS, JS).

5) On the left, click on "Image libarary". Upload the attached blank scoreboard image (PNG) to the image library and copy the link to the uploaded image to the clipboard.

6) Add the link at the marked place in the CSS section of the "Page controls".

7) Go to the "Page controls" and copy the content of the "Browser source" to a new browser tab. You should be able to control the scoreboard via the page you created in point 1).

8) Good luck, and please remember: I am not a developer and I have compiled this in my free time. Feel free to change/improve/ignore this code. ;-) Thanks!

CODE:
-------
Package CSS:

Code:

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

Package JS:

Code:

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:

Code:

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
</head>

<body>
    <div class="scoreboard-container">
        <div class="players slow hidden" id="players_1">Home</div>
        <div class="scores p1-score slow hidden" id="players_1s">0</div>
        <div class="score-separator">&nbsp;</div> <!-- Adjust depending on the scoreboard design -->
        <div class="scores p2-score slow hidden" id="players_2s">0</div>
        <div class="players slow hidden" id="players_2">Guest</div>
    </div>   
</body>

Page CSS:

Code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    color: #ffffff;
    font-family: "Figtree", "Arial", sans-serif;
    font-weight: 400;
}

.hidden { font-size: 0 !important; }

.scoreboard-container {
    display: flex;
    width: 100%;
    height: 200px;
    /* Put your link to the scoreboard on the next line in the round brackets */
    background-image: url(..insert link here..);
    background-size: contain;
    background-position: 50% 50%; /* first value: move horizontally */
    background-repeat: no-repeat;
    justify-content: center;
    /*border: 1px solid red;  Debugging */
}

.players {
    width: 400px;
    padding-top: 90px;
    text-align: center;
    font-size: 50px;
    /*border: 1px solid red;  Debugging */
}

.p1-name {
    padding-right: 60px;
}

.p2-name {
    padding-left: 60px;
}

.scores {
    width: 110px;
    padding-top: 60px;
    text-align: center;
    font-size: 80px;
    /*border: 1px solid red;  Debugging */
}

.score-separator {
     width: 20px;
     text-align: center;
    /*border: 1px solid red;  Debugging */
 }

Page JS:

Code:

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

Basic graphical scoreboard

Stardust1

New member

Attachments