129 lines
2.8 KiB
Vue
129 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
|
|
}
|
|
|
|
interface PerkStyle {
|
|
id: number
|
|
iconPath: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
runes: Array<RuneBuild>
|
|
primaryStyles: Array<PerkStyle>
|
|
secondaryStyles: Array<PerkStyle>
|
|
keystoneIds: Array<number>
|
|
perks: Map<number, Perk>
|
|
selectedIndex: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
select: [index: number]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="compact-rune-selector">
|
|
<div
|
|
v-for="(rune, index) in props.runes"
|
|
:key="index"
|
|
:class="['compact-rune-option', { active: index === props.selectedIndex }]"
|
|
@click="emit('select', index)"
|
|
>
|
|
<div class="compact-rune-content">
|
|
<NuxtImg
|
|
v-if="primaryStyles[index]"
|
|
class="compact-rune-img"
|
|
:src="CDRAGON_BASE + mapPath(primaryStyles[index].iconPath)"
|
|
/>
|
|
<NuxtImg
|
|
v-if="keystoneIds[index] && props.perks.get(keystoneIds[index])"
|
|
class="compact-rune-img"
|
|
:src="CDRAGON_BASE + mapPath(props.perks.get(keystoneIds[index])!.iconPath)"
|
|
/>
|
|
<NuxtImg
|
|
v-if="secondaryStyles[index]"
|
|
class="compact-rune-img"
|
|
:src="CDRAGON_BASE + mapPath(secondaryStyles[index].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>
|