Refresh of the overlay

OblivionEsport · Feb 26, 2024 · 2de2009 · 2de2009
1 parent b93e53f
commit 2de2009
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 22 deletions.
diff --git a/overlay/index.html b/overlay/index.html
@@ -21,15 +21,9 @@
     <div class="grid">
         <div id="team1">
             <div class="teamName">
+                <img src="./img/_notfound.png" alt="" srcset="">
                 <h1>TEAM 1</h1>
             </div>
-            <div id="bansTeam1">
-                <div class="bans"></div>
-                <div class="bans"></div>
-                <div class="bans"></div>
-                <div class="bans"></div>
-                <div class="bans"></div>
-            </div>
             <div class="player">
                 <h2></h2>
                 <h4></h4>
@@ -50,6 +44,13 @@ <h4></h4>
                 <h2></h2>
                 <h4></h4>
             </div>
+            <div id="bansTeam1">
+                <div class="bans"></div>
+                <div class="bans"></div>
+                <div class="bans"></div>
+                <div class="bans"></div>
+                <div class="bans"></div>
+            </div>
         </div>
         <div style="display: flex;justify-content: space-between;">
             <div>
@@ -65,13 +66,7 @@ <h2 class="score">0</h2>
         <div id="team2">
             <div class="teamName" style="text-align: right;">
                 <h1>TEAM 2</h1>
-            </div>
-            <div id="bansTeam2">
-                <div class="bans"></div>
-                <div class="bans"></div>
-                <div class="bans"></div>
-                <div class="bans"></div>
-                <div class="bans"></div>
+                <img src="./img/_notfound.png" alt="" srcset="">
             </div>
             <div class="player">
                 <h2></h2>
@@ -93,6 +88,13 @@ <h4></h4>
                 <h2></h2>
                 <h4></h4>
             </div>
+            <div id="bansTeam2">
+                <div class="bans"></div>
+                <div class="bans"></div>
+                <div class="bans"></div>
+                <div class="bans"></div>
+                <div class="bans"></div>
+            </div>
         </div>
     </div>
 

diff --git a/overlay/main.js b/overlay/main.js
@@ -127,18 +127,18 @@ function setActive(id) {
     if (id > 4) id -= 5;
     for (let i = 0; i < activePlayerTeam.children.length - 2; i++) {
         if (i == id) {
-            sizeArray += "2fr ";
+            sizeArray += "1.8fr ";
         } else {
             sizeArray += "1fr ";
         }
     }
-    activePlayerTeam.style.gridTemplateRows = `.5fr .5fr ${sizeArray}`;
+    activePlayerTeam.style.gridTemplateRows = `.5fr ${sizeArray} .5fr`;
 }
 function resetTeam(team) {
     if (team == 1)
-        team1[0].parentElement.style.gridTemplateRows = ".5fr .5fr 1fr 1fr 1fr 1fr 1fr";
+        team1[0].parentElement.style.gridTemplateRows = ".5fr 1fr 1fr 1fr 1fr 1fr .5fr";
     else
-        team2[0].parentElement.style.gridTemplateRows = ".5fr .5fr 1fr 1fr 1fr 1fr 1fr";
+        team2[0].parentElement.style.gridTemplateRows = ".5fr 1fr 1fr 1fr 1fr 1fr .5fr";
 }
 
 async function getTeamInfo() {
@@ -173,7 +173,8 @@ async function setupTeamInfo() {
 
     selected = await getTeamInfo();
     for (let i = 0; i < teamName.length; i++) {
-        teamName[i].children[0].innerText = selected[i]["name"];
+        teamName[i].getElementsByTagName("h1")[0].innerText = selected[i]["name"];
+        //teamName[i].getElementsByTagName("img")[0].src = `./teams_img/${selected[i]["tag"]}.png`;
         //teamName[i].children[1].innerText = selected[i]["tag"];
         score[i].innerText = selected[i]["score"];
         //teamLogo[i].style.backgroundImage = `url('${selected[i]["logo"]}')`;

diff --git a/overlay/style.css b/overlay/style.css
@@ -37,7 +37,7 @@
     display: grid;
     grid-template-columns: 1fr;
     row-gap: 2px;
-    grid-template-rows: .5fr .5fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: .5fr 1fr 1fr 1fr 1fr 1fr .5fr;
     transition: all .5s ease-in;
 }
 
@@ -51,6 +51,7 @@
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
+    background-position-y: -20px;
     /*background-image: url("img/notfound.png");*/
 }
 
@@ -98,13 +99,19 @@
     font-size: xx-large;
     color: white;
     font-family: 'LoL-Bold';
+    visibility: hidden;
 }
 
 .teamName h1 {
     color: white;
     font-family: 'LoL-Bold';
     margin: auto;
 }
+.teamName img {
+    width: 128px;
+    height: 128px;
+    object-fit: cover;
+}
 
 .teamName {
     display: flex;
@@ -131,8 +138,9 @@
     height: 100vh;
     filter: blur(10px);
     box-shadow: -10vmin 10vmin 0 rgba(255, 255, 255, 0.07);
+    width: 500px;
 }
-
+/*
 .shade2 .blob {
     animation: AnimateBlobTwo 8s ease-out infinite alternate;
 }
@@ -141,7 +149,7 @@
 .shade1 .blob {
     animation: AnimateBlobOne 10s ease-in infinite alternate;
 }
-
+*/
 
 @keyframes AnimateBlobOne {
     0% {