Add transition animations for battle view

This update introduces transition animations when navigating between different battles. They include sliding in and out to the left or right based on the navigation direction. The changes also include events to handle page swaps and page reveals, controlling the directions of the view transitions. The commit also improves some formatting in the HTML and CSS files along with adding eager loading through a `speculationrules` script.

battles/templates/battles/components/team_card.html

@@ -10,7 +10,8 @@
             DEFEAT
         {% else %}--{% endif %}
     </span>
-    {% if team.fest_team_name %}<span class="text-xl splatoon-text-shadow">Team {{ team.fest_team_name }}</span>{% endif %}
+    {% if team.fest_team_name %}
+        <span class="text-xl splatoon-text-shadow">Team {{ team.fest_team_name }}</span>{% endif %}
     <div class="flex flex-col gap-1">
         {% with next_team=team.next_team %}
             {% for player in team.players.all|dictsort:"order" %}

battles/templates/battles/view_battle.html

@@ -157,11 +157,11 @@ <h1 class="text-3xl font-splatoon1">
         </span>
     {% endif %}
 
-    <div class="max-w-[1200px] bg-[url:var(--stage-image)] h-fit bg-cover grid grid-cols-1 auto-rows-auto lg:grid-cols-5 lg:grid-rows-5 relative pt-2 lg:pt-0"
+    <div class="max-w-[1200px] bg-[url:var(--stage-image)] h-fit bg-cover grid grid-cols-1 auto-rows-auto lg:grid-cols-5 lg:grid-rows-5 relative pt-2 lg:pt-0 [view-transition-name:battle-card]"
          style="--stage-image: url({{ battle.vs_stage.image.url }});">
 
         {% 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-4 top-4 scale-[1.5] lg:scale-[2] absolute" content=battle.get_splatfest_clout_multiplier_display %}
+            {% include "splatnet_assets/squid_tape.html" with bg="bg-purple-600 -rotate-6 left-4 top-4 scale-[1.5] lg:scale-[2] absolute [view-transition-name:clout-multiplier] clout-multiplier-tape" content=battle.get_splatfest_clout_multiplier_display %}
         {% endif %}
 
         <div class="row-start-3 row-end-6 lg:col-start-4 lg:col-end-6 lg:row-span-full bg-gray-800/70 bg-[url('../images/tapes-transparent.png')] bg-contain px-4 lg:px-8 flex flex-col lg:flex-col {% if battle.teams.count > 2 %}gap-2 py-2 lg:py-4{% else %}gap-8 py-6 lg:py-12 md:flex-row{% endif %}">
@@ -301,7 +301,7 @@ <h1 class="text-2xl font-splatoon1 pt-2">Related Battles</h1>
             <span class="text-lg pt-2">Other Splashcat users have uploaded this same battle!</span>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 pt-2">
                 {% for related_battle in related_battles %}
-                    {% include 'users/includes/battle-card.html' with battle=related_battle display_uploader=True %}
+                    {% include 'users/includes/battle-card.html' with battle=related_battle display_uploader=True disable_view_transition=True %}
                 {% endfor %}
             </div>
         {% endif %}
@@ -319,19 +319,19 @@ <h1 class="text-2xl font-splatoon1 pt-2">Related Battles</h1>
         {% endif %}
     {% endif %}
 
-    <div class="sticky left-0 bottom-0 w-full flex gap-4 px-2 sm:px-4 md:px-6 lg:px-8 xl:px-12 py-2 mt-4 -mb-3 sm:rounded-t-xl bg-gray-700 whitespace-nowrap text-xs sm:text-sm md:text-base z-40">
-        <a href="{% url 'battles:redirect_to_user_latest_battle' battle.uploader.username %}"
-           class="py-2 px-4 rounded-full bg-gray-600">Latest Battle</a>
+    <div class="sticky left-0 bottom-0 w-full flex gap-4 px-2 sm:px-4 md:px-6 lg:px-8 xl:px-12 py-2 mt-4 -mb-3 sm:rounded-t-xl bg-gray-700 whitespace-nowrap text-xs sm:text-sm md:text-base z-40 [view-transition-name:battle-navigation]">
+        <a href="{% url 'battles:redirect_to_user_latest_battle' battle.uploader.username %}" data-direction="forwards"
+           class="battle-pagination-button py-2 px-4 rounded-full bg-gray-600">Latest Battle</a>
         <div class="grow"></div>
         {% with next_battle=battle.get_player_next_battle %}
-            <a href="{{ next_battle.get_absolute_url }}"
-               class="py-2 px-4 rounded-full {% if next_battle %}bg-gray-600{% else %}bg-gray-600/50 text-gray-400{% endif %}">
+            <a href="{{ next_battle.get_absolute_url }}" data-direction="forwards"
+               class="battle-pagination-button py-2 px-4 rounded-full {% if next_battle %}bg-gray-600{% else %}bg-gray-600/50 text-gray-400{% endif %}">
                 Next
             </a>
         {% endwith %}
         {% with previous_battle=battle.get_player_previous_battle %}
-            <a href="{{ previous_battle.get_absolute_url }}"
-               class="py-2 px-4 rounded-full {% if previous_battle %}bg-gray-600{% else %}bg-gray-800 text-gray-400{% endif %}">
+            <a href="{{ previous_battle.get_absolute_url }}" data-direction="backwards"
+               class="battle-pagination-button py-2 px-4 rounded-full {% if previous_battle %}bg-gray-600{% else %}bg-gray-800 text-gray-400{% endif %}">
                 Previous
             </a>
         {% endwith %}

frontend/src/index.js

@@ -83,3 +83,17 @@ window.addEventListener(
 		}
 	},
 );
+
+document.querySelectorAll(".battle-pagination-button").forEach(button => button.addEventListener("click", event => {
+	const direction = event.target.dataset.direction ?? "unknown";
+
+	sessionStorage.setItem("direction", direction);
+	console.log("wrote direction", direction)
+}))
+
+window.addEventListener("pageswap", e => {
+	if (e.viewTransition) {
+		console.log("swap", e.viewTransition, sessionStorage.getItem("direction"))
+		e.viewTransition.types.add(sessionStorage.getItem("direction"));
+	}
+})

frontend/src/styles.css

@@ -229,6 +229,68 @@
     }
 }
 
+@view-transition {
+    navigation: auto;
+}
+
+:root {
+    view-transition-name: root;
+}
+
+::view-transition-group(*) {
+    animation-duration: 350ms;
+}
+
+html:active-view-transition-type(forwards, backwards) {
+    .clout-multiplier-tape {
+        view-transition-name: none;
+    }
+}
+
+html:active-view-transition-type(backwards) {
+    &::view-transition-old(battle-card) {
+        animation-name: slide-out-to-left;
+    }
+
+    &::view-transition-new(battle-card) {
+        animation-name: slide-in-from-right;
+    }
+}
+
+html:active-view-transition-type(forwards) {
+    &::view-transition-old(battle-card) {
+        animation-name: slide-out-to-right;
+    }
+
+    &::view-transition-new(battle-card) {
+        animation-name: slide-in-from-left;
+    }
+}
+
+@keyframes slide-in-from-left {
+    from {
+        translate: -100vw 0;
+    }
+}
+
+@keyframes slide-in-from-right {
+    from {
+        translate: 100vw 0;
+    }
+}
+
+@keyframes slide-out-to-left {
+    to {
+        translate: -100vw 0;
+    }
+}
+
+@keyframes slide-out-to-right {
+    to {
+        translate: 100vw 0;
+    }
+}
+
 @font-face {
     font-family: Splatoon1;
     src: url("../fonts/splatnet3/Splatoon1-cjk-common.woff2");

templates/base.html

@@ -41,6 +41,25 @@
 		window.plausible = window.plausible || function () {
 			(window.plausible.q = window.plausible.q || []).push(arguments)
 		}
+
+		window.addEventListener("pagereveal", e => {
+			if (e.viewTransition) {
+				console.log("reveal", e.viewTransition, sessionStorage.getItem("direction"))
+				e.viewTransition.types.add(sessionStorage.getItem("direction"));
+				sessionStorage.removeItem("direction");
+			}
+		})
+    </script>
+
+    <script type="speculationrules">
+        {
+          "prefetch": [{
+            "where": {
+              "href_matches": "/*"
+            },
+            "eagerness": "moderate"
+          }]
+        }
     </script>
 
     <meta property="og:type" content="website">
@@ -84,7 +103,8 @@
         <div class="py-4 flex flex-row flex-wrap gap-4">
             <a href="https://github.com/splashcat-ink/splashcat"
                class="my-auto">
-                <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/splashcat-ink/splashcat" loading="lazy" decoding="async">
+                <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/splashcat-ink/splashcat"
+                     loading="lazy" decoding="async">
             </a>
             <a href="https://github.com/splashcat-ink/splashcat"
                class="bg-purple-600 hover:bg-purple-700 rounded p-4 my-auto">GitHub</a>

users/templates/users/includes/battle-card.html

@@ -1,9 +1,9 @@
 {% load mask_id %}
 {% load static %}
-<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{% elif battle.vs_mode == "FEST" %}bg-purple-800{% 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 {% if disable_view_transition is not True %} hover:[view-transition-name:battle-card]{% endif %} 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{% elif battle.vs_mode == "FEST" %}bg-purple-800{% 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 %}
+        {% include "splatnet_assets/squid_tape.html" with bg="bg-purple-600 -rotate-6 left-1 top-1 absolute group-hover:[view-transition-name:clout-multiplier]" content=battle.get_splatfest_clout_multiplier_display %}
     {% endif %}
 
     {% if battle.battlevideo %}
@@ -91,7 +91,8 @@
                         {% if battle.uploader.display_sponsor_badge %}
                             <img src="{% static 'images/splashcat-sponsor-badge.png' %}?format=png"
                                  alt="Splashcat Sponsor"
-                                 class="h-6 w-6 inline-block [image-rendering:pixelated] splashcat-sponsor-badge" height="16" width="16">
+                                 class="h-6 w-6 inline-block [image-rendering:pixelated] splashcat-sponsor-badge"
+                                 height="16" width="16">
                         {% endif %}
                     </div>
                     <div class="text-sm text-gray-400 h-0 scale-y-0 group-hover:h-4 group-hover:scale-y-100 transition-[transform,_height]">