93 lines
1.8 KiB
Vue
93 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
|
|
|
|
interface SummonerSpellData {
|
|
id: number
|
|
count: number
|
|
pickrate: number
|
|
}
|
|
|
|
const props = defineProps<{
|
|
spells: Array<SummonerSpellData>
|
|
summonerSpellMap: Map<number, SummonerSpell>
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="summoner-spells-section">
|
|
<h3 class="section-title">Summoner Spells</h3>
|
|
<div class="summoner-spells-row">
|
|
<div v-for="(spell, i) in props.spells.slice(0, 2)" :key="i" class="summoner-spell-item">
|
|
<NuxtImg
|
|
v-if="summonerSpellMap.get(spell.id)"
|
|
class="summoner-spell-img"
|
|
:src="CDRAGON_BASE + mapPath(summonerSpellMap.get(spell.id)!.iconPath)"
|
|
/>
|
|
<div v-else class="summoner-spell-placeholder" />
|
|
<span class="spell-pickrate">{{ (spell.pickrate * 100).toFixed(0) }}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.summoner-spells-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
color: #4a9eff;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.summoner-spells-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.summoner-spell-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.summoner-spell-img {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--color-on-surface);
|
|
}
|
|
|
|
.summoner-spell-placeholder {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: var(--color-surface);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--color-on-surface);
|
|
}
|
|
|
|
.spell-pickrate {
|
|
font-size: 0.7rem;
|
|
color: var(--color-on-surface);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Responsive: Mobile */
|
|
@media only screen and (max-width: 900px) {
|
|
.section-title {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.summoner-spell-img,
|
|
.summoner-spell-placeholder {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
}
|
|
</style>
|