85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
// Runes styles: domination, precision, sorcery, inspiration, resolve
|
|
runes: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
})
|
|
|
|
const runes = props.runes
|
|
|
|
const currentlySelectedPage = ref(runes[0])
|
|
const primaryStyles = ref([])
|
|
const secondaryStyles = ref([])
|
|
const keystoneIds = ref([])
|
|
|
|
let { data: perks_data } = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perks.json")
|
|
const perks = reactive(new Map())
|
|
for(let perk of perks_data.value) {
|
|
perks.set(perk.id, perk)
|
|
}
|
|
|
|
let { data: stylesData } = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json")
|
|
for(let style of stylesData.value.styles) {
|
|
for(let rune of runes) {
|
|
if(style.id == rune.primaryStyle) {
|
|
rune.primaryStyleValue = style
|
|
primaryStyles.value.push(style)
|
|
for(let perk of style.slots[0].perks) {
|
|
if(rune.selections.includes(perk)) {
|
|
rune.keystoneValue = perk
|
|
keystoneIds.value.push(perk)
|
|
}
|
|
}
|
|
}
|
|
if(style.id == rune.secondaryStyle) {
|
|
secondaryStyles.value.push(style)
|
|
rune.secondaryStyleValue = style
|
|
}
|
|
}
|
|
}
|
|
|
|
function runeSelect(rune) {
|
|
currentlySelectedPage.value = rune
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div style="width: fit-content;">
|
|
<RunePage style="margin:auto; width: fit-content;" :primaryStyleId="currentlySelectedPage.primaryStyle" :secondaryStyleId="currentlySelectedPage.secondaryStyle" :selectionIds="currentlySelectedPage.selections" />
|
|
<div style="display: flex; margin-top: 20px;">
|
|
<div v-for="rune in runes" :class="'rune-selector-entry ' + (rune == currentlySelectedPage ? 'rune-selector-entry-selected' : '')" @click="runeSelect(rune)">
|
|
<div style="display: flex; margin-top: 20px;">
|
|
<img v-if="rune.primaryStyleValue != null && rune.primaryStyleValue != undefined"
|
|
style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.primaryStyleValue.iconPath)" />
|
|
<img v-if="rune.keystoneValue != null && rune.keystoneValue != undefined"
|
|
width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(rune.keystoneValue).iconPath))"/>
|
|
<img v-if="rune.secondaryStyleValue != null && rune.secondaryStyleValue != undefined"
|
|
style="margin: auto;" :src="CDRAGON_BASE + mapPath(rune.secondaryStyleValue.iconPath)" />
|
|
</div>
|
|
<h3 style="text-align: center; margin-top: 10px;">{{ (rune.pickrate * 100).toFixed(2) }}% pick.</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.rune-selector-entry {
|
|
width: 200px;
|
|
height: 120px;
|
|
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
|
|
border-radius: 8%;
|
|
border: 1px solid var(--color-on-surface);
|
|
}
|
|
.rune-selector-entry:hover {
|
|
cursor: pointer;
|
|
}
|
|
.rune-selector-entry-selected {
|
|
background-color: var(--color-surface-darker);
|
|
}
|
|
</style> |