Add champions feat

pages/champions/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="d-flex flex-column gap-2">
+      <h1>Champions</h1>
+
+      <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="summary in summaries" :key="summary.id">
+                <th scope="row">
+                    <NuxtLink class="text-decoration-none text-light" :to="`/champions/overview/${summary.id}`">
+                        {{ summary.id }}
+                    </NuxtLink>
+                </th>
+                <td>
+                    <NuxtLink :to="`/champions/overview/${summary.id}`">
+                        <img :src="summary.getIcon({locale: 'default', version: 'latest'})" width="32px" height="32px" loading="lazy" onerror="this.onerror = null; this.src='/img/error.png'"/>
+                    </NuxtLink>
+                </td>
+                <td>
+                    <NuxtLink class="text-decoration-none text-light" :to="`/champions/overview/${summary.id}`">
+                        {{ summary.name }}
+                    </NuxtLink>
+                </td>
+            </tr>
+          </tbody>
+      </table>
+      </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useClient from '../../composables/useClient';
+
+const { client } = useClient();
+
+const summaries = await client.championSummaries.listAsync({locale: "default", version: "latest"});
+</script>

pages/champions/overview/[id].vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="row">
+      <div class="col-md-6 col-sm-12">
+          <h1 class="display-4 mb-0">{{ champion.name }}</h1>
+          <h3 class="ms-4 text-muted fw-light">{{ champion.title }}</h3>
+          <p class="text-muted">{{ champion.shortBio }}</p>
+
+          <div class="d-flex flex-wrap gap-3 mb-3">
+            <Badge name="identifier">{{ champion.id }}</Badge>
+            <Badge name="tag">{{ champion.alias }}</Badge>
+            <Badge name="sword">{{ champion.playstyleInfo.damage }}</Badge>
+            <Badge name="shield">{{ champion.playstyleInfo.durability }}</Badge>
+            <Badge name="cancel">{{ champion.playstyleInfo.crowdControl }}</Badge>
+            <Badge name="run">{{ champion.playstyleInfo.mobility }}</Badge>
+            <Badge name="hammer-wrench">{{ champion.playstyleInfo.utility }}</Badge>
+          </div>
+
+          <div class="list-group bg-transparent">
+            <div class="list-group-item bg-transparent bg-blur-4 border-light border-opacity-25"
+                v-for="spell in champion.spells">
+                <h5><span class="fw-light me-2">{{ spell.spellKey }}</span> {{ spell.name }}</h5>
+                <small v-html="spell.description"></small>
+            </div>
+          </div>
+      </div>
+
+      <div class="col-md-6 col-sm-12">
+          <div class="d-flex justify-content-between mb-2">
+              <div style="min-height: 560px; min-width: 308px;" id="champion-loading-screen">
+                  <img class="border border-light border-opacity-25 rounded" :src="currentSkin" loading="lazy" />
+              </div>
+              <div class="d-flex flex-row flex-wrap align-items-center gap-2 border-start border-5 border-light border-opacity-10 ms-0 ps-2">
+                <button class="btn btn-dark flex-grow-1 border-light border-opacity-25 bg-transparent bg-blur-3"
+                  v-for="skin in champion.skins" :key="skin.id" @click="swapLoadScreen(skin.id)">
+                    {{ skin.name }}
+                </button>
+              </div>
+          </div>
+
+          <div class="bg-transparent bg-blur-4 border border-light border-opacity-25 p-3 rounded">
+              <h5><span class="fw-light me-2">i</span> {{ champion.passive.name}}</h5>
+              <small v-html="champion.passive.description"></small>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Badge from '~/components/Badge.vue';
+import { useRoute } from 'vue-router';
+import useClient from '../../../composables/useClient';
+
+const route = useRoute();
+const id = route.params.id as unknown;
+
+const { client } = useClient();
+const champion = await client.champions.getAsync(id as number, {locale: "default", version: "latest"});
+const currentSkin = ref(champion.skins[0].getLoadScreen('latest'));
+const swapLoadScreen = (id: number) => {
+    currentSkin.value = champion.skins.find((x) => x.id == id)?.getLoadScreen('latest') as string;
+}
+</script>

pages/summoner-icons/index.vue

@@ -2,10 +2,8 @@
   <div class="d-flex flex-column gap-2">
       <h1>Summoner Icons</h1>
 
-      <vc:search></vc:search>
-
-      <vc:pagination path="/SummonerIcon" list="@Model.Icons.Pages"></vc:pagination>
-
+      <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">
@@ -17,7 +15,7 @@
                   </tr>
               </thead>
               <tbody>
-                <tr v-for="icon in icons" :key="icon.id">
+                <tr v-for="icon in pages[index]" :key="icon.id">
                         <th scope="row">
                             <NuxtLink class="text-decoration-none text-light" :to="`/summoner-icons/overview/${icon.id}`">
                                 {{ icon.id }}
@@ -30,7 +28,7 @@
                         </td>
                         <td>
                             <NuxtLink class="text-decoration-none text-light" :to="`/summoner-icons/overview/${icon.id}`">
-                                @icon.Title
+                                {{ icon.title }}
                             </NuxtLink>
                         </td>
                 </tr>
@@ -38,15 +36,19 @@
           </table>
       </div>
 
-      <vc:pagination path="/SummonerIcon" list="@Model.Icons.Pages"></vc:pagination>
+      <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 { SummonerIcon } from '../../core/models';
+import usePagination from '../../composables/usePagination';
 
 const { client } = useClient();
 
 const icons = await client.summonerIcons.listAsync({locale: "default", version: "latest"});
+const { count, pages, index, prev, next, first, last } = usePagination(icons, 100);
 </script>

pages/summoner-icons/overview/[id].vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="row">
+      <div class="col-md-6 col-sm-12">
+          <h1 class="display-4 mb-0">{{ icon.title }}</h1>
+          <h4 class="ms-4 border-bottom border-light border-opacity-25 border-4 pb-2">{{ icon.yearReleased }}</h4>
+          <div class="d-flex flex-wrap gap-2 mt-3 mb-3">
+            <Badge name="identifier">{{ icon.id }}</Badge>
+            <Badge name="star" v-if="icon.isLegacy"></Badge>
+          </div>
+          <p class="text-muted">{{ icon.descriptions[0].description }}</p>
+      </div>
+
+      <div class="col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
+          <img class="border rounded border-dark" :src="icon.getImage('latest')"/>
+      </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Badge from '~/components/Badge.vue';
+import { useRoute } from 'vue-router';
+import useClient from '../../../composables/useClient';
+import { SummonerIcon } from '~/core/models';
+
+const route = useRoute();
+const id = route.params.id as unknown;
+
+const { client } = useClient();
+
+const icons = await client.summonerIcons.listAsync({locale: "default", version: "latest"});
+const icon = icons.find((x) => x.id == id) || new SummonerIcon({});
+</script>