Squashed commit of the following:

commit c3f146f Author: Samuel Jędrzejewski <[email protected]> Date: Tue Sep 26 11:13:44 2023 +0200 Added sponsor image before item showcase
rcv-prod-toolkit · Sep 26, 2023 · d8d5e75 · d8d5e75
1 parent eddebdf
commit d8d5e75
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/frontend/gfx/ingame.css b/frontend/gfx/ingame.css
@@ -52,6 +52,10 @@ body {
   align-items: center;
 }
 
+.player-event.itemBuy {
+  transform-origin: center top;
+}
+
 .level {
   display: none;
   transform-origin: center;
@@ -72,23 +76,35 @@ body {
     levelOut 0.4s ease-in 2.6s forwards;
 }
 
-.item {
-  display: none;
+.item, .sponsor {
   object-fit: contain;
   width: 60px;
   height: 60px;
+}
+
+.sponsor {
+  position: absolute;
+  transform: scale(0);
+}
+
+.item {
+  display: none;
   transform: translateY(-100%);
 }
 
+.itemBuy .sponsor {
+  animation: scaleUp 0.4s ease-out 0.4s forwards;
+}
+
 .itemBuy {
   animation: backgroundUp 0.4s ease-out forwards,
-    backgroundDown 0.4s ease-out 3.45s forwards;
+    backgroundDown 0.4s ease-out 5.45s forwards; // 3.45s
 }
 
 .itemBuy .item {
   display: block;
-  animation: levelIn 0.4s ease-in 0.1s forwards,
-    levelOut 0.4s ease-in 3.15s forwards;
+  animation: levelIn 0.4s ease-in 2.1s forwards,
+    levelOut 0.4s ease-in 5.15s forwards;
 }
 
 .player:not(:last-child) {
@@ -178,6 +194,15 @@ body {
   }
 }
 
+@keyframes scaleUp {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
 #inhibDiv {
   opacity: 1;
   background-image: url(./img/inhibbadge.png);

diff --git a/frontend/gfx/ingame.html b/frontend/gfx/ingame.html
@@ -153,34 +153,39 @@ <h1 class="lb-heading">Gold</h1>
         <span class="nickname"></span>
         <div class="player-event">
           <span class="level"></span>
+          <img class="sponsor" src="/pages/op-plugin-theming/active/turniej/logo5.png" />
           <img class="item" />
         </div>
       </div>
       <div class="player">
         <span class="nickname"></span>
         <div class="player-event">
           <span class="level"></span>
+          <img class="sponsor" src="/pages/op-plugin-theming/active/turniej/logo5.png" />
           <img class="item" />
         </div>
       </div>
       <div class="player">
         <span class="nickname"></span>
         <div class="player-event">
           <span class="level"></span>
+          <img class="sponsor" src="/pages/op-plugin-theming/active/turniej/logo5.png" />
           <img class="item" />
         </div>
       </div>
       <div class="player">
         <span class="nickname"></span>
         <div class="player-event">
           <span class="level"></span>
+          <img class="sponsor" src="/pages/op-plugin-theming/active/turniej/logo5.png" />
           <img class="item" />
         </div>
       </div>
       <div class="player">
         <span class="nickname"></span>
         <div class="player-event">
           <span class="level"></span>
+          <img class="sponsor" src="/pages/op-plugin-theming/active/turniej/logo5.png" />
           <img class="item" />
         </div>
       </div>
@@ -197,34 +202,39 @@ <h2 class="event-time">AT 15:25</h2>
         <span class="nickname"></span>
         <div class="player-event">
           <span class="level"></span>
+          <img class="sponsor" src="/pages/op-plugin-theming/active/turniej/logo5.png" />
           <img class="item" />
         </div>
       </div>
       <div class="player">
         <span class="nickname"></span>
         <div class="player-event">
           <span class="level"></span>
+          <img class="sponsor" src="/pages/op-plugin-theming/active/turniej/logo5.png" />
           <img class="item" />
         </div>
       </div>
       <div class="player">
         <span class="nickname"></span>
         <div class="player-event">
           <span class="level"></span>
+          <img class="sponsor" src="/pages/op-plugin-theming/active/turniej/logo5.png" />
           <img class="item" />
         </div>
       </div>
       <div class="player">
         <span class="nickname"></span>
         <div class="player-event">
           <span class="level"></span>
+          <img class="sponsor" src="/pages/op-plugin-theming/active/turniej/logo5.png" />
           <img class="item" />
         </div>
       </div>
       <div class="player">
         <span class="nickname"></span>
         <div class="player-event">
           <span class="level"></span>
+          <img class="sponsor" src="/pages/op-plugin-theming/active/turniej/logo5.png" />
           <img class="item" />
         </div>
       </div>

diff --git a/frontend/gfx/ingame.js b/frontend/gfx/ingame.js
@@ -46,6 +46,7 @@ function itemUpdate(e) {
   const playerDiv = team.children[playerId].querySelector('.player-event')
 
   const levelContainer = playerDiv.querySelector('.item')
+  // const sponsorImage = playerDiv.querySelector('.sponsor')
 
   if (
     playerDiv.classList.contains('levelUp') ||
@@ -56,6 +57,7 @@ function itemUpdate(e) {
     }, 3000)
   }
 
+  // sponsorImage.src = "/pages/op-plugin-theming/active/turniej/logo5.png";
   levelContainer.src = `/serve/module-league-static/img/item/${e.item}.png`
   playerDiv.classList.add('itemBuy')
   setTimeout(() => {