meh..

splashcat-ink · Jul 25, 2023 · 73d22e5 · 73d22e5
1 parent c0148a7
commit 73d22e5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -158,6 +158,18 @@
         padding-left: var(--squid-size);
         padding-right: var(--squid-size);
     }
+
+    @keyframes preview-image-lazy-load {
+        0% {
+            display: none;
+        }
+        1% {
+            display: block;
+        }
+        100% {
+            display: block;
+        }
+    }
 }
 
 @font-face {

diff --git a/users/templates/users/includes/battle-card.html b/users/templates/users/includes/battle-card.html
@@ -1,10 +1,18 @@
 {% load static %}
-<a class="group hover:scale-110 hover:z-10 card-mask rounded-2xl {% if battle.vs_mode == "BANKARA" %}bg-splatoon-battle-ranked{% elif battle.vs_mode == "X_MATCH" %}bg-splatoon-battle-xmatch{% elif battle.vs_mode == "CHALLENGE" %}bg-splatoon-battle-league{% else %}bg-splatoon-battle-regular{% endif %} battle-card-background transition duration-200 hover:rotate-2 odd:hover:-rotate-2 drop-shadow-lg hover:drop-shadow-2xl {% if battle.judgement != "WIN" %}brightness-[0.80]{% endif %}"
+<a class="group hover:z-10 card-mask rounded-2xl {% if battle.vs_mode == "BANKARA" %}bg-splatoon-battle-ranked{% elif battle.vs_mode == "X_MATCH" %}bg-splatoon-battle-xmatch{% elif battle.vs_mode == "CHALLENGE" %}bg-splatoon-battle-league{% else %}bg-splatoon-battle-regular{% endif %} battle-card-background transition duration-200 hover:rotate-2 odd:hover:-rotate-2 drop-shadow-lg hover:drop-shadow-2xl {% if battle.judgement != "WIN" %}brightness-[0.80]{% endif %}"
    href="{% url 'battles:view_battle' battle.id %}">
     {% if battle.vs_mode == "FEST" and battle.splatfest_clout_multiplier != "NONE" %}
         {% include "splatnet_assets/squid_tape.html" with bg="bg-purple-600 -rotate-6 left-1 top-1 absolute" content=battle.get_splatfest_clout_multiplier_display %}
     {% endif %}
 
+    {% if battle.battlevideo %}
+        <div class="w-full scale-0 group-hover:scale-100 transition duration-300 absolute bottom-0 left-0 origin-center z-20">
+            <img src="https://vz-04e1e2d4-05f.b-cdn.net/{{ battle.battlevideo.bunny_video_id }}/preview.webp"
+                 loading="lazy" alt=""
+                 class="h-auto w-full group-hover:[animation-name:preview-image-lazy-load]">
+        </div>
+    {% endif %}
+
     <div class="text-xl float-right p-1">{{ battle.played_time|date:"SHORT_DATE_FORMAT" }}</div>
     <div class="bg-black/50 mt-8 p-2 h-full">
         <div class="text-lg float-right">{{ battle.vs_stage.name.string }}</div>