72 lines
1.9 KiB
Vue
72 lines
1.9 KiB
Vue
<template>
|
|
<div class="flex flex-row flex-nowrap justify-around" v-if="! objectIsEmpty">
|
|
<span v-for="(skill, skillIndex) in skills" :key="skillIndex" class="tooltip-parent">
|
|
<img
|
|
:class="(skill.keyid !== null && party_mode !== $MODE.ReadOnly) ? 'cursor-pointer' : ''"
|
|
style="width: 30px; height: 30px;"
|
|
:src="'/img/weapon_skills/' + skill.icon"
|
|
@click="showKeyModal(skillIndex, skill.keyid)"
|
|
>
|
|
<span class="tooltip">
|
|
{{ skill.name }} <span v-if="skill.boost">({{ skill.boost }})</span><br>
|
|
<p v-if="skill.data !== null">
|
|
<span class="font-mono text-xs" v-for="(data, dataIndex) in skill.data" :key="dataIndex">
|
|
<span class="capitalize">{{ data.aura_type }}</span> {{ data.stat }} {{ (data.value * 100).toFixed(2) }}%<br>
|
|
</span>
|
|
</p>
|
|
</span>
|
|
</span>
|
|
|
|
<!-- Modal -->
|
|
<modal-keys
|
|
v-if="party_mode !== $MODE.ReadOnly"
|
|
v-model="show_modal_keys"
|
|
:keyId="modal_key_id"
|
|
@key-selected="selectKey"
|
|
></modal-keys>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { objectIsEmpty } from "@/js/mixins"
|
|
import { mapState } from 'vuex'
|
|
|
|
import ModalKeys from '@/components/ModalKeys.vue'
|
|
|
|
export default {
|
|
components: {
|
|
ModalKeys,
|
|
},
|
|
mixins: [
|
|
objectIsEmpty
|
|
],
|
|
props: {
|
|
object: Object,
|
|
skills: Array,
|
|
},
|
|
data() {
|
|
return {
|
|
show_modal_keys: false,
|
|
modal_skill_index: 0,
|
|
modal_key_id: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
showKeyModal(index, keyid) {
|
|
if (keyid !== null && this.party_mode !== this.$MODE.ReadOnly) {
|
|
this.modal_skill_index = index;
|
|
this.modal_key_id = keyid;
|
|
this.show_modal_keys = true;
|
|
}
|
|
},
|
|
selectKey(key) {
|
|
this.$set(this.object.keys, this.modal_skill_index, key);
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
party_mode: state => state.party_builder.party_mode
|
|
}),
|
|
}
|
|
}
|
|
</script> |