160 lines
3.7 KiB
Vue
160 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'
|
|
import type { PerkStyle, Perk } from '~/types/cdragon'
|
|
|
|
const props = defineProps<{
|
|
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 { data: perks_data }: { data: Ref<Array<Perk>> } = await useFetch('/api/cdragon/perks')
|
|
const perks = reactive(new Map())
|
|
for (const perk of perks_data.value) {
|
|
perks.set(perk.id, perk)
|
|
}
|
|
|
|
const { data: stylesData }: { data: Ref<{ styles: Array<PerkStyle> }> } =
|
|
await useFetch('/api/cdragon/perkstyles')
|
|
watch(
|
|
() => props.primaryStyleId,
|
|
async (_newP, _oldP) => {
|
|
refreshStyles()
|
|
}
|
|
)
|
|
watch(
|
|
() => props.secondaryStyleId,
|
|
async (_newP, _oldP) => {
|
|
refreshStyles()
|
|
}
|
|
)
|
|
|
|
function refreshStyles() {
|
|
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 class="rune-holder">
|
|
<div class="rune-slot">
|
|
<NuxtImg
|
|
class="rune-style-img"
|
|
style="margin: auto"
|
|
:src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-for="(slot, slotIndex) in primaryStyle.slots.slice(0, 1)"
|
|
:key="slotIndex"
|
|
class="rune-slot"
|
|
>
|
|
<RuneIcon
|
|
v-for="perkId in slot.perks"
|
|
:key="perkId"
|
|
:perk="perks.get(perkId)"
|
|
:size="48"
|
|
:is-active="props.selectionIds.includes(perkId)"
|
|
:is-keystone="true"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-for="(slot, slotIndex) in primaryStyle.slots.slice(1, 4)"
|
|
:key="slotIndex"
|
|
class="rune-slot"
|
|
>
|
|
<RuneIcon
|
|
v-for="perkId in slot.perks"
|
|
:key="perkId"
|
|
:perk="perks.get(perkId)"
|
|
:size="48"
|
|
:is-active="props.selectionIds.includes(perkId)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="rune-spacer-bar" />
|
|
<div class="rune-holder" style="align-content: end">
|
|
<div class="rune-slot">
|
|
<img
|
|
class="rune-style-img"
|
|
style="margin: auto"
|
|
:src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-for="(slot, slotIndex) in secondaryStyle.slots.slice(1, 4)"
|
|
:key="slotIndex"
|
|
class="rune-slot"
|
|
>
|
|
<RuneIcon
|
|
v-for="perkId in slot.perks"
|
|
:key="perkId"
|
|
:perk="perks.get(perkId)"
|
|
:size="48"
|
|
:is-active="props.selectionIds.includes(perkId)"
|
|
/>
|
|
</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-spacer-bar {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
border: 1px var(--color-on-surface) solid;
|
|
}
|
|
.rune-style-img {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
@media only screen and (max-width: 650px) {
|
|
.rune-slot {
|
|
width: calc(24 * 3px + 30px);
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.rune-style-img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.rune-spacer-bar {
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
.rune-icon {
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
}
|
|
}
|
|
</style>
|