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

Inventory items can now be equipped

Browse Source
This commit is contained in:
Thaum Rystra
2020-05-18 23:03:34 +02:00
parent fe11c9ec23
commit 4352ca5f0d
8 changed files with 127 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/imports/ui/components/tree/TreeNode.vue
View File

@@ -33,16 +33,12 @@
>
drag_handle
</v-icon>
<property-icon
v-if="node.type"
class="mr-2"
:type="node.type"
:class="selected && 'primary--text'"
<!--{{node && node.order}}-->
<component
:is="treeNodeView"
:model="node"
:selected="selected"
/>
<div class="text-no-wrap text-truncate">
<!--{{node && node.order}}-->
{{ getTitle }}
</div>
</div>
</div>
<v-expand-transition>
@@ -72,14 +68,14 @@
* the tree view shows off the full character structure, and where each part of
* character comes from.
**/
import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
import { canBeParent } from '/imports/api/parenting/parenting.js';
import PROPERTIES from '/imports/constants/PROPERTIES.js'
import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
import treeNodeViewIndex from '/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js';
export default {
name: 'TreeNode',
components: {
PropertyIcon,
...treeNodeViewIndex
},
props: {
node: Object,
@@ -94,6 +90,10 @@
expanded: false,
}},
computed: {
treeNodeView(){
let type = this.node.type;
return treeNodeViewIndex[type] || treeNodeViewIndex.default;
},
hasChildren(){
return this.children && this.children.length || this.lazy && !this.expanded;
},
@@ -113,20 +113,13 @@
canExpand(){
return canBeParent(this.node.type);
},
getTitle(){
let node = this.node;
if (!node) return;
if (node.name) return node.name;
let prop = PROPERTIES[this.node.type]
return prop && prop.name;
}
},
beforeCreate() {
this.$options.components.TreeNodeList = require('./TreeNodeList.vue').default
this.$options.components.TreeNodeList = require('./TreeNodeList.vue').default
},
methods: {
icon(type){
return PROPERTY_ICONS[type];
return getPropertyIcon(type);
},
}
};
@@ -151,12 +144,15 @@
opacity: 0.4;
}
.ghost {
opacity: 0.5;
background: #c8ebfb;
opacity: 0.5;
background: #fbc8c8;
}
.v-icon.v-icon--disabled {
opacity: 0;
}
.v-icon {
transition: none !important;
}
.theme--light .tree-node-title:hover {
background: rgba(0,0,0,.04);
}

44
app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
View File

@@ -2,40 +2,28 @@
<div class="inventory">
<column-layout>
<div>
<v-card>
<v-card-text>
<v-switch
v-model="organize"
label="Organize"
class="justify-end"
/>
<!-- Equipping things isn't implemented yet
<creature-properties-tree
:root="{collection: 'creatures', id: creatureId}"
:filter="{
equipped: true,
type: {$in: ['item']},
'ancestors.id': {$nin: containerIds}
}"
@selected="e => clickProperty(e)"
:organize="organize"
group="inventory"
/>
<v-divider/>
-->
<toolbar-card color="">
<v-spacer slot="toolbar" />
<v-switch
slot="toolbar"
v-model="organize"
label="Organize"
class="justify-end"
/>
<v-card-text class="px-0">
<creature-properties-tree
:root="{collection: 'creatures', id: creatureId}"
:filter="{
equipped: {$ne: true},
type: {$in: ['item']},
'ancestors.id': {$nin: containerIds}
}"
:organize="organize"
group="inventory"
@selected="e => clickProperty(e)"
@reorganized="({doc}) => setEquipped(doc, false)"
/>
</v-card-text>
</v-card>
</toolbar-card>
</div>
<div
v-for="container in containersWithoutAncestorContainers"
@@ -55,12 +43,15 @@ import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
import ContainerCard from '/imports/ui/properties/components/inventory/ContainerCard.vue';
import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
import { updateProperty } from '/imports/api/creature/CreatureProperties.js';
export default {
components: {
ColumnLayout,
CreaturePropertiesTree,
ContainerCard,
ToolbarCard,
},
props: {
creatureId: String,
@@ -104,6 +95,13 @@ export default {
data: {_id},
});
},
setEquipped(doc, equipped){
updateProperty.call({
_id: doc._id,
path: ['equipped'],
value: equipped
});
}
},
}
</script>

3
app/imports/ui/properties/components/inventory/ContainerCard.vue
View File

@@ -10,7 +10,7 @@
</v-toolbar-title>
<v-spacer />
</template>
<v-card-text>
<v-card-text class="px-0">
<creature-properties-tree
:root="{collection: 'creatureProperties', id: model._id}"
:filter="{type: {$in: ['container', 'item', 'folder']}}"
@@ -23,7 +23,6 @@
</template>
<script>
import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';

9
app/imports/ui/properties/forms/ItemForm.vue
View File

@@ -1,5 +1,14 @@
<template lang="html">
<div class="item-form">
<div class="layout column align-center">
<v-switch
label="Equipped"
class="no-flex"
:input-value="model.equipped"
:error-messages="errors.equipped"
@change="e => $emit('change', {path: ['equipped'], value: !!e})"
/>
</div>
<div class="layout row wrap">
<text-field
label="Name"

20
app/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue Normal file
View File

@@ -0,0 +1,20 @@
<template lang="html">
<div class="layout row align-center justify-start">
<property-icon
class="mr-2"
:type="model.type"
:class="selected && 'primary--text'"
/>
<div class="text-no-wrap text-truncate">
{{ title }}
</div>
</div>
</template>
<script>
import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
export default {
mixins: [treeNodeViewMixin],
}
</script>

27
app/imports/ui/properties/treeNodeViews/ItemTreeNode.vue Normal file
View File

@@ -0,0 +1,27 @@
<template lang="html">
<div class="layout row align-center justify-start">
<v-icon
class="mr-2"
:class="selected && 'primary--text'"
>
{{ model.equipped ? 'check_box' : 'check_box_outline_blank' }}
</v-icon>
<div
class="text-no-wrap text-truncate"
:class="model.equipped && 'body-2'"
>
{{ title }}
</div>
</div>
</template>
<script>
import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
export default {
mixins: [treeNodeViewMixin],
}
</script>
<style lang="css" scoped>
</style>

6
app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js Normal file
View File

@@ -0,0 +1,6 @@
import DefaultTreeNode from '/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue';
import ItemTreeNode from '/imports/ui/properties/treeNodeViews/ItemTreeNode.vue';
export default {
default: DefaultTreeNode,
item: ItemTreeNode,
}

24
app/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js Normal file
View File

@@ -0,0 +1,24 @@
import PROPERTIES from '/imports/constants/PROPERTIES.js';
import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
export default {
components: {
PropertyIcon,
},
props: {
model: {
type: Object,
default: () => ({}),
},
selected: Boolean,
},
computed: {
title(){
let model = this.model;
if (!model) return;
if (model.name) return model.name;
let prop = PROPERTIES[model.type]
return prop && prop.name;
}
}
}