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

Update champion viewer

Browse Source
This commit is contained in:
BlossomiShymae
2024-10-08 21:48:03 -05:00
parent a7d2e73847
commit 18bb222a41
6 changed files with 116 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app.vue
View File

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

12
core/models.ts
View File

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

6
layouts/default.vue
View File

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

86
pages/champions/[id].vue Normal file
View 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>

2
pages/champions/index.vue
View File

@@ -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'})"

73
pages/champions/overview/[id].vue
View File

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