Ajout d'un overlay wager¶

Cet overlay a été conçu pour fonctionner avec le service StreamElements et son Chatbot.

Cet overlay est composé :

de l'avatar de la chaîne Twitch, désactivable par le panneau de configuration de l'overlay sur streamlements.com
d'un titre (zone blanche), désactivable et éditable par le panneau de configuration de l'overlay sur streamlements.com
d'un entête (zone noire) avec des informations sur le tournoi :
- CP (optionnel)
- Bracket en cours
- Round
- et format BO
d'une zone affichant 2 compteurs : win (victoires) et loss (défaites)

Mise en place¶

Partie Dashboard¶

Se connecter : https://streamelements.com/
Créer les compteurs
- Aller dans Dashboard > Chatbot > Counters : https://streamelements.com/dashboard/bot/counters
- Ajouter les compteurs suivants avec une valeur par défaut :
  - mc_bracket
  - mc_round
  - mc_bo
  - mc_cp
  - mc_cp_unit
  - mc_loss
  - mc_win
Désactiver les modules Chatbot inutiles
- Aller dans Dashboard > Chatbot > Modules : https://streamelements.com/dashboard/bot/modules
Désactiver les commandes par défaut inutiles
- Aller dans Dashboard > Chatbot > Chat Commands > Default commands : https://streamelements.com/dashboard/bot/commands/default
Commandes de chat à définir
- Aller dans Dashboard > Chatbot > Chat Commands > Custom commands : https://streamelements.com/dashboard/bot/commands/custom
  - mc : (affiche dans le chat l'état actuel du match : Round, BO, win/loss : attention round 10 = SF, round 11 = Finale)
    - Réponse : Dire
    - Niveau d'utilisateur : Tous
    - Texte de réponse : Match count (Round $(getcount mc_round) BO$(getcount mc_bo)): $(getcount mc_win) - $(getcount mc_loss)
  - mc_reset : (permet de définir les counters win et loss en une seule commande)
    - Réponse : Murmurer
    - Niveau d'utilisateur : Modérateur
    - Texte de réponse : Match count (Round $(getcount mc_round) BO$(getcount mc_bo)) reset: $(count mc_win 0) - $(count mc_loss 0)
    - Paramètres avancés
      - Masquer la commande des pages publiques : coché
      - Rechargement par utilisateur : 1
      - Rechargement global : 1
  - mc_bo : (permet de définir le BO (donc mettre 1, 3 ou 5))
    - Réponse : Murmurer
    - Niveau d'utilisateur : Modérateur
    - Texte de réponse : Match Best Of $(count mc_bo ${1})
    - Paramètres avancés
      - Masquer la commande des pages publiques : coché
      - Rechargement par utilisateur : 1
      - Rechargement global : 1
  - mc_round : (permet de définir le Round (donc mettre de 1 à 9, 10 pour SF ou 11 pour Finale))
    - Réponse : Murmurer
    - Niveau d'utilisateur : Modérateur
    - Texte de réponse : Current round: $(count mc_round ${1})
    - Paramètres avancés
      - Masquer la commande des pages publiques : coché
      - Rechargement par utilisateur : 1
      - Rechargement global : 1
  - mc_cp : (permet de définir le CP)
    - Réponse : Murmurer
    - Niveau d'utilisateur : Modérateur
    - Texte de réponse : Tourney CP set to $(count mc_cp ${1})
    - Paramètres avancés
      - Masquer la commande des pages publiques : coché
      - Rechargement par utilisateur : 1
      - Rechargement global : 1
  - mc_cp_unit : (permet de définir l'unité monétaire du CP par son numéro (1=Euros, Autre=Dollars))
    - Réponse : Murmurer
    - Niveau d'utilisateur : Modérateur
    - Texte de réponse : CP unit is set to $(count mc_cp_unit ${1})
    - Paramètres avancés
      - Masquer la commande des pages publiques : coché
      - Rechargement par utilisateur : 1
      - Rechargement global : 1
  - mc_bracket : (permet de définir un passage dans le Bracket par son numéro (1=Winner, autre=Loser))
    - Réponse : Murmurer
    - Niveau d'utilisateur : Modérateur
    - Texte de réponse : Bracket set to $(count mc_bracket ${1})
    - Paramètres avancés
      - Masquer la commande des pages publiques : coché
      - Rechargement par utilisateur : 1
      - Rechargement global : 1
  - mc_wb : (permet de définir un passage en Winner Bracket)
    - Réponse : Murmurer
    - Niveau d'utilisateur : Modérateur
    - Texte de réponse : Bracket set to $(count mc_bracket 1)
    - Paramètres avancés
      - Masquer la commande des pages publiques : coché
      - Rechargement par utilisateur : 1
      - Rechargement global : 1
  - mc_lb : (permet de définir un passage en Loser Bracket)
    - Réponse : Murmurer
    - Niveau d'utilisateur : Modérateur
    - Texte de réponse : Bracket set to $(count mc_bracket 2)
    - Paramètres avancés
      - Masquer la commande des pages publiques : coché
      - Rechargement par utilisateur : 1
      - Rechargement global : 1
  - mc_set : (permet de définir les counters win et loss en une seule commande)
    - Réponse : Murmurer
    - Niveau d'utilisateur : Modérateur
    - Texte de réponse : New match count (Round $(getcount mc_round) BO$(getcount mc_bo)): $(count mc_win ${1}) - $(count mc_loss ${2})
    - Paramètres avancés
      - Masquer la commande des pages publiques : coché
      - Rechargement par utilisateur : 1
      - Rechargement global : 1

Partie Overlay¶

Aller dans Outils de streaming > Overlays : https://streamelements.com/dashboard/overlays
Ajouter un overlay de 1080p (résolution courante pour du streaming) avec un nom parlant ("wager" par exemple)
Ajouter un widget de type Custom widget (Static / custom > Custom widget)
Sélectionner le nouveau widget et cliquer sur le menu Layers
Sous l'intitulé "Custom widget 1", vous devriez avoir 3 sous-menu : "Settings", "Position, size and style" et "animation settings"
Cliquer sur "Position, size and style" pour développer le sous-menu
Mettre les settings suivants :
- Width: 400 (si vous choisissez le thème vertical, vous pourrez réduire la valeur)
- Height: 400
- Top: 0
- Left: 0
Cliquer sur le sous-menu "Settings" maintenant pui sle bouton "Open Editor"
Vider les contenus des 5 onglets : HTML, CSS, JS, FIELDS et data

Mettre les nouveaux contenus suivants dans les onglets correspondants

Contenu à copier-coller

HTMLCSSJSFIELDSDATA

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<!-- 
/* 
 * @author vignemail1+wager-widget@gmail.com
 * @version 1.1
 */
-->
<div class="main-container theme-{{theme}}">
  <!-- AVATAR block: IMAGE --> 
  <div id="mc-logo">
    <img id="mc-logo-img" src="" alt="" />
  </div>
  <div id="mc">
    <!-- TITLE block: TITRE -->
    <div id="mc-title" class="{{titleTextAlign}}">{{title}}</div>
    <div id="mc-header">
      <!-- HEADER block: CP CP-UNIT SEP BRACKET ROUND BO -->
      <span id="mc-cp"></span>
      <span id="mc-cp-unit"></span>
      <span id="mc-cp-sep">/</span> 
      <span id="mc-bracket"></span>
      <span id="mc-round"></span>
      <span id="mc-bo"></span>
    </div>
    <div id="mc-win-loss">
      <!-- WIN-LOSS block: WIN-LOSS -->
      <span id="mc-win"></span>
      <span id="mc-loss"></span>
    </div>
  </div>
</div>

/* 
* @author vignemail1+wager-widget@gmail.com
* @version 1.1
*/

/* common */
.text-left {
  text-align: left;
  justify-content: left;
}
.text-center {
  text-align: center;
  justify-content: center;
}
.text-right {
  text-align: right;
  justify-content: right;
}

/* default them */
.main-container.theme-default {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  font-size: 1.2rem;
  font-family: sans-serif;
  text-align: center;
  color: white;
  max-width: 400px;
  align-items: center;
}


.main-container.theme-default #mc-logo,
.main-container.theme-default #mc-title {
  display: none;
}
.main-container.theme-default #mc-logo.show,
.main-container.theme-default #mc-title.show
{
  display: flex;
}
.main-container.theme-default #mc-cp,
.main-container.theme-default #mc-cp-unit,
.main-container.theme-default #mc-cp-sep {
  display: none;
}
.main-container.theme-default #mc-cp.show,
.main-container.theme-default #mc-cp-unit.show,
.main-container.theme-default #mc-cp-sep.show {
  display: inline;
}
.main-container.theme-default #mc-logo {
  display: none;
}
.main-container.theme-default #mc-logo.show {
  display: flex;
}
.main-container.theme-default #mc-logo img {
  display: flex;
  max-height: 4rem;
}
.main-container.theme-default #mc {
  display: flex;
  flex-direction: column;
  flex-grow: 10;
}
.main-container.theme-default #mc-title {
  display: none;
  color: {{titleTextColor}}; /* black */
  background-color: {{titleBgColor}}; /* white opacity 80% */
}
.main-container.theme-default #mc-header {
  background-color: {{headerBgColor}};
  color: {{headerTextColor}};
  display: inline;
  flex-direction: row;
  justify-content: space-around;
}

.main-container.theme-default #mc-win-loss {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 1.7rem;
}
.main-container.theme-default #mc-win {
  background-color: {{winBgColor}};
  flex-grow: 1;
}
.main-container.theme-default #mc-loss {
  background-color: {{lossBgColor}};
  flex-grow: 1;
}

/* vertical theme */

.main-container.theme-vertical {
  display: flex;
  max-width: 400px;
  flex-direction: row;
  flex-grow: 1;
  font-size: 1.2rem;
  font-family: sans-serif;
  text-align: center;
  color: white;
  align-items: center;
}

.main-container.theme-vertical #mc-logo,
.main-container.theme-vertical #mc-cp,
.main-container.theme-vertical #mc-cp-unit,
.main-container.theme-vertical #mc-cp-sep {
  display: none;
}
.main-container.theme-vertical #mc-logo.show,
.main-container.theme-vertical #mc-title.show {
  display: flex;
}
.main-container.theme-vertical #mc-cp.show,
.main-container.theme-vertical #mc-cp-unit.show,
.main-container.theme-vertical #mc-cp-sep.show {
  display: inline;
}
.main-container.theme-vertical #mc-logo img {
  display: flex;
  max-height: 4rem;
}
.main-container.theme-vertical #mc {
  display: flex;
  flex-direction: column;
  flex-grow: 10;
}
.main-container.theme-vertical #mc-title {
  display: none;
  max-width: 100%;
  color: {{titleTextColor}}; /* black */
  background-color: {{titleBgColor}}; /* white */
}
.main-container.theme-vertical #mc-header {
  background-color: {{headerBgColor}};
  color: {{headerTextColor}};
  display: inline;
  flex-direction: row;
  justify-content: space-around;
}

.main-container.theme-vertical #mc-win-loss {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.7rem;
}
.main-container.theme-vertical #mc-win {
  background-color: {{winBgColor}};
  flex-grow: 1;
}
.main-container.theme-vertical #mc-loss {
  background-color: {{lossBgColor}};
  flex-grow: 1;
}

/* 
 * @author vignemail1+wager-widget@gmail.com
 * @version 1.1
 */
/* update the win counter HTML field */
function updateMC_win(value) {
    $("#mc-win").html(value);
}

/* update the loss counter HTML field */
function updateMC_loss(value) {
    $("#mc-loss").html(value);
}

/* update the Best Of counter HTML field */
function updateMC_bo(value) {
    $("#mc-bo").html("BO" + value);
}

/* update the CP counter HTML field */
function updateMC_cp(value) {
    $("#mc-cp").html("CP " + value);
}

/* update the CP unit HTML field */
function updateMC_cp_unit(value) {
    txt = "$";
    if (value === 1) {
        txt = "€";
    }
    $("#mc-cp-unit").html(txt);
}

/* update the current bracket HTML field */
function updateMC_bracket(value) {
    txt = "LB";
    if (value === 1) {
        txt = "WB";
    }
    $("#mc-bracket").html(txt);
}

/* update the round counter HTML field */
function updateMC_round(value) {
    round = value;
    txt = "R" + round;
    if (round === 10) {
        txt = "SF";
    } else if (round === 11) {
        txt = "Finale";
    }
    $("#mc-round").html(txt);
}

/* On widget load, update all HTML fields with appropriate settings and counter values */
window.addEventListener("onWidgetLoad", function(obj) {
    const fieldData = obj.detail.fieldData;
    showTitle = fieldData["showTitle"];
    showAvatar = fieldData["showAvatar"];
    showCP = fieldData["showCP"];
    title = fieldData["title"];
    if (title == '') {
      $("#mc-title").html('&nbsp;');
    }

    // Fetch the Twitch channel avatar url
    $("#mc-logo-img").attr("src", obj.detail.channel.avatar);
    // Do we show the avatar image ?
    $("#mc-logo").toggleClass("show", showAvatar);
    // Do we show the title header ?
    $("#mc-title").toggleClass("show", showTitle);
    $("#mc-cp").toggleClass("show", showCP);
    $("#mc-cp-unit").toggleClass("show", showCP);
    $("#mc-cp-sep").toggleClass("show", showCP);

    // GET mc_win counter
    SE_API.counters.get("mc_win").then((counter) => {
        updateMC_win(counter.count);
    });

    // GET mc_loss counter
    SE_API.counters.get("mc_loss").then((counter) => {
        updateMC_loss(counter.count);
    });

    // GET mc_bo counter
    SE_API.counters.get("mc_bo").then((counter) => {
        updateMC_bo(counter.count);
    });

    // GET mc_cp counter
    SE_API.counters.get("mc_cp").then((counter) => {
        updateMC_cp(counter.count);
    });

    // GET mc_cp_unit counter
    SE_API.counters.get("mc_cp_unit").then((counter) => {
        updateMC_cp_unit(counter.count);
    });

    // GET mc_bracket counter
    SE_API.counters.get("mc_bracket").then((counter) => {
        updateMC_bracket(counter.count);
    });

    // GET mc_round counter
    SE_API.counters.get("mc_round").then((counter) => {
        updateMC_round(counter.count);
    });
});

/* When receiving an event (counter update, ...) */
window.addEventListener("onEventReceived", function(obj) {
    const listener = obj.detail.listener;
    const data = obj.detail.event;

    /* If event is of type bot:counter */
    if (listener === "bot:counter") {
        /* update the matching HTML field */
        if (data.counter === "mc_win") {
            updateMC_win(data.value);
        }
        if (data.counter === "mc_loss") {
            updateMC_loss(data.value);
        }
        if (data.counter === "mc_bo") {
            updateMC_bo(data.value);
        }
        if (data.counter === "mc_cp") {
            updateMC_cp(data.value);
        }
        if (data.counter === "mc_cp_unit") {
            updateMC_cp(data.value);
        }
        if (data.counter === "mc_bracket") {
            updateMC_bracket(data.value);
        }
        if (data.counter === "mc_round") {
            updateMC_round(data.value);
        }
    }
});

{
  "widgetName": {
    "type": "hidden",
    "value": "Wager widget",
    "group": "Others"
  },
  "widgetAuthor": {
    "type": "hidden",
    "value": "vignemail1+wager-widget@gmail.com",
    "group": "Others"
  },
  "theme":{
    "type": "dropdown",
    "label": "Theme",
    "value": "default",
    "options" : {
      "default": "default",
      "vertical": "vertical"
    },
    "group": "Others"
  },
  "showAvatar": {
    "type": "checkbox",
    "label": "show channel avatar",
    "default": true,
    "value": true,
    "group": "Others"
  },
  "title": {
    "type": "text",
    "label": "title",
    "group": "Title"
  },
  "showTitle": {
    "type": "checkbox",
    "label": "show title",
    "default": true,
    "value": true,
    "group": "Title"
  },
  "titleTextAlign":{
    "type": "dropdown",
    "label": "Title text alignment",
    "value": "text-left",
    "options" : {
      "text-left": "left",
      "text-center": "center",
      "text-right": "right"
    },
    "group": "Title"
  },
  "showCP": {
    "type": "checkbox",
    "label": "show CP text",
    "default": true,
    "value": true,
    "group": "Header"
  },
  "titleTextColor": {
    "type": "colorpicker",
    "label": "Title Text color",
    "value": "rgba(0, 0, 0, 1)",
    "group": "Title"
  },
  "titleBgColor": {
    "type": "colorpicker",
    "label": "Title background color",
    "value": "rgba(255, 255, 255, 1)",
    "group": "Title"
  },
  "headerTextColor": {
    "type": "colorpicker",
    "label": "Header text color",
    "value": "rgba(255, 255, 255, 1)",
    "group": "Header"
  },
  "headerBgColor": {
    "type": "colorpicker",
    "label": "Header background color",
    "value": "rgba(0, 0, 0, 1)",
    "group": "Header"
  },
  "winBgColor": {
    "type": "colorpicker",
    "label": "Win background color",
    "value": "rgba(0, 160, 0, 1)",
    "group": "Scores"
  },
  "lossBgColor": {
    "type": "colorpicker",
    "label": "Loss background color",
    "value": "rgba(255, 0, 0, 1)",
    "group": "Scores"
  }
}

{}

A la mise en place initiale il convient de mettre {} comme valeur mais par la suite vous verrez les valeurs sélectionnées de votre configuration.
DATA contient donc vos choix de configuration.

Pensez à bien faire "Done" pour chaque onglet
Pensez à cliquer sur "Save" en haut à droite pour enregistrer les modifications de l'overlay
Rafraîchir la fenêtre du navigateur (StreamElements souffre d'un défaut de mise à jour en temps-réel) et recontrôler les configurations faites sur l'overlay
Copier le lien de l'overlay avec le bouton en forme d'un maillon de chaîne

Partie OBS¶

Aller sur la scène qui vous intéresse
Ajouter une source navigateur web et ajouter les paramètres suivants :
- url: l'url que vous avez copié à la fin de la configuration de l'overlay
- height: 400
- width: 400
- Disable when inactive : coché

Utilisation avec le chat¶

Commandes de chat donc compatible StreamDeck

Les streamdeck permettent d'écrire dans le chat donc il est possible de créer un dossier sur le streamdeck avec un jeu de touches pour réaliser les actions génériques

Initier un nouveau tournoi¶

Vous commencez généralement le tournoi en Winner Bracket, Round 1 et en BO3 avec un Match Count de 0 - 0, donc dans le chat de la chaîne tapez :

!mc_wb
!mc_bo 3
!mc_round 1
!mc_reset

Commandes type en cours de tournoi¶

Commandes modo et streameur¶

!mc_set +1 +0 : ajoute 1 au compteur win (vert par défaut)
!mc_set +0 +1 : ajoute 1 au compteur loss (rouge par défaut)
!mc_set -1 +0 : retire 1 au compteur win (vert par défaut)
!mc_set +0 -1 : retire 1 au compteur loss (rouge par défaut)
!mc_set 0 0 ou !mc_reset : met à 0 les compteurs win et loss
!mc_set x y : définit les compteurs win (x) et loss (y)
!mc_bo 1 ou !mc_bo 3 ou !mc_bo 5 : met respectivement en BO1, BO3 et BO5
!mc_round x avec :
- x = valeur du round (1 à 9)
- ou +1 pour ajouter 1
- ou -1 pour retirer 1
- Les valeurs 10 et 11 sont respectivement SF et Finale
!mc_lb: mettre en Loser Bracket
!mc_wb: mettre en Winner bracket
!mc_cp xxx: définir la valeur entière du CP à xxx dans l'unité monétaire du CP
!mc_cp_unit x: change l'unité monétaire du CP (1 = euros, autres = dollars)

Commandes par streamdeck¶

Il est tout à fait possible de créer des touches de streamdeck, dans un dossier par exemple, afin de réaliser les actions et éviter les erreurs de frappes.

Streamdeck wager

Commande publique¶

!mc: retourne la version texte en message dans le chat

Warning

la version dans le chat ne sait pas retourner SF ou Finale lorsque c'est les round 10 et 11 respectivement

Exemples:

Match count (Round 1 BO3): 0 - 1 : Round 1

Match count (Round 10 BO3): 1 - 1 : Semi-Finale

Match count (Round 11 BO3): 1 - 1 : Finale