Ajout d'un overlay simple counter de mort

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

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 le compteur suivant avec une valeur par défaut deathCounter

• 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 > Commands > Default commands : https://streamelements.com/dashboard/bot/commands/default

• Commandes de chat à définir

  • Aller dans Dashboard > Chatbot > Commands > Custom commands : https://streamelements.com/dashboard/bot/commands/custom

    • death : (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 death counter $(count deathCounter ${1})
      • 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 ("death counter" 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
  • Height: 105
  • Top: 0
  • Left: 0
• Cliquer sur le sous-menu "Settings" maintenant puis le 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

  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  <div class="main-container flex-container">
      <img src="https://toppng.com/uploads/preview/sticker-tete-de-mort-os-noirs-simple-skull-and-cross-bones-11563635779ouav7xeh4r.png"/>
      <span id="counter">{{deathCounter}}</span>
  </div>
  

  .flex-container {
    display: flex;
    background-color: rgba(255,255,255,0.2);
    border-radius: 25px;
  
  }
  .flex-container img {
    width: 64px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
  
  }
  .flex-container #counter {
    font-size: 4em; 
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: white;
    text-shadow: 2px 2px 4px #000000;
  }
  

  /* update the win counter HTML field */
  function updateDeathCounter(value) {
      $("#counter").html(value);
  }
  
  /* On widget load, update all HTML fields with appropriate settings and counter values */
  window.addEventListener("onWidgetLoad", function(obj) {
      const fieldData = obj.detail.fieldData;
  
  
      // GET deathCounter counter
      SE_API.counters.get("deathCounter").then((counter) => {
          updateDeathCounter(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 === "deathCounter") {
              updateDeathCounter(data.value);
          }
      }
  });
  

  {}
  

  {}
  

Commandes type

Commandes modo et streameur

• !death +1 : ajoute 1 au compteur deathCounter
• !death 0 : met à 0 le compteur deathCounter