From c51a215720c2ffbaca16d59b936d8dd05a2d49ba Mon Sep 17 00:00:00 2001
From: BlossomiShymae <87099578+BlossomiShymae@users.noreply.github.com>
Date: Sat, 14 Sep 2024 15:33:30 -0500
Subject: [PATCH] Add overview for TFT damage skins

---
 pages/tft-damage-skins/index.vue         | 17 ++++++-----
 pages/tft-damage-skins/overview/[id].vue | 37 ++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 7 deletions(-)
 create mode 100644 pages/tft-damage-skins/overview/[id].vue

diff --git a/pages/tft-damage-skins/index.vue b/pages/tft-damage-skins/index.vue
index 8530c00..9fc46f5 100644
--- a/pages/tft-damage-skins/index.vue
+++ b/pages/tft-damage-skins/index.vue
@@ -11,14 +11,17 @@
     :on-first="p.first" :on-last="p.last"/>
 
     <div class="d-flex flex-wrap justify-content-around gap-2">
-      <div class="card bg-tranparent bg-screen border-light border-opacity-25" style="max-width: 140px; width: 140px;"
-        v-for="tftDamageSkin in p.pages[p.index.value]" :key="tftDamageSkin.itemId">
-        <img :src="tftDamageSkin.getLoadoutsIcon('latest')" loading="lazy" onerror="this.onerror = null; this.src='/clean-cuts/img/error.png';" />
+      <div class="d-inline-flex align-items-stretch justify-content-stretch" v-for="tftDamageSkin in p.pages[p.index.value]" :key="tftDamageSkin.itemId">
+        <NuxtLink class="text-decoration-none" :to="`/tft-damage-skins/overview/${tftDamageSkin.itemId}`">
+          <div class="card h-100 bg-tranparent bg-screen border-light border-opacity-25" style="max-width: 140px; width: 140px;">
+            <img :src="tftDamageSkin.getLoadoutsIcon('latest')" loading="lazy" onerror="this.onerror = null; this.src='/clean-cuts/img/error.png';" />
 
-        <div class="card-body d-flex flex-column justify-content-end">
-          <h5 class="card-title">{{ tftDamageSkin.name }}</h5>
-          <Badge name="identifier">{{ tftDamageSkin.itemId }}</Badge>
-        </div>
+            <div class="card-body d-flex flex-column justify-content-end">
+              <h5 class="card-title">{{ tftDamageSkin.name }}</h5>
+              <Badge name="identifier">{{ tftDamageSkin.itemId }}</Badge>
+            </div>
+          </div>
+        </NuxtLink>
       </div>
     </div>
 
diff --git a/pages/tft-damage-skins/overview/[id].vue b/pages/tft-damage-skins/overview/[id].vue
new file mode 100644
index 0000000..05012fa
--- /dev/null
+++ b/pages/tft-damage-skins/overview/[id].vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="row">
+    <div class="col-md-6 col-sm-12">
+      <h1 class="display-4 pb-2 mb-3 border-bottom border-light border-opacity-25 border-4">{{ tftDamageSkin!.name }}</h1>
+
+      <div class="d-flex flex-wrap gap-3 mb-3">
+        <Badge label="Content ID:">{{ tftDamageSkin!.contentId }}</Badge>
+        <Badge label="Item ID:">{{ tftDamageSkin!.itemId }}</Badge>
+        <Badge label="Group ID:">{{ tftDamageSkin!.groupId }}</Badge>
+      </div>
+    </div>
+
+    <div class="col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
+      <img :src="tftDamageSkin!.getLoadoutsIcon('latest')"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Badge from '~/components/Badge.vue';
+import useClient from '~/composables/useClient';
+import useLocale from '~/composables/useLocale';
+
+const route = useRoute();
+const id = route.params.id as unknown;
+
+const { client } = useClient();
+const { currentLocale } = useLocale();
+const getTftDamageSkins = async () => await client.tftDamageSkins.listAsync({ locale: currentLocale.value, version: "latest"});
+
+const tftDamageSkins = ref(await getTftDamageSkins());
+watch (currentLocale, async() => {
+  tftDamageSkins.value = await getTftDamageSkins();
+});
+
+const tftDamageSkin = computed(() => tftDamageSkins.value.find((x) => x.itemId == id));
+</script>
\ No newline at end of file