95 lines
2.6 KiB
Vue
95 lines
2.6 KiB
Vue
<template>
|
|
<div class="attribute">
|
|
<ability-list-tile
|
|
v-if="model.attributeType === 'ability'"
|
|
:model="model"
|
|
@click="$emit('click')"
|
|
/>
|
|
<hit-dice-list-tile
|
|
v-else-if="model.attributeType === 'hitDice'"
|
|
:model="model"
|
|
@click="$emit('click')"
|
|
@change="({ type, value }) => damageProperty({type, value: -value})"
|
|
/>
|
|
<health-bar
|
|
v-else-if="model.attributeType === 'healthBar'"
|
|
:model="model"
|
|
@change="damageProperty"
|
|
@click="$emit('click')"
|
|
/>
|
|
<spell-slot-list-tile
|
|
v-else-if="model.attributeType === 'spellSlot'"
|
|
:model="model"
|
|
@click="$emit('click')"
|
|
/>
|
|
<resource-card-content
|
|
v-else-if="model.attributeType === 'resource'"
|
|
:model="model"
|
|
@click="$emit('click')"
|
|
@change="({ type, value }) => damageProperty({type, value: -value})"
|
|
@mouseover="hover = true"
|
|
@mouseleave="hover = false"
|
|
/>
|
|
<attribute-card-content
|
|
v-else-if="model.attributeType !== 'utility'"
|
|
class="pointer"
|
|
:model="model"
|
|
@click="$emit('click')"
|
|
@mouseover="hover = true"
|
|
@mouseleave="hover = false"
|
|
/>
|
|
<card-highlight :active="hover" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import AbilityListTile from '/imports/ui/properties/components/attributes/AbilityListTile.vue';
|
|
import HitDiceListTile from '/imports/ui/properties/components/attributes/HitDiceListTile.vue';
|
|
import HealthBar from '/imports/ui/properties/components/attributes/HealthBar.vue';
|
|
import SpellSlotListTile from '/imports/ui/properties/components/attributes/SpellSlotListTile.vue';
|
|
import ResourceCardContent from '/imports/ui/properties/components/attributes/ResourceCardContent.vue';
|
|
import AttributeCardContent from '/imports/ui/properties/components/attributes/AttributeCardContent.vue';
|
|
import CardHighlight from '/imports/ui/components/CardHighlight.vue';
|
|
|
|
import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
|
|
|
|
export default {
|
|
components: {
|
|
AbilityListTile,
|
|
HitDiceListTile,
|
|
HealthBar,
|
|
SpellSlotListTile,
|
|
ResourceCardContent,
|
|
AttributeCardContent,
|
|
CardHighlight,
|
|
},
|
|
props: {
|
|
model: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
hover: false,
|
|
}},
|
|
methods: {
|
|
damageProperty(change) {
|
|
damageProperty.call({
|
|
_id: this.model._id,
|
|
operation: change.type,
|
|
value: change.value
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.attribute {
|
|
position: relative;
|
|
}
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style> |