Merge pull request #13 from TateB/dev

Small fixes

public/obs/mapbans.html

@@ -15,6 +15,7 @@
         flex-direction: row;
         justify-content: space-around;
         font-family: "Poppins";
+        overflow: hidden;
       }
       .map {
         margin-top: 50px;
@@ -190,6 +191,22 @@
         height: inherit;
       }
 
+      .hidden {
+        opacity: 0;
+        margin-top: -200px !important;
+      }
+
+      .hiddenAutoban {
+        opacity: 0;
+        margin-bottom: 100px !important;
+      }
+
+      .bannedMap,
+      .map,
+      #autobantext {
+        transition: all 0.3s ease-out;
+      }
+
       * {
         text-transform: uppercase;
       }
@@ -350,12 +367,58 @@
             )
             spacerInnerEl.setAttribute("class", "spacer")
             autobanEl.setAttribute("class", "autoban")
+            autobanEl.setAttribute("id", "autobantext")
             autobanEl.appendChild(autobanText)
             bannedDiv.appendChild(spacerInnerEl)
             bannedDiv.appendChild(autobanEl)
           } else {
             bannedDiv.classList.add("autoPickedBo1")
           }
+
+          if (document.visibilityState !== "visible") {
+            const mapDivs = document.querySelectorAll(".bannedMap, .map")
+            for (const mapDiv of mapDivs) {
+              mapDiv.classList.add("nodisplay")
+              mapDiv.classList.add("hidden")
+            }
+            document
+              .getElementById("autobantext")
+              .classList.add("nodisplay", "hiddenAutoban")
+          }
+
+          window.addEventListener("obsSourceActiveChanged", (evt) => {
+            if (evt.detail.active) {
+              setTimeout(() => {
+                document
+                  .getElementById("autobantext")
+                  .classList.remove("nodisplay")
+                const mapDivs = document.querySelectorAll(".bannedMap, .map")
+                for (const [inx, mapDiv] of mapDivs.entries()) {
+                  mapDiv.classList.remove("nodisplay")
+                  setTimeout(
+                    () => mapDiv.classList.remove("hidden"),
+                    200 * (inx + 1)
+                  )
+                }
+                setTimeout(
+                  () =>
+                    document
+                      .getElementById("autobantext")
+                      .classList.remove("hiddenAutoban"),
+                  200 * (mapDivs.length + 1)
+                )
+              }, 850)
+            } else {
+              const mapDivs = document.querySelectorAll(".bannedMap, .map")
+              for (const mapDiv of mapDivs) {
+                mapDiv.classList.add("nodisplay")
+                mapDiv.classList.add("hidden")
+              }
+              document
+                .getElementById("autobantext")
+                .classList.add("nodisplay", "hiddenAutoban")
+            }
+          })
         }
       })
     </script>

public/obs/scores_break.html

@@ -56,6 +56,24 @@
         background-color: rgb(51, 51, 51);
         border-radius: 15px;
       }
+
+      #leftScore,
+      #leftTeam,
+      #leftLogo,
+      #rightScore,
+      #rightTeam,
+      #rightLogo {
+        transition: all 0.35s ease-out;
+      }
+
+      .nodisplay {
+        display: none;
+      }
+
+      .hidden {
+        opacity: 0;
+        transform: translateX(-150px);
+      }
     </style>
     <script type="text/javascript" src="simplepeer.min.js"></script>
     <script type="text/javascript" src="obs.js"></script>
@@ -76,22 +94,63 @@
         document.getElementById("rightLogo").src = finalTeam[1].iconLink
         document.getElementById("leftLogo").src = finalTeam[0].iconLink
       })
+
+      window.addEventListener("load", (event) => {
+        const allTeams = document.querySelectorAll(".leftTeamEl, .rightTeamEl")
+        const leftTeamEls = document.querySelectorAll(".leftTeamEl")
+        const rightTeamEls = document.querySelectorAll(".rightTeamEl")
+
+        if (document.visibilityState !== "visible") {
+          allTeams.forEach((el) => el.classList.add("hidden", "nodisplay"))
+        }
+
+        window.addEventListener("obsSourceActiveChanged", (evt) => {
+          console.log("source changed", evt.detail)
+          if (evt.detail.active) {
+            setTimeout(() => {
+              console.log("transition finished, queueing changes")
+              console.log(
+                allTeams,
+                leftTeamEls,
+                document.querySelectorAll(".leftTeamEl")
+              )
+              allTeams.forEach((el) => {
+                console.log("el got", el)
+                el.classList.remove("nodisplay")
+              })
+              setTimeout(
+                () =>
+                  leftTeamEls.forEach((el) => el.classList.remove("hidden")),
+                200
+              )
+              setTimeout(
+                () =>
+                  rightTeamEls.forEach((el) => el.classList.remove("hidden")),
+                550
+              )
+            }, 950)
+          } else {
+            document
+            allTeams.forEach((el) => el.classList.add("hidden", "nodisplay"))
+          }
+        })
+      })
     </script>
   </head>
 
   <body>
     <div class="grow"></div>
     <div class="col">
-      <p class="cls-3" id="leftTeam"><%= teams[0].toUpperCase() %></p>
-      <p class="cls-3" id="rightTeam"><%= teams[1].toUpperCase() %></p>
+      <p class="cls-3 leftTeamEl" id="leftTeam">Team A</p>
+      <p class="cls-3 rightTeamEl" id="rightTeam">Team B</p>
     </div>
     <div class="col scores">
-      <p class="cls-3" id="leftScore"></p>
-      <p class="cls-3" id="rightScore"></p>
+      <p class="cls-3 leftTeamEl" id="leftScore"></p>
+      <p class="cls-3 rightTeamEl" id="rightScore"></p>
     </div>
     <div class="icons">
-      <img src="" id="leftLogo" />
-      <img src="" id="rightLogo" />
+      <img class="leftTeamEl" src="icons/default.png" id="leftLogo" />
+      <img class="rightTeamEl" src="icons/default.png" id="rightLogo" />
     </div>
   </body>
 </html>

src/apis/nightbot.js

@@ -166,11 +166,14 @@ const setCommand = (command) => {
   var dbVars
   var userId
   var settingId
+  var settings
 
   return Promise.all(requiredVars[command].map((x) => getSpecifics(x)))
     .then((dbVarsRec) => (dbVars = dbVarsRec))
     .then(() => getSpecifics("nbSession"))
-    .then((sess) => (userId = sess.session.accessToken))
+    .then((sess) => (settings = sess))
+    .then(() => isAuthed(settings))
+    .then(() => (userId = settings.session.accessToken))
     .then(() => getSpecifics("commands"))
     .then((nbSet) => nbSet.find((x) => x.name === command))
     .then((foundCommand) => (settingId = foundCommand.id))
@@ -192,9 +195,7 @@ const setCommand = (command) => {
       })
     )
     .catch((err) =>
-      Promise.reject(
-        "Nightbot: Error setting command " + command + " :: " + err
-      )
+      console.error("Nightbot: Error setting command " + command + " :: " + err)
     )
 }
 
@@ -215,10 +216,10 @@ const generateCommandText = (command, vars) => {
         const [casters] = vars
         if (casters.length > 1) {
           var finalMsg = "@$(user), Your casters for today are: "
-          vars.map((x, i) =>
-            i === vars.length - 1
+          casters.forEach((x, i) =>
+            i === casters.length - 1
               ? (finalMsg += `${x.name}, ${x.url}`)
-              : (finalMsg += `${x.name}, ${x.url},`)
+              : (finalMsg += `${x.name}, ${x.url}, `)
           )
           resolve(finalMsg)
         } else {
@@ -230,13 +231,20 @@ const generateCommandText = (command, vars) => {
       }
       case "delay": {
         var finalMsg = "@$(user), Stream delay is set to "
-        if (vars[0].minutes)
-          finalMsg +=
-            vars[0].minutes + " minute" + vars[0].minutes > 1 ? "s" : ""
-        if (vars[0].seconds && vars[0].minutes)
-          finalMsg += " and " + vars[0].seconds
-        if (vars[0].seconds && !vars[0].minutes)
-          finalMsg += vars[0].seconds + " seconds"
+        const { minutes, seconds } = vars[0]
+        /* eslint-disable no-unused-expressions */
+        if (minutes > 0) {
+          finalMsg += minutes + " minute"
+          minutes > 1 ? (finalMsg += "s") : undefined
+        }
+        if (seconds > 0 && minutes > 0) {
+          finalMsg += " and "
+        }
+        if (seconds > 0) {
+          finalMsg += seconds + " second"
+          seconds > 1 ? (finalMsg += "s") : undefined
+        }
+        /* eslint-enable no-unused-expressions */
         return resolve(finalMsg)
       }
       case "maps": {