Add ward skins feat

core/models.ts

@@ -259,6 +259,14 @@ export class WardSkin extends CommunityDragonObject {
     this.regionDescriptions = json.regionalDescriptions.map((x: any) => new Description(x));
     this.rarities = json.rarities.map((x: any) => new Rarity(x));
   }
+
+  getWardImage(version: string): string {
+    return this.resolveClientPath({path: this.wardImagePath, args: {locale: "default", version: version}});
+  }
+
+  getWardShadowImage(version: string): string {
+    return this.resolveClientPath({path: this.wardShadowImagePath, args: {locale: "default", version: version}});
+  }
 }
 
 export class Description extends CommunityDragonObject {

layouts/default.vue

@@ -38,7 +38,7 @@
                             </NuxtLink>
                         </li>
                         <li class="nav-item">
-                            <NuxtLink class="nav-link" to="/">
+                            <NuxtLink class="nav-link" to="/ward-skins">
                               <MaterialIcon name="floor-lamp" :size="24" /> Ward Skins
                             </NuxtLink>
                         </li>

pages/ward-skins/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="d-flex flex-column gap-2">
+      <h1>Ward Skins</h1>
+
+      <Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
+        :on-first="first" :on-last="last"/>
+      
+      <div class="overflow-hidden rounded border border-light border-opacity-25 p-4">
+          <table class="sortable table table-borderless">
+              <thead>
+                  <tr>
+                      <th scope="col">Id</th>
+                      <th scope="col">Icon</th>
+                      <th scope="col">Name</th>
+                  </tr>
+              </thead>
+              <tbody>
+                      <tr v-for="skin in pages[index]" :key="skin.id">
+                          <th scope="row">
+                              <NuxtLink class="text-decoration-none text-light" :to="`/ward-skins/overview/${skin.id}`">
+                                  {{ skin.id }}
+                              </NuxtLink>
+                          </th>
+                          <td>
+                              <NuxtLink class="text-decoration-none text-light" :to="`/ward-skins/overview/${skin.id}`">
+                                  <img :src="skin.getWardImage('latest')" width="32" height="32" loading="lazy" onerror="this.onerror = null; this.src='/img/error.png'"/>
+                              </NuxtLink>
+                          </td>
+                          <td>
+                              <NuxtLink class="text-decoration-none text-light" :to="`/ward-skins/overview/${skin.id}`">
+                                  {{ skin.name }}
+                              </NuxtLink>
+                          </td>
+                      </tr>
+              </tbody>
+          </table>
+      </div>
+
+      <Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
+        :on-first="first" :on-last="last"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Pagination from '../../components/Pagination.vue';
+import useClient from '../../composables/useClient';
+import usePagination from '../../composables/usePagination';
+
+const { client } = useClient();
+
+const skins = await client.wardSkins.listAsync({locale: "default", version: "latest"});
+const { count, pages, index, prev, next, first, last } = usePagination(skins, 100);
+</script>

pages/ward-skins/overview/[id].vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="row">
+      <div class="col-md-6 col-sm-12">
+          <h1 class="display-4 mb-0">{{ skin.name }}</h1>
+          <p class="text-muted border-bottom pb-3 border-light border-opacity-25 border-4">{{ skin.regionDescriptions[0].description }}</p>
+
+          <div class="d-flex flex-wrap gap-3">
+              <Badge name="identifier">{{ skin.id }}</Badge>
+              <Badge name="star" v-if="skin.isLegacy"></Badge>
+          </div>
+      </div>
+
+      <div class="col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
+          <img class="position-relative" :src="skin.getWardImage('latest')"/>
+          <img class="position-absolute z-index--10" :src="skin.getWardShadowImage('latest')" />
+      </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { WardSkin } from '~/core/models';
+import Badge from '../../../components/Badge.vue';
+import useClient from '../../../composables/useClient';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const id = route.params.id as unknown;
+
+const { client } = useClient();
+
+const skins = await client.wardSkins.listAsync({locale: "default", version: "latest"});
+const skin = skins.find((x) => x.id == id) || new WardSkin({});
+</script>