Implementação do alerta de resub (#10)

Implementação da funcionalidade de escutar o evento de resub no canal. Eu acredito que essa não seja a melhor forma de ser feita, podemos agrupar os eventos em um object e acessar pela propriedade, já que o comportamento a principio é o mesmo ou colocar dentro de uma function recebendo alguns params como valor de opacidade e time. Mas o que você acha? Closes #1
jlcarvalho · Jan 20, 2022 · e77c632 · e77c632
1 parent f19637f
commit e77c632
Showing 1 changed file with 26 additions and 12 deletions.
diff --git a/assets/alerts.html b/assets/alerts.html
@@ -17,32 +17,46 @@
   </script>
 </head>
 <body>
-  <div id="alertbox">
+  <div id="subscriptionBox">
     <b class="username"></b> acabou de se inscrever!<br />
     Seja bem vindo(a) 😎
   </div>
 
+  <div id="resubBox">
+    Obrigado pelo resub de <b class="streakMonths"></b> meses <b class="username"></b>
+  </div>
+
+
   <script src="/socket.io/socket.io.js"></script>
   <script>
-    var alertbox = document.querySelector("#alertbox");
-    var usernameEl = document.querySelector(".username");
+    var subscriptionBox = document.querySelector("#subscriptionBox");
+    var resubBox = document.querySelector("#resubBox");
+    var streakMonths = document.querySelector(".streakMonths");
+
     var socket = io();
 
     socket.on('subscription', function(msg) {
+      var usernameEl = subscriptionBox.querySelector(".username");
       usernameEl.innerText = msg.username;
-
-      window.requestAnimationFrame(function() {
-        alertbox.style.opacity = '1';
-
-        setTimeout(() => {
-          alertbox.style.opacity = '0';
-        }, 8000);
-      });
+      animateBox(subscriptionBox)
     });
 
     socket.on('resub', function(msg) {
-      console.log(msg);
+      var usernameEl = resubBox.querySelector(".username");
+      usernameEl.innerText = msg.username;
+      streakMonths.innerText = msg.months;
+      animateBox(resubBox)
     });
+
+    function animateBox(element, duration = 8000){
+      window.requestAnimationFrame(function() {
+        element.style.opacity = '1';
+
+          setTimeout(() => {
+            element.style.opacity = '0';
+          }, duration);
+        });
+    }
   </script>
 </body>
 </html>