feat(ui): game carousel

components/CarouselPagination.vue

@@ -5,7 +5,7 @@
       @click="() => slideTo(i)"
       :class="[
         currentSlide == i ? 'bg-zinc-300' : 'bg-zinc-700',
-        'w-4 h-2 rounded-full',
+        'cursor-pointer w-4 h-2 rounded-full',
       ]"
     />
   </div>

components/GameCarousel.vue

@@ -0,0 +1,41 @@
+<template>
+  <ClientOnly>
+    <VueCarousel :itemsToShow="moveAmount" :itemsToScroll="moveAmount / 2">
+      <VueSlide
+        class="justify-start"
+        v-for="(game, gameIdx) in games"
+        :key="gameIdx"
+      >
+        <GamePanel :game="game" />
+      </VueSlide>
+
+      <template #addons>
+        <VueNavigation />
+      </template>
+    </VueCarousel>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import type { Game } from "@prisma/client";
+import type { SerializeObject } from "nitropack";
+
+const props = defineProps<{
+  items: Array<SerializeObject<Game>>;
+  min?: number;
+}>();
+
+const min = computed(() => Math.max(props.min ?? 8, props.items.length));
+const games: Ref<Array<SerializeObject<Game> | undefined>> = computed(() =>
+  Array(min.value)
+    .fill(0)
+    .map((_, i) => props.items[i])
+);
+
+const moveAmount = ref(1);
+const moveFactor = 1.8 / 400;
+
+onMounted(() => {
+  moveAmount.value = moveFactor * window.innerWidth;
+});
+</script>

components/GamePanel.vue

@@ -2,11 +2,11 @@
   <NuxtLink
     v-if="game"
     :href="`/store/${game.id}`"
-    class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 hover:scale-105 hover:shadow-xl"
+    class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 text-left transform-3d hover:rotate-y-180"
   >
     <img :src="useObject(game.mCoverId)" class="w-full h-full object-cover" />
     <div
-      class="absolute inset-0 bg-gradient-to-b from-transparent to-95% to-zinc-800"
+      class="absolute inset-0 bg-gradient-to-b from-transparent to-95% to-zinc-950"
     />
     <div class="absolute bottom-0 left-0 px-2 py-1.5">
       <h1 class="text-zinc-100 text-sm font-bold font-display">