Lint and format
This commit is contained in:
@@ -1,116 +1,153 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
primaryStyleId: number
|
||||
secondaryStyleId: number
|
||||
selectionIds: Array<number>
|
||||
primaryStyleId: number
|
||||
secondaryStyleId: number
|
||||
selectionIds: Array<number>
|
||||
}>()
|
||||
|
||||
const primaryStyle : Ref<PerkStyle> = ref({id:0, name:"", iconPath:"", slots:[]})
|
||||
const secondaryStyle : Ref<PerkStyle> = ref({id:0, name:"", iconPath:"", slots:[]})
|
||||
const primaryStyle: Ref<PerkStyle> = ref({ id: 0, name: '', iconPath: '', slots: [] })
|
||||
const secondaryStyle: Ref<PerkStyle> = ref({ id: 0, name: '', iconPath: '', slots: [] })
|
||||
|
||||
let { data: perks_data } : PerksResponse = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/perks.json")
|
||||
const { 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)
|
||||
for (const 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.primaryStyleId, async (newP, oldP) => {refreshStyles()})
|
||||
watch(() => props.secondaryStyleId, async (newP, oldP) => {refreshStyles()})
|
||||
const { data: stylesData }: PerkStylesResponse = await useFetch(
|
||||
CDRAGON_BASE + '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
|
||||
}
|
||||
for (const 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 style="display: flex">
|
||||
<div class="rune-holder">
|
||||
<div class="rune-slot"><NuxtImg class="rune-style-img" style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)" /></div>
|
||||
<div class="rune-slot" v-for="slot in primaryStyle.slots.slice(0, 1)">
|
||||
<NuxtImg 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)">
|
||||
<NuxtImg 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">
|
||||
<NuxtImg
|
||||
class="rune-style-img"
|
||||
style="margin: auto"
|
||||
:src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)"
|
||||
/>
|
||||
</div>
|
||||
<div v-for="slot in primaryStyle.slots.slice(0, 1)" class="rune-slot">
|
||||
<NuxtImg
|
||||
v-for="perk in slot.perks"
|
||||
width="48"
|
||||
:class="
|
||||
'rune-img rune-keystone ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')
|
||||
"
|
||||
:src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
|
||||
/>
|
||||
</div>
|
||||
<div v-for="slot in primaryStyle.slots.slice(1, 4)" class="rune-slot">
|
||||
<NuxtImg
|
||||
v-for="perk in slot.perks"
|
||||
width="48"
|
||||
: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-spacer-bar"/>
|
||||
<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)">
|
||||
<NuxtImg 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)">
|
||||
<div class="rune-slot">
|
||||
<img style="margin: auto" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" >
|
||||
</div>
|
||||
<div v-for="slot in secondaryStyle.slots.slice(1, 4)" class="rune-slot">
|
||||
<NuxtImg
|
||||
v-for="perk in slot.perks"
|
||||
width="48"
|
||||
: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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.rune-holder {
|
||||
/* align-content: end; */
|
||||
justify-content: center;
|
||||
/* 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;
|
||||
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;
|
||||
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%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
filter: grayscale(1);
|
||||
border: 1px var(--color-on-surface) solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.rune-keystone {
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
.rune-activated {
|
||||
filter: none;
|
||||
filter: none;
|
||||
}
|
||||
.rune-spacer-bar {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
border: 1px var(--color-on-surface) solid;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
border: 1px var(--color-on-surface) solid;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
.rune-slot {
|
||||
width: calc(24*3px + 30px);
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.rune-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.rune-style-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.rune-spacer-bar {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.rune-slot {
|
||||
width: calc(24 * 3px + 30px);
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.rune-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.rune-style-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.rune-spacer-bar {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,128 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
runes: Array<{count: number,
|
||||
primaryStyle: number,
|
||||
secondaryStyle: number,
|
||||
selections: Array<number>,
|
||||
pickrate: number}>
|
||||
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))
|
||||
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 { 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)
|
||||
for (const 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) => {
|
||||
const { 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
|
||||
}
|
||||
for (const style of stylesData.value.styles) {
|
||||
for (const rune of props.runes) {
|
||||
if (style.id == rune.primaryStyle) {
|
||||
primaryStyles.value[props.runes.indexOf(rune)] = style
|
||||
for (const 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
|
||||
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" @click="runeSelect(i)">
|
||||
<div :class="'rune-selector-entry ' + (i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')">
|
||||
<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>
|
||||
<div style="width: fit-content">
|
||||
<RunePage
|
||||
v-if="runes[currentlySelectedPage] != undefined && runes[currentlySelectedPage] != null"
|
||||
style="margin: auto; width: fit-content"
|
||||
:primary-style-id="runes[currentlySelectedPage].primaryStyle"
|
||||
:secondary-style-id="runes[currentlySelectedPage].secondaryStyle"
|
||||
:selection-ids="runes[currentlySelectedPage].selections"
|
||||
/>
|
||||
<div style="display: flex; margin-top: 20px; justify-content: center">
|
||||
<div v-for="(_, i) in runes" @click="runeSelect(i)">
|
||||
<div
|
||||
:class="
|
||||
'rune-selector-entry ' +
|
||||
(i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')
|
||||
"
|
||||
>
|
||||
<div class="rs-styles-container">
|
||||
<NuxtImg
|
||||
v-if="primaryStyles[i] != null && primaryStyles[i] != undefined"
|
||||
class="rs-style-img"
|
||||
style="margin: auto"
|
||||
:src="CDRAGON_BASE + mapPath(primaryStyles[i].iconPath)"
|
||||
/>
|
||||
<NuxtImg
|
||||
v-if="keystoneIds[i] != null && keystoneIds[i] != undefined"
|
||||
class="rs-style-img"
|
||||
width="34"
|
||||
:src="CDRAGON_BASE + mapPath(perks.get(keystoneIds[i]).iconPath)"
|
||||
/>
|
||||
<NuxtImg
|
||||
v-if="secondaryStyles[i] != null && secondaryStyles[i] != undefined"
|
||||
class="rs-style-img"
|
||||
style="margin: auto"
|
||||
:src="CDRAGON_BASE + mapPath(secondaryStyles[i].iconPath)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="rs-pickrate">{{ (runes[i].pickrate * 100).toFixed(2) }}% pick.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.rune-selector-entry {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
border-radius: 8%;
|
||||
border: 1px solid var(--color-on-surface);
|
||||
border-radius: 8%;
|
||||
border: 1px solid var(--color-on-surface);
|
||||
}
|
||||
.rune-selector-entry:hover {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rune-selector-entry-selected {
|
||||
background-color: var(--color-surface-darker);
|
||||
background-color: var(--color-surface-darker);
|
||||
}
|
||||
.rs-styles-container {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.rs-pickrate {
|
||||
text-align: center;
|
||||
margin-top: -40px;
|
||||
padding-bottom: 40px;
|
||||
text-align: center;
|
||||
margin-top: -40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
@media only screen and (max-width: 650px) {
|
||||
.rune-selector-entry {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
.rune-selector-entry {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.rs-styles-container {
|
||||
margin-top: 17px;
|
||||
}
|
||||
.rs-pickrate {
|
||||
margin-top: 5px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.rs-style-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.rs-styles-container {
|
||||
margin-top: 17px;
|
||||
}
|
||||
.rs-pickrate {
|
||||
margin-top: 5px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.rs-style-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user