mirror of
https://github.com/BlossomiShymae/clean-cuts.git
synced 2025-12-07 02:30:48 +01:00
Update champion viewer
This commit is contained in:
BlossomiShymae
86
pages/champions/[id].vue
Normal file
86
pages/champions/[id].vue
Normal file
@@ -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>
|
||||
@@ -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'})"
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user