124 lines
4.1 KiB
Vue
124 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
runes: Array<{count: number,
|
|
primaryStyle: number,
|
|
secondaryStyle: number,
|
|
selections: Array<number>,
|
|
pickrate: number}>
|
|
}>()
|
|
|
|
const currentlySelectedPage = ref(0)
|
|
const primaryStyles : Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
|
|
const secondaryStyles : Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
|
|
const keystoneIds : Ref<Array<number>> = ref(Array(props.runes.length))
|
|
|
|
let { data: perks_data } : PerksResponse = 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 } : PerkStylesResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json")
|
|
watch(() => props.runes, (newRunes, oldRunes) => {
|
|
currentlySelectedPage.value = 0
|
|
primaryStyles.value = Array(props.runes.length)
|
|
secondaryStyles.value = Array(props.runes.length)
|
|
keystoneIds.value = Array(props.runes.length)
|
|
|
|
refreshStylesKeystones()
|
|
})
|
|
|
|
function refreshStylesKeystones() {
|
|
for(let style of stylesData.value.styles) {
|
|
for(let rune of props.runes) {
|
|
if(style.id == rune.primaryStyle) {
|
|
primaryStyles.value[props.runes.indexOf(rune)] = style
|
|
for(let perk of style.slots[0].perks) {
|
|
if(rune.selections.includes(perk)) {
|
|
keystoneIds.value[props.runes.indexOf(rune)] = perk
|
|
}
|
|
}
|
|
}
|
|
if(style.id == rune.secondaryStyle) {
|
|
secondaryStyles.value[props.runes.indexOf(rune)] = style
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
refreshStylesKeystones()
|
|
|
|
function runeSelect(index: number) {
|
|
currentlySelectedPage.value = index
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div style="width: fit-content;">
|
|
<RunePage v-if="runes[currentlySelectedPage] != undefined && runes[currentlySelectedPage] != null"
|
|
style="margin:auto; width: fit-content;"
|
|
:primaryStyleId="runes[currentlySelectedPage].primaryStyle"
|
|
:secondaryStyleId="runes[currentlySelectedPage].secondaryStyle"
|
|
:selectionIds="runes[currentlySelectedPage].selections" />
|
|
<div style="display: flex; margin-top: 20px; justify-content: center;">
|
|
<div v-for="(_, i) in runes" :class="'rune-selector-entry ' + (i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')" @click="runeSelect(i)">
|
|
<div class="rs-styles-container">
|
|
<NuxtImg class="rs-style-img" v-if="primaryStyles[i] != null && primaryStyles[i] != undefined"
|
|
style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyles[i].iconPath)" />
|
|
<NuxtImg class="rs-style-img" v-if="keystoneIds[i] != null && keystoneIds[i] != undefined"
|
|
width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(keystoneIds[i]).iconPath))"/>
|
|
<NuxtImg class="rs-style-img" v-if="secondaryStyles[i] != null && secondaryStyles[i] != undefined"
|
|
style="margin: auto;" :src="CDRAGON_BASE + mapPath(secondaryStyles[i].iconPath)" />
|
|
</div>
|
|
<h3 class="rs-pickrate">{{ (runes[i].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);
|
|
}
|
|
.rs-styles-container {
|
|
display: flex;
|
|
margin-top: 20px;
|
|
}
|
|
.rs-pickrate {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
@media only screen and (max-width: 650px) {
|
|
.rune-selector-entry {
|
|
width: 100px;
|
|
height: 60px;
|
|
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
.rs-styles-container {
|
|
margin-top: 17px;
|
|
}
|
|
.rs-pickrate {
|
|
margin-top: 20px;
|
|
}
|
|
.rs-style-img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
</style> |