Add champions feat

components/Pagination.vue

@@ -1,20 +1,24 @@
 <template>
   <div class="btn-group">
-    <NuxtLink :class="`btn btn-outline-dark ${hasFurtherPreviousCss}`">
+    <a :class="`btn btn-outline-dark`"
+      @click="onFirst()">
       <MaterialIcon name="chevron-double-left" :size="32" />
-    </NuxtLink>
+    </a>
-    <NuxtLink :class="`btn btn-outline-dark ${hasPreviousCss}`">
+    <a :class="`btn btn-outline-dark ${hasPrevCss}`"
+      @click="onPrev()">
       <MaterialIcon name="chevron-left" :size="32" />
-    </NuxtLink>
+    </a>
-    <NuxtLink :class="`btn btn-outline-dark text-light`">
+    <a :class="`btn btn-outline-dark text-light`">
-      {{ pageIndex / totalPages }}
+      {{ `${index} / ${count - 1}` }}
-    </NuxtLink>
+    </a>
-    <NuxtLink :class="`btn btn-outline-dark ${hasNextCss}`">
+    <a :class="`btn btn-outline-dark ${hasNextCss}`"
+      @click="onNext()">
       <MaterialIcon name="chevron-right" :size="32" />
-    </NuxtLink>
+    </a>
-    <NuxtLink :class="`btn btn-outline-dark ${hasFurtherNextCss}`">
+    <a :class="`btn btn-outline-dark `"
+      @click="onLast()">
       <MaterialIcon name="chevron-double-right" :size="32" />
-    </NuxtLink>
+    </a>
   </div>
 </template>
 
@@ -22,18 +26,17 @@
 import MaterialIcon from './MaterialIcon.vue';
 
 const props = defineProps<{
-  hasPrevious: boolean;
+  index: number,
-  hasFurtherPrevious: boolean;
+  pages: Array<any>,
-  hasNext: boolean;
+  count: number,
-  hasFurtherNext: boolean;
+  onPrev: () => void,
-  pageIndex: number;
+  onNext: () => void,
-  totalPages: number;
+  onFirst: () => void,
+  onLast: () => void,
 }>();
 
-const hasPreviousCss = !props.hasPrevious ? "disabled" : "";
+const hasPrevCss = computed(() => { return !(props.index > 0) ? "disabled" : ""; });
-const hasFurtherPreviousCss = !props.hasFurtherPrevious ? "disabled" : "";
+const hasNextCss = computed(() => { return !(props.index < props.count - 1) ? "disabled" : "";})
-const hasNextCss = !props.hasNext ? "disabled" : "";
-const hasFurtherNextCss = !props.hasFurtherNext ? "disabled" : "";
 </script>
 
 <style lang="scss" scoped>

composables/usePagination.ts

@@ -0,0 +1,32 @@
+export default function usePagination<T>(iterable: Array<T>, pageSize: number) {
+  const length = Math.ceil(iterable.length / pageSize);
+  const pages = Array.from({ length: length }, (v, k) => {
+    return iterable.slice(k * pageSize, k * pageSize + pageSize);
+  });
+  const index = ref(0);
+
+  const prev = () => {
+    if (index.value - 1 < 0) return;
+    index.value--;
+  };
+  const next = () => {
+    if (index.value + 1 >= length) return;
+    index.value++;
+  };
+  const first = () => {
+    index.value = 0;
+  };
+  const last = () => {
+    index.value = length - 1;
+  };
+
+  return {
+    count: length,
+    pages: pages,
+    index: index,
+    prev,
+    next,
+    first,
+    last,
+  };
+}

core/client.ts

@@ -1,4 +1,4 @@
-import { ChampionSummary, Item, LocaleVersionArgs, Perk, SummonerEmote, SummonerIcon, WardSkin } from "./models";
+import { Champion, ChampionSummary, Item, LocaleVersionArgs, Perk, SummonerEmote, SummonerIcon, WardSkin } from "./models";
 import axios from "axios";
 
 export abstract class ApiObject {
@@ -12,6 +12,7 @@ export abstract class ApiObject {
 export class Client {
   public items: ItemApi;
   public perks: PerkApi;
+  public champions: ChampionApi;
   public championSummaries: ChampionSummaryApi;
   public summonerEmotes: SummonerEmoteApi;
   public summonerIcons: SummonerIconApi;
@@ -20,6 +21,7 @@ export class Client {
   constructor() {
     this.items = new ItemApi();
     this.perks = new PerkApi();
+    this.champions = new ChampionApi();
     this.championSummaries = new ChampionSummaryApi();
     this.summonerEmotes = new SummonerEmoteApi();
     this.summonerIcons = new SummonerIconApi();
@@ -41,6 +43,13 @@ export class PerkApi extends ApiObject {
   }
 }
 
+export class ChampionApi extends ApiObject {
+  async getAsync(id: number, args: LocaleVersionArgs): Promise<Champion> {
+    let res = await axios.get(`${this.getClientPath(args)}/v1/champions/${id}.json`);
+    return new Champion(res.data);
+  }
+}
+
 export class ChampionSummaryApi extends ApiObject {
   async listAsync(args: LocaleVersionArgs): Promise<Array<ChampionSummary>> {
     let res = await axios.get(`${this.getClientPath(args)}/v1/champion-summary.json`);
@@ -58,7 +67,7 @@ export class SummonerEmoteApi extends ApiObject {
 export class SummonerIconApi extends ApiObject {
   async listAsync(args: LocaleVersionArgs): Promise<Array<SummonerIcon>> {
     let res = await axios.get(`${this.getClientPath(args)}/v1/summoner-icons.json`);
-    return res.data.map((x: any) => new SummonerEmote(x));
+    return res.data.map((x: any) => new SummonerIcon(x));
   }
 }
 

layouts/default.vue

@@ -5,7 +5,7 @@
         <div class="background background-transparent background-blur-2"></div>
         <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom border-light border-opacity-25 border-2 box-shadow">
             <div class="container">
-                <NuxtLink class="navbar-brand fw-light" to="/" ><Title /></NuxtLink>
+                <NuxtLink class="navbar-brand fw-light" to="/" ><TheTitle /></NuxtLink>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                         aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
@@ -18,7 +18,7 @@
                             </NuxtLink>
                         </li>
                         <li class="nav-item">
-                            <NuxtLink class="nav-link" to="/">
+                            <NuxtLink class="nav-link" to="/champions">
                               <MaterialIcon name="account-group" :size="24" /> Champions
                             </NuxtLink>
                         </li>
@@ -33,7 +33,7 @@
                             </NuxtLink>
                         </li>
                         <li class="nav-item">
-                            <NuxtLink class="nav-link" to="/">
+                            <NuxtLink class="nav-link" to="/summoner-icons">
                               <MaterialIcon name="image" :size="24" /> Summoner Icons
                             </NuxtLink>
                         </li>

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>
+      <Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
-
+        :on-first="first" :on-last="last"/>
-      <vc:pagination path="/SummonerIcon" list="@Model.Icons.Pages"></vc:pagination>
-
 
       <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>

utils/paginated-array.ts

@@ -1,50 +0,0 @@
-export class PaginatedArray<T> extends Array<T> {
-  pageSize: number;
-  items: Array<T>;
-  pageIndex: number;
-  totalPages: number;
-  
-  constructor(items: Array<T>, pageIndex: number, pageSize: number) {
-    super();
-
-    this.pageSize = pageSize;
-    this.items = items;
-
-    this.pageIndex = pageIndex;
-    this.totalPages = Math.ceil(items.length / pageSize);   
-    
-    this.push(...items.slice((pageIndex - 1) * pageSize).slice(0, pageSize));
-  }
-
-  public get hasFurtherPreviousPage() {
-    return this.pageIndex > 2;
-  }
-
-  public get hasPreviousPage() {
-    return this.pageIndex > 1;
-  }
-
-  public get hasNextPage() {
-    return this.pageIndex < this.totalPages;
-  }
-
-  public get hasFurtherNextPage() {
-    return this.pageIndex < this.totalPages - 1;
-  }
-
-  public get furtherPreviousPage() {
-    return this.pageIndex - 2;
-  }
-
-  public get previousPage() {
-    return this.pageIndex - 1;
-  }
-
-  public get nextPage() {
-    return this.pageIndex + 1;
-  }
-
-  public get furtherNextPage() {
-    return this.pageIndex + 2;
-  }
-}