From 106b3f66a482a467a9585cc4be25cc8b84c78631 Mon Sep 17 00:00:00 2001
From: Huskydog9988 <39809509+Huskydog9988@users.noreply.github.com>
Date: Mon, 7 Apr 2025 16:17:55 -0400
Subject: [PATCH] feat: sleak transition from store page to item

---
 app.vue                    | 12 ++++++++++
 components/GamePanel.vue   | 49 +++++++++++++++++++++++++++-----------
 nuxt.config.ts             |  1 +
 pages/store/[id]/index.vue | 19 ++++++++++++++-
 4 files changed, 66 insertions(+), 15 deletions(-)

diff --git a/app.vue b/app.vue
index 5b6668f..34f6d70 100644
--- a/app.vue
+++ b/app.vue
@@ -8,3 +8,15 @@
 <script setup lang="ts">
 await updateUser();
 </script>
+
+<style scoped>
+/* You can customise the default animation here. */
+
+::view-transition-old(root) {
+  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
+}
+
+::view-transition-new(root) {
+  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
+}
+</style>
diff --git a/components/GamePanel.vue b/components/GamePanel.vue
index 8460bde..9eeb88c 100644
--- a/components/GamePanel.vue
+++ b/components/GamePanel.vue
@@ -3,20 +3,31 @@
     v-if="game"
     :href="props.href ?? `/store/${game.id}`"
     class="group relative w-48 h-64 rounded-lg overflow-hidden transition-all duration-300 text-left hover:scale-[1.02] hover:shadow-lg hover:-translate-y-0.5"
+    @click.native="active = game.id"
   >
-   <div class="absolute inset-0 transition-all duration-300 group-hover:scale-110">
-      <img 
-        :src="useObject(game.mCoverId)" 
-        class="w-full h-full object-cover brightness-[90%]" 
+    <div
+      class="absolute inset-0 transition-all duration-300 group-hover:scale-110"
+    >
+      <img
+        :src="useObject(game.mCoverId)"
+        class="w-full h-full object-cover brightness-[90%]"
+        :class="{ active: active === game.id }"
+        :alt="game.mName"
+      />
+      <div
+        class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/20 to-transparent"
       />
-      <div class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/20 to-transparent" />
     </div>
 
-   <div class="absolute bottom-0 left-0 w-full p-3">
-      <h1 class="text-zinc-100 text-sm font-bold font-display group-hover:text-white transition-colors">
+    <div class="absolute bottom-0 left-0 w-full p-3">
+      <h1
+        class="text-zinc-100 text-sm font-bold font-display group-hover:text-white transition-colors"
+      >
         {{ game.mName }}
       </h1>
-      <p class="text-zinc-400 text-xs line-clamp-2 group-hover:text-zinc-300 transition-colors">
+      <p
+        class="text-zinc-400 text-xs line-clamp-2 group-hover:text-zinc-300 transition-colors"
+      >
         {{ game.mShortDescription }}
       </p>
     </div>
@@ -35,13 +46,23 @@
 import type { SerializeObject } from "nitropack";
 
 const props = defineProps<{
-  game: SerializeObject<{
-    id: string;
-    mCoverId: string;
-    mName: string;
-    mShortDescription: string;
-  }> | undefined;
+  game:
+    | SerializeObject<{
+        id: string;
+        mCoverId: string;
+        mName: string;
+        mShortDescription: string;
+      }>
+    | undefined;
   href?: string;
 }>();
+
+const active = useState();
 </script>
 
+<style scoped>
+img.active {
+  view-transition-name: selected-game;
+  contain: layout;
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4aad488..3b17a10 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,6 +11,7 @@ export default defineNuxtConfig({
 
   experimental: {
     buildCache: true,
+    viewTransition: true,
   },
 
   vite: {
diff --git a/pages/store/[id]/index.vue b/pages/store/[id]/index.vue
index 4aeac95..7d9b7ab 100644
--- a/pages/store/[id]/index.vue
+++ b/pages/store/[id]/index.vue
@@ -27,8 +27,9 @@
           class="col-start-1 lg:col-start-4 flex flex-col gap-y-6 items-center"
         >
           <img
-            class="transition-all duration-300 hover:scale-105 hover:rotate-[-1deg] w-64 h-auto rounded"
+            class="transition-all duration-300 hover:scale-105 hover:rotate-[-1deg] w-64 h-auto rounded gameCover"
             :src="useObject(game.mCoverId)"
+            :alt="game.mName"
           />
           <div class="flex items-center gap-x-2">
             <AddLibraryButton :gameId="game.id" />
@@ -219,3 +220,19 @@ useHead({
   title: game.mName,
 });
 </script>
+
+<style scoped>
+h1 {
+  view-transition-name: header;
+}
+img.gameCover {
+  view-transition-name: selected-game;
+}
+</style>
+
+<style>
+::view-transition-old(header),
+::view-transition-new(header) {
+  width: auto;
+}
+</style>