Valentin Haudiquet
271c2b26d8
- backend: add summoner spells - backend: add build variants - backend: builds are now storing full tree with runes (keystones) - backend: build trees are split on starter items and merged on runes - frontend: computing core tree now - frontend: variant selectors
77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
|
|
|
|
const { summonerSpellMap } = useSummonerSpellMap()
|
|
|
|
defineProps<{
|
|
summonerSpells: Array<{ id: number; count: number; pickrate: number }>
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="summoner-spells-section">
|
|
<div class="summoner-spells-row">
|
|
<div v-for="(spell, i) in summonerSpells" :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: row;
|
|
}
|
|
|
|
.summoner-spells-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.summoner-spell-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.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.65rem;
|
|
color: var(--color-on-surface);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Responsive: Mobile */
|
|
@media only screen and (max-width: 900px) {
|
|
.summoner-spell-img,
|
|
.summoner-spell-placeholder {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
</style>
|