From 5243cf1cb7df4bb2b1d4bad35627f2f9acc2c353 Mon Sep 17 00:00:00 2001
From: BlossomiShymae <87099578+BlossomiShymae@users.noreply.github.com>
Date: Sat, 14 Sep 2024 10:48:21 -0500
Subject: [PATCH] Add TFT damage skins

---
 layouts/default.vue              |  5 +++
 pages/tft-damage-skins/index.vue | 58 ++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 pages/tft-damage-skins/index.vue

diff --git a/layouts/default.vue b/layouts/default.vue
index 43c650e..fb837b7 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -70,6 +70,11 @@
                                   <MaterialIcon name="map" :size="24" /> Map Skins
                                 </NuxtLink>
                               </li>
+                              <li>
+                                <NuxtLink class="nav-link" to="/tft-damage-skins">
+                                  <MaterialIcon name="creation" :size="24" /> Damage Skins
+                                </NuxtLink>
+                              </li>
                             </ul>
                           </div>
                         </li>
diff --git a/pages/tft-damage-skins/index.vue b/pages/tft-damage-skins/index.vue
new file mode 100644
index 0000000..5004345
--- /dev/null
+++ b/pages/tft-damage-skins/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="d-flex flex-column gap-2">
+    <h1 class="mb-3">TFT Damage Skins</h1>
+
+    <div class="input-group">
+      <input type="text" class="form-control bg-transparent border-light border-opacity-25" placeholder="Search" name="Search"
+        v-model="query"/>
+    </div>
+
+    <Pagination :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
+    :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="card-body d-flex flex-column justify-content-end">
+          <h5 class="card-title">{{ tftDamageSkin.name }}</h5>
+          <Badge name="identifier">{{ tftDamageSkin.itemId }}</Badge>
+        </div>
+      </div>
+    </div>
+
+    <Pagination :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
+    :on-first="p.first" :on-last="p.last"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Pagination from '~/components/Pagination.vue';
+import Badge from '~/components/Badge.vue';
+import useClient from '~/composables/useClient';
+import useLocale from '~/composables/useLocale';
+import useIsNumeric from '~/composables/useIsNumeric';
+import usePagination from '~/composables/usePagination';
+
+const { client } = useClient();
+const { currentLocale } = useLocale();
+const getTftDamageSkins = async () => (await client.tftDamageSkins.listAsync({ locale: currentLocale.value, version: "latest"}));
+
+const query = ref("");
+
+const tftDamageSkins = ref(await getTftDamageSkins());
+watch(currentLocale, async() => {
+  tftDamageSkins.value = await getTftDamageSkins();
+});
+
+const { isNumeric } = useIsNumeric();
+const p = computed(() => {
+  let filtered = [];
+  if (isNumeric(query.value))
+    filtered = tftDamageSkins.value.filter((x) => x.itemId == parseInt(query.value));
+  else
+    filtered = tftDamageSkins.value.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase()));
+  return usePagination(filtered, 24);
+})
+</script>
\ No newline at end of file