Bagarre & Bricolage & ???

Si vous voulez juste voir mon code, je l'ai mis dans un dépôt git !

Étape 1 - Faire le tri

Bon, c'est cool de vouloir faire un overlay personnalisé, ça peut être un petit plus qui rend le stream sympa et qui démarque, mais avant de faire des jolies choses, il faut voir l'aspect pratique : On veut mettre quoi dessus ?

C'est important : le code ne sera pas le même si on se contente d'afficher les infos de jeu (Chronos de jam, de période, points, équipes et jammeur·euses, etc.), ou si on veut aussi placer des écrans pour les rosters.

Dans mon cas, j'ai décidé de me limiter aux informations de jeu.

J'ai listé :

• Timer de période,
• Timer de jam / inter-jam / timeout,
• Le type de timeout en cours, et qui en est propriétaire,
• Les noms des jammeur·euses,
• Le statut de lead,
• Les totaux de points par équipe,
• Les points par jam,
• Le nombre d'OR disponibles par équipe,
• Le nombre de TT disponibles par équipe.

Étape 2 - Faire le layout

Je sais ce que je veux afficher, donc maintenant je peux le mettre en page.

Perso, j'ai fait directement en HTML et en CSS, avec plein de placeholders partout pour me faire une idée de ce que ça donnerait.

Idéalement, on fait tout ça en responsive design au cas où le stream sortirait dans un format non prévu. Du coup, CSS grid et Flexbox sont vos amis pour sortir facilement une mise en page qui s'adapte comme il faut.

Une fois arrivé·e à un truc à peu-près satisfaisant vient la partie que je redoutais le plus :

Étape 3 - Récupérer les infos de CRG

Globalement sur ce point : La documentation de CRG sera votre meilleure amie.

Je vous encourage chaudement à consulter ces trois pages :

• Custom Screen Creation Tutorial

• Websocket Commands

• Websocket Channels

De mon côté, j'ai procédé comme ça :

Setup

1. Déjà, on créée un dossier (qu'on nomme comme on veut, dans mon cas overlay) dans le dossier html/custom/ de ma version de CRG.
2. Dans ce dossier, je créée tous les fichiers nécessaires : un index.html, un index.js, un index.css et, au besoin, des dossiers ou les fichiers des assets nécessaires (fonts, images...). Si vous avez déjà fait votre layout en HTML et CSS, ça sera donc ces fichiers là en index.html et index.css. On oublie pas de lier le js et le css dans la page html !
3. On met des ID partout sur la page html là où il faudra remplacer les placeholder par des vraies valeurs dynamiques.

On va chercher toutes les valeurs nécessaires

C'est là que c'est plus compliqué.

1. On ouvre index.js, et la première ligne qu'on met dedans, c'est $(initialize);, parce qu'il faut bien lancer tout le bazar qui va suivre.
2. On fait la fonction initialize, qui contiendra les commandes websocket suivantes, qui servent à établir la communication entre notre script et CRG :
   • WS.Connect();
   • WS.AutoRegister();
   • WS.Register();
3. Dans WS.Register();, je met "ScoreBoard.CurrentGame", qui me permet d'aller chercher toutes les infos du scoreboard, puis j'appelle mes fonctions (que je vais expliquer viteuf après).

À la fin de cette étape, chez moi, ça donne ça :

function initialize() {
    WS.Connect();
    WS.AutoRegister(); // These two lines must be present for this script to communicate with the scoreboard.

    WS.Register(
        "ScoreBoard.CurrentGame",
        function gameInfos(k,v) {
            updateJamClock(k,v);
            updatePeriodClock(k,v);
            l(k,v);
            r(k,v);
            colors(k,v);
            lead(k,v);
            scores(k,v);
            timeouts(k,v);
        }
    )

    function updateJamClock(k,v){...}
    function updatePeriodClock(k,v){...}
    // RAJOUTER LE IF STAR PASS ALORS PRENDRE L'ID PIVOT ! 
    function l(k,v) {...}

    function r(k,v) {...}

    function colors(k,v) {...}
    function lead(k,v) {...}

    function scores(k,v) {...}

    function timeouts(k,v) {...}
}

Ok mais ya quoi dans toutes ces fonctions ?

Globalement, la structure est la suivante :

• Je vais chercher quel websocket channel correspond à l'info que je veux, et je met ça dans une variable. Par exemple, je veux savoir qui à le lead :

var r = WS.state["ScoreBoard.CurrentGame.Team(2).Lead"];
var l = WS.state["ScoreBoard.CurrentGame.Team(1).Lead"];

• Je fais des conditions si besoin, par exemple if (r === true) {...}
• Je dis ce qu'il se passe dans chaque cas. ex (notez j'utilise les ID que j'ai mis partout dans mon html pour trifouiller dedans avec le jquery) :

if (r === true) {
    $("#jammername-r").addClass("lead");
    $("#jammername-l").removeClass("lead");
}

Pour les scores par exemple, c'est tout simple :

function scores(k,v) {
    var r = WS.state["ScoreBoard.CurrentGame.Team(2).Score"];
    var l = WS.state["ScoreBoard.CurrentGame.Team(1).Score"];
    var rj = WS.state["ScoreBoard.CurrentGame.Team(2).JamScore"];
    var lj = WS.state["ScoreBoard.CurrentGame.Team(1).JamScore"];
    $("#totalscore-l").html(l);
    $("#jamscore-l").html(lj);
    $("#totalscore-r").html(r);
    $("#jamscore-r").html(rj);
}

En déclinant ce genre de fonctions selon ce que vous voulez afficher, vous devriej arriver à quelque chose sans trop de soucis !

Le mien, ça donne un truc comme ça :

Et le code complet est dans ce dépôt : Dépôt gitlab de mon overlay custom !

Voilà ! Hâte de voir des gens s'y tenter.

Ce tutoriel et tous les tutoriels que je publie sont en domaine public (CC0), vous pouvez les copier, partager, modifier sans attribution nécessaire.