diff --git a/public/obs/mapbans.html b/public/obs/mapbans.html index 10d6fbf..fd7cc67 100644 --- a/public/obs/mapbans.html +++ b/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") + } + }) } }) diff --git a/public/obs/scores_break.html b/public/obs/scores_break.html index 69978df..2193cf5 100644 --- a/public/obs/scores_break.html +++ b/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); + } @@ -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")) + } + }) + })
<%= teams[0].toUpperCase() %>
-<%= teams[1].toUpperCase() %>
+Team A
+Team B