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
128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
|
|
|
|
interface RuneBuild {
|
|
count: number
|
|
primaryStyle: number
|
|
secondaryStyle: number
|
|
selections: Array<number>
|
|
pickrate: number
|
|
}
|
|
|
|
const props = defineProps<{
|
|
runes: Array<RuneBuild>
|
|
perks: Map<number, Perk>
|
|
perkStyles: Map<number, PerkStyle>
|
|
}>()
|
|
|
|
const selectedIndex = ref(0)
|
|
|
|
const emit = defineEmits<{
|
|
select: [index: number]
|
|
}>()
|
|
|
|
function select(index: number) {
|
|
emit('select', index)
|
|
selectedIndex.value = index
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="compact-rune-selector">
|
|
<div
|
|
v-for="(rune, index) in props.runes"
|
|
:key="index"
|
|
:class="['compact-rune-option', { active: index === selectedIndex }]"
|
|
@click="select(index)"
|
|
>
|
|
<div class="compact-rune-content">
|
|
<NuxtImg
|
|
v-if="runes[index].primaryStyle"
|
|
class="compact-rune-img"
|
|
:src="CDRAGON_BASE + mapPath(perkStyles.get(runes[index].primaryStyle)?.iconPath!)"
|
|
/>
|
|
<NuxtImg
|
|
v-if="perks.get(runes[index].selections[0])"
|
|
class="compact-rune-img"
|
|
:src="CDRAGON_BASE + mapPath(perks.get(runes[index].selections[0])!.iconPath)"
|
|
/>
|
|
<NuxtImg
|
|
v-if="runes[index].secondaryStyle"
|
|
class="compact-rune-img"
|
|
:src="CDRAGON_BASE + mapPath(perkStyles.get(runes[index].secondaryStyle)?.iconPath!)"
|
|
/>
|
|
</div>
|
|
<span class="compact-rune-pickrate">{{ (rune.pickrate * 100).toFixed(1) }}%</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.compact-rune-selector {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
margin-top: -45px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.compact-rune-selector::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.compact-rune-option {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 6px 10px;
|
|
background: transparent;
|
|
border: 2px solid transparent;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.compact-rune-option:hover {
|
|
border-color: var(--color-on-surface);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.compact-rune-option.active {
|
|
border-color: #4a9eff;
|
|
background: linear-gradient(135deg, rgba(74, 158, 255, 0.15), rgba(74, 158, 255, 0.05));
|
|
}
|
|
|
|
.compact-rune-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.compact-rune-img {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.compact-rune-pickrate {
|
|
font-size: 0.65rem;
|
|
color: var(--color-on-surface);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.compact-rune-option.active .compact-rune-pickrate {
|
|
opacity: 0.9;
|
|
color: #4a9eff;
|
|
}
|
|
|
|
/* Mobile fix: Remove negative margin to prevent overlap with runes */
|
|
@media only screen and (max-width: 900px) {
|
|
.compact-rune-selector {
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
</style>
|