107 lines
3.7 KiB
Vue
107 lines
3.7 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
// Runes styles: domination, precision, sorcery, inspiration, resolve
|
|
primaryStyleId: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
secondaryStyleId: {
|
|
type:String,
|
|
required: true
|
|
},
|
|
selectionIds: {
|
|
type:Array,
|
|
required: false,
|
|
default: []
|
|
}
|
|
})
|
|
|
|
const primaryStyle = ref({slots:[]})
|
|
const secondaryStyle = ref({slots:[]})
|
|
|
|
let { data: perks_data } = await useFetch("https://raw.communitydragon.org/latest/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("https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json")
|
|
watch(() => props.primaryStyleId, async (newP, oldP) => {refreshStyles()})
|
|
watch(() => props.secondaryStyleId, async (newP, oldP) => {refreshStyles()})
|
|
|
|
function refreshStyles() {
|
|
for(let style of stylesData.value.styles) {
|
|
if(style.id == props.primaryStyleId) {
|
|
primaryStyle.value = style
|
|
}
|
|
if(style.id == props.secondaryStyleId) {
|
|
secondaryStyle.value = style
|
|
}
|
|
}
|
|
}
|
|
refreshStyles()
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div style="display: flex;">
|
|
<div class="rune-holder">
|
|
<div class="rune-slot"><img style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)" /></div>
|
|
<div class="rune-slot" v-for="slot in primaryStyle.slots.slice(0, 1)">
|
|
<img width="48" v-for="perk in slot.perks" :class="'rune-img rune-keystone ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
|
|
</div>
|
|
<div class="rune-slot" v-for="slot in primaryStyle.slots.slice(1, 4)">
|
|
<img width="48" v-for="perk in slot.perks" :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
|
|
</div>
|
|
</div>
|
|
<div class="rune-spacer-bar"></div>
|
|
<div class="rune-holder" style="align-content: end">
|
|
<div class="rune-slot"><img style="margin: auto;" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" /></div>
|
|
<div class="rune-slot" v-for="slot in secondaryStyle.slots.slice(1, 4)">
|
|
<img width="48" v-for="perk in slot.perks" :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
|
|
</div>
|
|
<!-- <div class="rune-slot mini" v-for="slot in primaryStyle.slots.slice(4, 7)">
|
|
<img width="32" v-for="perk in slot.perks" :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
|
|
</div> -->
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.rune-holder {
|
|
/* align-content: end; */
|
|
justify-content: center;
|
|
}
|
|
.rune-slot {
|
|
width: calc(48*3px + 60px);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
.mini {
|
|
margin: auto;
|
|
width: calc(32*3px + 60px);
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.rune-img {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
filter: grayscale(1);
|
|
border: 1px var(--color-on-surface) solid;
|
|
border-radius:50%;
|
|
}
|
|
.rune-keystone {
|
|
border: none;
|
|
}
|
|
.rune-activated {
|
|
filter: none;
|
|
}
|
|
.rune-spacer-bar {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
border: 1px var(--color-on-surface) solid;
|
|
}
|
|
</style> |