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 overview for TFT map skins

Browse Source
This commit is contained in:
BlossomiShymae
2024-09-14 14:47:21 -05:00
parent 8058c4b233
commit d6eed61f8b
3 changed files with 55 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/Badge.vue
View File

@@ -1,6 +1,8 @@
<template> <template>
<span class="badge text-bg-dark border text-dark-emphasis fw-normal d-flex align-items-center gap-2 bg-transparent bg-blur-4 border-light border-opacity-25"> <span class="badge text-bg-dark border text-dark-emphasis fw-normal d-flex align-items-center gap-2 bg-transparent bg-blur-4 border-light border-opacity-25"
<MaterialIcon :size="24" :name="name" /> style="min-height: 32px;">
<span class="fw-bold" v-if="label">{{ label }}</span>
<MaterialIcon v-if="name" :size="24" :name="name" />
<slot></slot> <slot></slot>
</span> </span>
</template> </template>
@@ -9,7 +11,8 @@
import MaterialIcon from './MaterialIcon.vue'; import MaterialIcon from './MaterialIcon.vue';
defineProps<{ defineProps<{
name: string name?: string;
label?: string;
}>(); }>();
</script> </script>

17
pages/tft-map-skins/index.vue
View File

@@ -11,14 +11,17 @@
:on-first="p.first" :on-last="p.last"/> :on-first="p.first" :on-last="p.last"/>
<div class="d-flex flex-wrap justify-content-around gap-2"> <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;" <div class="d-inline-flex align-items-stretch justify-content-stretch" v-for="tftMapSkin in p.pages[p.index.value]" :key="tftMapSkin.itemId">
v-for="tftMapSkin in p.pages[p.index.value]" :key="tftMapSkin.itemId"> <NuxtLink class="text-decoration-none" :to="`/tft-map-skins/overview/${tftMapSkin.itemId}`">
<img :src="tftMapSkin.getLoadoutsIcon('latest')" loading="lazy" onerror="this.onerror = null; this.src='/clean-cuts/img/error.png';" /> <div class="card h-100 bg-transparent bg-screen border-light border-opacity-25" style="max-width: 140px; width: 140px;">
<img :src="tftMapSkin.getLoadoutsIcon('latest')" loading="lazy" onerror="this.onerror = null; this.src='/clean-cuts/img/error.png';" />
<div class="card-body d-flex flex-column justify-content-end"> <div class="card-body d-flex flex-column justify-content-end">
<h5 class="card-title">{{ tftMapSkin.name }}</h5> <h5 class="card-title">{{ tftMapSkin.name }}</h5>
<Badge name="identifier">{{ tftMapSkin.itemId }}</Badge> <Badge name="identifier">{{ tftMapSkin.itemId }}</Badge>
</div> </div>
</div>
</NuxtLink>
</div> </div>
</div> </div>

39
pages/tft-map-skins/overview/[id].vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div class="row">
<div class="col-md-6 col-sm-12">
<h1 class="display-4 pb-2 mb-3 border-bottom border-light border-opacity-25 border-4">{{ tftMapSkin.name }}</h1>
<div class="d-flex flex-wrap gap-3 mb-3">
<Badge label="Content ID:">{{ tftMapSkin.contentId }}</Badge>
<Badge label="Item ID:">{{ tftMapSkin.itemId }}</Badge>
<Badge label="Group Name:">{{ tftMapSkin.groupName }}</Badge>
<Badge label="Group ID:">{{ tftMapSkin.groupId }}</Badge>
</div>
</div>
<div class="col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
<img :src="tftMapSkin.getLoadoutsIcon('latest')" />
</div>
</div>
</template>
<script setup lang="ts">
import Badge from '~/components/Badge.vue';
import useClient from '~/composables/useClient';
import useLocale from '~/composables/useLocale';
import { TftMapSkin } from '~/core/models';
const route = useRoute();
const id = route.params.id as unknown;
const { client } = useClient();
const { currentLocale } = useLocale();
const getTftMapSkins = async () => await client.tftMapSkins.listAsync({ locale: currentLocale.value, version: "latest"});
const tftMapSkins = ref(await getTftMapSkins());
watch(currentLocale, async() => {
tftMapSkins.value = await getTftMapSkins();
});
const tftMapSkin = computed(() => tftMapSkins.value.find((x) => x.itemId == id) || new TftMapSkin({}));
</script>