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

Add summoner emotes feat

Browse Source
This commit is contained in:
Blossomi Shymae
2024-05-02 09:38:22 -05:00
parent 6a9c89f92a
commit 4cec226e1d
3 changed files with 48 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/default.vue
View File

@@ -43,7 +43,7 @@
</NuxtLink>
</li>
<li class="nav-item">
<NuxtLink class="nav-link" to="/">
<NuxtLink class="nav-link" to="/summoner-emotes">
<MaterialIcon name="face-woman-shimmer" :size="24" /> Emotes
</NuxtLink>
</li>

24
pages/index.vue
View File

@@ -21,28 +21,28 @@
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="d-flex flex-column justify-content-center align-items-stretch gap-2">
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25" asp-area="" asp-page="/Champion/Index">
<NuxtLink to="/champions" class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
<MaterialIcon name="account-group" :size="24"/> Champions
</a>
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
</NuxtLink>
<NuxtLink to="/items" class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
<MaterialIcon name="magic-staff" :size="24"/> Items
</a>
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
</NuxtLink>
<NuxtLink to="/runes" class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
<MaterialIcon name="shield" :size="24"/> Runes
</a>
</NuxtLink>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="d-flex flex-column justify-content-center align-items-stretch gap-2">
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
<NuxtLink to="/summoner-icons" class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
<MaterialIcon name="image" :size="24"/> Summoner Icons
</a>
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
</NuxtLink>
<NuxtLink to="/ward-skins" class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
<MaterialIcon name="floor-lamp" :size="24"/> Ward Skins
</a>
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
</NuxtLink>
<NuxtLink to="/summoner-emotes" class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
<MaterialIcon name="face-woman-shimmer" :size="24"/> Emotes
</a>
</NuxtLink>
</div>
</div>
</div>

35
pages/summoner-emotes/index.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div class="d-flex flex-column gap-2">
<h1 class="mb-3">Summoner Emotes</h1>
<Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
:on-first="first" :on-last="last"/>
<div class="d-flex flex-wrap justify-content-around gap-2">
<div class="card bg-transparent bg-screen border-light border-opacity-25" style="max-width: 140px; width: 140px;"
v-for="emote in pages[index]" :key="emote.id">
<img :src="emote.getInventoryIcon('latest')" loading="lazy" onerror="this.onerror = null; this.src='/img/error.png';" />
<div class="card-body">
<h5 class="card-title">{{ emote.name }}</h5>
<Badge name="identifier">{{ emote.id }}</Badge>
</div>
</div>
</div>
<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 Badge from '~/components/Badge.vue';
import useClient from '../../composables/useClient';
import usePagination from '../../composables/usePagination';
const { client } = useClient();;
const emotes = await client.summonerEmotes.listAsync({locale: "default", version: "latest"});
const { count, pages, index, prev, next, first, last } = usePagination(emotes, 24);
</script>