Archive/clean-cuts
1
0
Fork 0
mirror of https://github.com/BlossomiShymae/clean-cuts.git synced 2025-12-06 10:10:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add champions feat

Browse Source
This commit is contained in:
Blossomi Shymae
2024-05-01 21:56:30 -05:00
parent cab1684b7c
commit 32b961dd32
9 changed files with 217 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
pages/champions/overview/[id].vue Normal file
View File

@@ -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>