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

Improved effect, skill, and attribute viewers

Browse Source
This commit is contained in:
Thaum Rystra
2020-05-13 10:28:39 +02:00
parent 170bac6934
commit 9069ee8e35
3 changed files with 151 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/imports/ui/properties/viewers/AttributeViewer.vue
View File

@@ -1,35 +1,49 @@
<template lang="html">
<div class="attribute-viewer">
<div v-if="model.value !== undefined">
<v-layout
column
align-center
>
<div
v-if="model.damage !== undefined"
class="display-3"
v-if="model.value !== undefined"
class="display-1"
>
{{ model.value - model.damage }} / {{ model.value }}
<div
v-if="model.damage !== undefined"
>
{{ model.value - model.damage }} / {{ model.value }}
</div>
<div v-else>
{{ model.value }}
</div>
</div>
<div v-else>
{{ model.value }}
<div
v-if="model.modifier !== undefined"
class="title"
>
{{ numberToSignedString(model.modifier) }}
</div>
</v-layout>
<div>
<property-name :value="model.name" />
<property-variable-name :value="model.variableName" />
</div>
<div v-if="model.modifier !== undefined">
{{ numberToSignedString(model.modifier) }}
</div>
<property-name :value="model.name" />
<property-variable-name :value="model.variableName" />
<property-field
v-if="model.attributeType === 'hitDice' && model.hitDiceSize"
name="Hit dice size"
:value="model.hitDiceSize"
/>
<p v-if="reset && model.attributeType !== 'hitDice'">
{{ reset }}
</p>
<property-field
v-if="reset && model.attributeType !== 'hitDice'"
name="Reset"
:value="reset"
/>
<property-description :value="model.description" />
<effect-viewer
v-if="computationContext.creature"
v-if="computationContext.creature && model.baseValueCalculation"
:model="{
name: 'Attribute base value',
name: 'Base value',
result: model.baseValue,
operation: 'base'
}"

44
app/imports/ui/properties/viewers/EffectViewer.vue
View File

@@ -1,18 +1,6 @@
<template lang="html">
<div class="effect-viewer">
<div class="layout row align-center wrap">
<property-name
v-if="model.name"
:value="model.name"
/>
<div class="headline">
<code
v-for="stat in model.stats"
:key="stat"
style="display: block;"
class="my-1"
>{{ stat }}</code>
</div>
<v-list-tile class="effect-viewer">
<v-list-tile-avatar>
<v-tooltip bottom>
<template #activator="{ on }">
<v-icon
@@ -25,14 +13,26 @@
</template>
<span>{{ operation }}</span>
</v-tooltip>
<div
v-if="showValue"
class="headline"
>
{{ displayedValue }}
</div>
</div>
</div>
</v-list-tile-avatar>
<v-list-tile-action
v-if="showValue"
class="headline"
>
{{ displayedValue }}
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ model.name }}
</v-list-tile-title>
<v-list-tile-sub-title>
<code
v-for="stat in model.stats"
:key="stat"
class="mr-1"
>{{ stat }}</code>
</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</template>
<script>

106
app/imports/ui/properties/viewers/SkillViewer.vue
View File

@@ -1,19 +1,111 @@
<template lang="html">
<div class="skill-viewer">
<property-name :value="model.name"/>
<property-variable-name :value="model.variableName"/>
<property-field name="Ability" :value="model.ability"/>
<property-field name="Type" :value="model.skillType"/>
<property-field name="Base value" :value="model.baseValue"/>
<property-field name="Base proficiency" :value="model.baseProficiency"/>
<property-description :value="model.description"/>
<v-layout
column
align-center
>
<div
v-if="model.value !== undefined"
class="display-1 layout row align-center"
>
<v-icon class="mr-4">
{{ icon }}
</v-icon>
<div v-if="isFinite(model.value)">
{{ numberToSignedString(model.value) }}
</div>
</div>
</v-layout>
<property-name :value="model.name" />
<property-variable-name :value="model.variableName" />
<property-field
name="Ability"
:value="model.ability"
/>
<property-field
name="Type"
:value="model.skillType"
/>
<property-field
name="Base value"
:value="model.baseValue"
/>
<property-field
name="Base proficiency"
:value="model.baseProficiency"
/>
<property-description :value="model.description" />
<effect-viewer
v-if="computationContext.creature && model.baseValue"
:model="{
name: 'Base value',
result: model.baseValue,
operation: 'base'
}"
/>
<effect-viewer
v-for="effect in effects"
:key="effect._id"
:model="effect"
/>
</div>
</template>
<script>
import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
import EffectViewer from '/imports/ui/properties/viewers/EffectViewer.vue';
export default {
components: {
EffectViewer,
},
mixins: [propertyViewerMixin],
inject: {
computationContext: { default: {} }
},
computed: {
displayedModifier(){
let mod = this.model.value;
if (this.model.fail){
return 'fail';
} else {
return numberToSignedString(mod);
}
},
icon(){
if (this.model.proficiency == 0.5){
return 'brightness_2';
} else if (this.model.proficiency == 1) {
return 'brightness_1'
} else if (this.model.proficiency == 2){
return 'album'
} else {
return 'radio_button_unchecked';
}
},
},
methods: {
numberToSignedString,
isFinite: Number.isFinite,
},
meteor: {
effects(){
if (this.computationContext.creature){
let creatureId = this.computationContext.creature._id;
return CreatureProperties.find({
'ancestors.id': creatureId,
stats: this.model.variableName,
type: 'effect',
removed: {$ne: true},
});
} else {
return [];
}
},
},
}
</script>