jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Attributes show their children in stats cards

Browse Source
This commit is contained in:
Stefan Zermatten
2022-11-25 16:27:18 +02:00
parent 1f26fbf00e
commit 0b377fcb71
3 changed files with 72 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/imports/client/ui/properties/components/folders/FolderGroupCard.vue
View File

@@ -15,7 +15,8 @@
:model="prop"
:data-id="prop._id"
@click="$emit('click-property', {_id: prop._id})"
@sub-click="_id => $emit('sub-click', _id)"
@click-property="e => $emit('click-property', e)"
@sub-click="e => $emit('sub-click', e)"
@remove="$emit('remove', prop._id)"
/>
</v-card>
@@ -27,15 +28,15 @@ import CreatureProperties from '/imports/api/creature/creatureProperties/Creatur
import propComponents from '/imports/client/ui/properties/components/folders/propertyComponentIndex.js';
export default {
components: {
...propComponents,
},
props: {
model: {
type: Object,
required: true,
}
},
beforeCreate() {
Object.assign(this.$options.components, propComponents);
},
meteor: {
properties() {
const props = [];
@@ -61,7 +62,7 @@ export default {
}, {
sort: { order: 1 },
}).forEach(prop => {
if (this.$options.components[prop.type]) {
if (propComponents[prop.type]) {
props.push(prop);
}
});

97
app/imports/client/ui/properties/components/folders/folderGroupComponents/AttributeGroupComponent.vue
View File

@@ -1,44 +1,55 @@
<template>
<div class="attribute">
<ability-list-tile
v-if="model.attributeType === 'ability'"
<div>
<div
class="attribute"
:data-id="dataId"
>
<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>
<folder-group-children
:model="model"
@click="$emit('click')"
@click-property="e => $emit('click-property', e)"
@sub-click="e => $emit('sub-click', e)"
@remove="e => $emit('remove', e)"
/>
<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>
@@ -50,6 +61,7 @@ import SpellSlotListTile from '/imports/client/ui/properties/components/attribut
import ResourceCardContent from '/imports/client/ui/properties/components/attributes/ResourceCardContent.vue';
import AttributeCardContent from '/imports/client/ui/properties/components/attributes/AttributeCardContent.vue';
import CardHighlight from '/imports/client/ui/components/CardHighlight.vue';
import FolderGroupChildren from '/imports/client/ui/properties/components/folders/folderGroupComponents/FolderGroupChildren.vue';
import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
@@ -62,12 +74,17 @@ export default {
ResourceCardContent,
AttributeCardContent,
CardHighlight,
FolderGroupChildren,
},
props: {
model: {
type: Object,
required: true,
},
dataId: {
type: String,
required: true,
},
},
data() {
return {
@@ -81,6 +98,10 @@ export default {
value: change.value
});
},
log({_id}) {
console.log(...arguments)
this.$emit('click-property', { _id });
}
}
}
</script>

13
app/imports/client/ui/properties/components/folders/folderGroupComponents/FolderGroupChildren.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
v-if="model.name || (properties && properties.length)"
v-if="properties && properties.length"
>
<component
:is="prop.type"
@@ -9,7 +9,8 @@
:model="prop"
:data-id="prop._id"
@click="$emit('click-property', {_id: prop._id})"
@sub-click="_id => $emit('sub-click', _id)"
@click-property="(e) => $emit('click-property', e)"
@sub-click="(e) => $emit('sub-click', e)"
@remove="$emit('remove', prop._id)"
/>
</div>
@@ -20,15 +21,15 @@ import CreatureProperties from '/imports/api/creature/creatureProperties/Creatur
import propComponents from '/imports/client/ui/properties/components/folders/propertyComponentIndex.js';
export default {
components: {
...propComponents,
},
props: {
model: {
type: Object,
required: true,
}
},
beforeCreate() {
Object.assign(this.$options.components, propComponents);
},
meteor: {
properties() {
const props = [];
@@ -54,7 +55,7 @@ export default {
}, {
sort: { order: 1 },
}).forEach(prop => {
if (this.$options.components[prop.type]) {
if (propComponents[prop.type]) {
props.push(prop);
}
});