From d6eed61f8b56a4cf506aa451e22a3c441d15ff66 Mon Sep 17 00:00:00 2001
From: BlossomiShymae <87099578+BlossomiShymae@users.noreply.github.com>
Date: Sat, 14 Sep 2024 14:47:21 -0500
Subject: [PATCH] Add overview for TFT map skins

---
 components/Badge.vue                  |  9 ++++---
 pages/tft-map-skins/index.vue         | 17 +++++++-----
 pages/tft-map-skins/overview/[id].vue | 39 +++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 pages/tft-map-skins/overview/[id].vue

diff --git a/components/Badge.vue b/components/Badge.vue
index 0de5198..5292b80 100644
--- a/components/Badge.vue
+++ b/components/Badge.vue
@@ -1,6 +1,8 @@
 <template>
-  <span class="badge text-bg-dark border text-dark-emphasis fw-normal d-flex align-items-center gap-2 bg-transparent bg-blur-4 border-light border-opacity-25">
-    <MaterialIcon :size="24" :name="name" />
+  <span class="badge text-bg-dark border text-dark-emphasis fw-normal d-flex align-items-center gap-2 bg-transparent bg-blur-4 border-light border-opacity-25"
+    style="min-height: 32px;">
+    <span class="fw-bold" v-if="label">{{ label }}</span>
+    <MaterialIcon v-if="name" :size="24" :name="name" />
     <slot></slot>
   </span>
 </template>
@@ -9,7 +11,8 @@
 import MaterialIcon from './MaterialIcon.vue';
 
 defineProps<{
-  name: string
+  name?: string;
+  label?: string;
 }>();
 </script>
 
diff --git a/pages/tft-map-skins/index.vue b/pages/tft-map-skins/index.vue
index 053eac9..2520e31 100644
--- a/pages/tft-map-skins/index.vue
+++ b/pages/tft-map-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-transparent bg-screen border-light border-opacity-25" style="max-width: 140px; width: 140px;"
-        v-for="tftMapSkin in p.pages[p.index.value]" :key="tftMapSkin.itemId">
-        <img :src="tftMapSkin.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="tftMapSkin in p.pages[p.index.value]" :key="tftMapSkin.itemId">
+        <NuxtLink class="text-decoration-none" :to="`/tft-map-skins/overview/${tftMapSkin.itemId}`">
+          <div class="card h-100 bg-transparent bg-screen border-light border-opacity-25" style="max-width: 140px; width: 140px;">
+            <img :src="tftMapSkin.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">{{ tftMapSkin.name }}</h5>
-          <Badge name="identifier">{{ tftMapSkin.itemId }}</Badge>
-        </div>
+            <div class="card-body d-flex flex-column justify-content-end">
+              <h5 class="card-title">{{ tftMapSkin.name }}</h5>
+              <Badge name="identifier">{{ tftMapSkin.itemId }}</Badge>
+            </div>
+          </div>
+        </NuxtLink>
       </div>
     </div>
 
diff --git a/pages/tft-map-skins/overview/[id].vue b/pages/tft-map-skins/overview/[id].vue
new file mode 100644
index 0000000..f466e37
--- /dev/null
+++ b/pages/tft-map-skins/overview/[id].vue
@@ -0,0 +1,39 @@
+<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">{{ tftMapSkin.name }}</h1>
+
+      <div class="d-flex flex-wrap gap-3 mb-3">
+        <Badge label="Content ID:">{{ tftMapSkin.contentId }}</Badge>
+        <Badge label="Item ID:">{{ tftMapSkin.itemId }}</Badge>
+        <Badge label="Group Name:">{{ tftMapSkin.groupName }}</Badge>
+        <Badge label="Group ID:">{{ tftMapSkin.groupId }}</Badge>
+      </div>
+    </div>
+
+    <div class="col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
+      <img :src="tftMapSkin.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';
+import { TftMapSkin } from '~/core/models';
+
+const route = useRoute();
+const id = route.params.id as unknown;
+
+const { client } = useClient();
+const { currentLocale } = useLocale();
+const getTftMapSkins = async () => await client.tftMapSkins.listAsync({ locale: currentLocale.value, version: "latest"});
+
+const tftMapSkins = ref(await getTftMapSkins());
+watch(currentLocale, async() => {
+  tftMapSkins.value = await getTftMapSkins();
+});
+
+const tftMapSkin = computed(() => tftMapSkins.value.find((x) => x.itemId == id) || new TftMapSkin({}));
+</script>
\ No newline at end of file