Update champion viewer

app.vue

@@ -14,7 +14,15 @@ AOS.init();
 
 <style lang="scss">
 .app-background { 
-  background: rgba(41, 31, 68, 0.875);
+  background: rgba(41, 31, 68, 0.9);
+}
+
+.app-background-solid {
+  background: rgb(41, 31, 68);
+}
+
+.aos-fix[data-aos][data-aos].aos-animate {
+    transform: unset;
 }
 
 .page-enter-active,
@@ -98,7 +106,11 @@ table > tbody > tr:hover > * {
 }
 
 ul.dropdown-menu {
-  @extend .app-background
+  @extend .app-background-solid;
+}
+
+.list-group-item {
+  @extend .app-background;
 }
 
 .dropdown-menu {

core/models.ts

@@ -126,19 +126,26 @@ export class SkinLine extends CommunityDragonObject {
 
 export class Passive extends CommunityDragonObject {
   name: string;
+  abilityIconPath: string;
   description: string;
 
   constructor(json: any) {
     super();
 
     this.name = json.name;
+    this.abilityIconPath = json.abilityIconPath;
     this.description = json.description;
   }
+
+  getAbilityIcon(version: string): string {
+    return this.resolveGamePath({ path: this.abilityIconPath, version: version});
+  }
 }
 
 export class Spell extends CommunityDragonObject {
   spellKey: string;
   name: string;
+  abilityIconPath: string;
   description: string;
 
   constructor(json: any) {
@@ -146,8 +153,13 @@ export class Spell extends CommunityDragonObject {
 
     this.spellKey = json.spellKey;
     this.name = json.name;
+    this.abilityIconPath = json.abilityIconPath;
     this.description = json.description;
   }
+
+  getAbilityIcon(version: string): string {
+    return this.resolveGamePath({ path: this.abilityIconPath, version: version});
+  }
 }
 
 export class ChampionSummary extends CommunityDragonObject {

layouts/default.vue

@@ -17,7 +17,7 @@ const breadcrumbs = computed(() => {
 
 <template>
   <div class="h-100">
-    <header class="container">
+    <header class="container-fluid">
         <Card>
           <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light m-0 p-0">
             <NuxtLink class="navbar-brand fw-light" to="/" >
@@ -132,13 +132,13 @@ const breadcrumbs = computed(() => {
             </nav>
         </Card>
     </header>
-    <div class="container">
+    <div class="container-fluid">
         <main role="main" class="pt-3 pb-3">
             <slot></slot>
         </main>
     </div>
 
-    <footer class="container mb-4">
+    <footer class="container-fluid mb-4">
         <Card>
           <div class="d-flex justify-content-around align-items-center gap-2 mb-3 flex-wrap">
               <NuxtLink class="text-decoration-none text-light" to="/about">About</NuxtLink>

pages/champions/[id].vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const route = useRoute();
+const id = route.params.id as unknown;
+
+const { client } = useClient();
+const { currentLocale } = useLocale();
+const getChampion = async () => await client.champions.getAsync(id as number, {locale: currentLocale.value, version: "latest"});
+
+const champion = ref(await getChampion());
+const data = computed(() => `https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champions/${champion.value.id}.json`);
+watch(currentLocale, async () => {
+  champion.value = await getChampion();
+});
+
+const currentSkin = ref(champion.value.skins[0]);
+const swapCurrentSkin = (id: number) => {
+    currentSkin.value = champion.value.skins.find((x) => x.id == id) as Skin;
+}
+</script>
+
+<template>
+  <div>
+    <Card class="mb-2 aos-fix" data-aos="fade-right" data-aos-duration="1000" style="z-index: 100 !important;">
+      <div class="d-flex gap-4 flex-wrap align-items-center justify-content-center">
+        <div style="min-width: 300px; max-width: 300px;">
+            <NuxtLink class="text-decoration-none" :to="`/skins/overview/${currentSkin.id}`">
+              <div class="ratio ratio-4x3">
+                <img class="object-fit-cover rounded" :src="currentSkin.getTile({locale: currentLocale, version: 'latest'})"/>
+              </div>
+            </NuxtLink>
+            <div class="dropdown w-100">
+              <button class="btn dropdown-toggle w-100 text-light" type="button" data-bs-toggle="dropdown">
+                {{ currentSkin.name }} <span class="ms-2 fw-bold">ID: {{ currentSkin.id }}</span>
+              </button>
+              <ul class="dropdown-menu w-100 p-2">
+                <li v-for="skin in champion.skins">
+                  <button class="btn" type="button" @click="swapCurrentSkin(skin.id)">{{ skin.name }}</button>
+                </li>
+              </ul>
+            </div>
+        </div>
+        <div class="flex-grow-1" style="width: 300px;">
+          <h1 class="display-4 mb-0">{{ champion.name }}</h1>
+          <h3 class="ms-4 text-light fw-light">{{ champion.title }}</h3>
+          <p class="text-light">{{ champion.shortBio }}</p>
+          <div class="d-flex flex-wrap gap-3 mb-3">
+            <Badge label="ID">{{ champion.id }}</Badge>
+            <Badge label="Key">{{ champion.alias }}</Badge>
+            <Badge label="Damage">{{ champion.playstyleInfo.damage }}</Badge>
+            <Badge label="Durability">{{ champion.playstyleInfo.durability }}</Badge>
+            <Badge label="Crowd Control">{{ champion.playstyleInfo.crowdControl }}</Badge>
+            <Badge label="Mobility">{{ champion.playstyleInfo.mobility }}</Badge>
+            <Badge label="Utility">{{ champion.playstyleInfo.utility }}</Badge>
+          </div>
+          <a :href="data" class="text-light text-decoration-none">Source: {{ data }}</a>
+        </div>
+      </div>
+    </Card>
+
+    <div class="list-group" data-aos="fade-left" data-aos-duration="1000">
+      <div class="list-group-item d-flex gap-3 border-light border-opacity-25">
+        <div style="min-width: 64px;">
+          <div class="ratio ratio-1x1">
+            <img :src="champion.passive.getAbilityIcon('latest')" class="rounded"/>
+          </div>
+        </div>
+        <div>
+          <h5 class="text-light"><span class="fw-bold me-2">i</span> {{ champion.passive.name}}</h5>
+          <small v-html="champion.passive.description"></small>
+        </div>
+      </div>
+      <div class="list-group-item d-flex gap-3 border-light border-opacity-25"
+          v-for="spell in champion.spells">
+          <div style="min-width: 64px;">
+            <div class="ratio ratio-1x1">
+              <img :src="spell.getAbilityIcon('latest')" class="rounded"/>
+            </div>
+          </div>
+          <div>
+            <h5 class="text-light"><span class="fw-bold me-2">{{ spell.spellKey }}</span> {{ spell.name }}</h5>
+            <small v-html="spell.description"></small>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>

pages/champions/index.vue

@@ -21,7 +21,7 @@ watch(currentLocale, async () => {
             style="width: 200px;"
             data-aos="zoom-out"
             data-aos-duration="500">
-            <NuxtLink :to="`/champions/overview/${summary.id}`">
+            <NuxtLink :to="`/champions/${summary.id}`">
                 <div class="ratio ratio-16x9 position-relative">
                     <img class="object-fit-cover rounded" 
                         :src="skins.find(x => (x.id / 1000) == summary.id)?.getTile({locale: currentLocale, version: 'latest'})"

pages/champions/overview/[id].vue

@@ -1,73 +0,0 @@
-<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">
-                  <NuxtLink class="text-decoration-none" :to="`/skins/overview/${currentSkin.id}`">
-                    <img class="border border-light border-opacity-25 rounded" :src="currentSkin.getLoadScreen('latest')" loading="lazy" />
-                  </NuxtLink>
-              </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';
-import useLocale from '~/composables/useLocale';
-import { Skin } from '../../../core/models';
-
-const route = useRoute();
-const id = route.params.id as unknown;
-
-const { client } = useClient();
-const { currentLocale } = useLocale();
-const getChampion = async () => await client.champions.getAsync(id as number, {locale: currentLocale.value, version: "latest"});
-
-const champion = ref(await getChampion());
-watch(currentLocale, async () => {
-  champion.value = await getChampion();
-});
-
-const currentSkin = ref(champion.value.skins[0]);
-const swapLoadScreen = (id: number) => {
-    currentSkin.value = champion.value.skins.find((x) => x.id == id) as Skin;
-}
-</script>