Continued work on UI viewers

app/imports/constants/PROPERTIES.js

@@ -5,12 +5,6 @@ const PROPERTIES = Object.freeze({
     helpText: 'Actions are things your character can do. When an action is taken, all the properties under it are activated.',
     suggestedParents: ['classLevel', 'feature', 'item'],
   },
-  attack: {
-    icon: '$vuetify.icons.attack',
-    name: 'Attack',
-    helpText: 'Attacks are a special form of action that includes an attack roll. Attacks can critical hit, which doubles the number of damage dice in properties under the attack.',
-    suggestedParents: ['classLevel', 'feature', 'item'],
-  },
   attribute: {
     icon: '$vuetify.icons.attribute',
     name: 'Attribute',

app/imports/migrations/server/2.0-beta.33-dbv1.js

@@ -93,6 +93,7 @@ const transformsByPropType = {
     ...getInlineComputationTransforms('description'),
     {from: 'value', to: 'total', up: nanToNull},
     {from: 'target', to: 'target', up: simplifyTarget},
+    {from: 'applied'},
   ],
   'classLevel': [
     ...getInlineComputationTransforms('description'),

app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue

@@ -14,9 +14,18 @@
       />
     </template>
     <template v-if="model">
-      <template v-if="!editing && !embedded">
-        <breadcrumbs :model="model" />
-      </template>
+      <div
+        v-if="!editing"
+        class="layout mb-4"
+      >
+        <template v-if="!embedded">
+          <breadcrumbs :model="model" />
+        </template>
+        <v-spacer />
+        <v-chip disabled>
+          {{ typeName }}
+        </v-chip>
+      </div>
       <v-fade-transition
         mode="out-in"
       >
@@ -174,6 +183,10 @@ export default {
     creatureId(){
       return this.creature && this.creature._id;
     },
+    typeName(){
+      if (!this.model) return;
+      return getPropertyName(this.model.type)
+    }
   },
   watch: {
     _id: {

app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue

@@ -10,11 +10,19 @@
     <div
       class="text-no-wrap text-truncate"
     >
-      <span v-if="amount < 0">+</span>
-      {{ absoluteAmount }} {{ model.stat }}
-      <span v-if="typeof absoluteAmount === 'string' || absoluteAmount >= 0">
-        damage
-      </span>
+      <template v-if="model.amount && model.amount.calculation">
+        <span v-if="amount < 0">+</span>
+        {{ absoluteAmount }} {{ model.stat }}
+        <span v-if="typeof absoluteAmount === 'string' || amount >= 0">
+          damage
+        </span>
+        <span v-if="model.target === 'self'">
+          to self
+        </span>
+      </template>
+      <template v-else>
+        {{ model.stat || 'Attribute' }} damage
+      </template>
     </div>
   </div>
 </template>

app/imports/ui/properties/viewers/ActionViewer.vue

@@ -34,6 +34,10 @@
         name="Action type"
         :value="actionTypes[model.actionType]"
       />
+      <property-field
+        name="Targeting"
+        :value="targetTypes[model.target]"
+      />
       <property-field
         v-if="model.uses"
         name="Uses"
@@ -145,6 +149,11 @@ export default {
       free: 'Free action',
       long: 'Long action',
     },
+    targetTypes: {
+      self: 'Self',
+      singleTarget: 'Single target',
+      multipleTargets: 'Multiple targets',
+    },
   }},
   computed: {
     reset(){

app/imports/ui/properties/viewers/AdjustmentViewer.vue

@@ -1,34 +1,30 @@
 <template lang="html">
-  <v-list-item class="effect-viewer">
-    <v-list-item-avatar>
-      <v-tooltip bottom>
-        <template
-          v-if="effectIcon !== 'remove'"
-          #activator="{ on }"
+  <div class="adjustment-viewer">
+    <v-row dense>
+      <property-field
+        name="Amount"
+        center
+        large
+      >
+        <v-icon
+          class="mx-1"
         >
-          <v-icon
-            class="mx-2"
-            style="cursor: default;"
-            v-on="on"
-          >
-            {{ effectIcon }}
-          </v-icon>
-        </template>
-        <span>{{ tooltip }}</span>
-      </v-tooltip>
-    </v-list-item-avatar>
-    <v-list-item-action class="text-h5">
-      {{ displayedValue }}
-    </v-list-item-action>
-    <v-list-item-content>
-      <v-list-item-title>
-        <code>{{ model.stat }}</code>
-        <template v-if="effectIcon === 'remove'">
-          damage
-        </template>
-      </v-list-item-title>
-    </v-list-item-content>
-  </v-list-item>
+          {{ effectIcon }}
+        </v-icon>
+        {{ displayedValue }}
+      </property-field>
+      <property-field
+        name="Attribute"
+        mono
+        :value="model.stat"
+      />
+      <property-field
+        v-if="model.target === 'self'"
+        name="Target"
+        value="Self"
+      />
+    </v-row>
+  </div>
 </template>
 
 <script lang="js">

app/imports/ui/properties/viewers/AttributeViewer.vue

@@ -52,10 +52,11 @@
       </property-field>
       <property-field
         name="Variable Name"
+        mono
         :value="model.variableName"
       />
       <property-field
-        name="Type"
+        name="Attribute type"
         :value="attributeTypes[model.attributeType]"
       />
       <property-field

app/imports/ui/properties/viewers/BuffViewer.vue

@@ -1,13 +1,22 @@
 <template lang="html">
   <div class="buff-viewer">
-    <property-name :value="model.name" />
     <!--<property-field
       name="Duration"
       :value="model.duration"
     />-->
-    <property-description
-      :model="model.description"
-    />
+    <v-row dense>
+      <property-field
+        v-if="model.target === 'self'"
+        name="Target"
+        value="Self"
+      />
+    </v-row>
+    <v-row dense>
+      <property-description
+        name="Description"
+        :model="model.description"
+      />
+    </v-row>
   </div>
 </template>
 

app/imports/ui/properties/viewers/SkillViewer.vue

@@ -30,18 +30,20 @@
       </property-field>
       <property-field
         name="Variable Name"
+        mono
         :value="model.variableName"
       />
       <property-field
         name="Ability"
+        mono
         :value="model.ability"
       />
       <property-field
         name="Skill type"
-        :value="model.skillType"
+        :value="skillTypes[model.skillType]"
       />
     </v-row>
-    <v-row dense>      
+    <v-row dense>
       <property-description
         name="description"
         :model="model.description"
@@ -139,6 +141,16 @@ export default {
       0.5: 'Half proficiency bonus rounded up',
       2: 'Double proficiency bonus',
     },
+    skillTypes: {
+      skill: 'Skill',
+      save: 'Save',
+      check: 'Check',
+      tool: 'Tool',
+      weapon: 'Weapon',
+      armor: 'Armor',
+      language: 'Language',
+      utility: 'Utility',
+    },
   }},
   computed: {
     displayedModifier(){

app/imports/ui/properties/viewers/shared/PropertyDescription.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <property-field
-    v-if="model"
+    v-if="model && (model.value || model.text)"
     :name="name"
     :cols="{col: 12}"
   >

app/imports/ui/properties/viewers/shared/PropertyField.vue

@@ -25,6 +25,7 @@
             'text-body-1': !large,
             'text-h4': large,
             'justify-center': center,
+            'mono': mono,
           }"
           style="overflow-x: auto;"
           v-bind="$attrs"
@@ -41,10 +42,17 @@
 <script lang="js">
 export default {
 	props: {
-		name: String,
-		value: [String, Number, Boolean],
+		name: {
+      type: String,
+      default: undefined,
+    },
+		value: {
+      type: [String, Number, Boolean],
+      default: undefined,
+    },
     center: Boolean,
     large: Boolean,
+    mono: Boolean,
     cols: {
       type: Object,
       default: () => ({cols: 12, sm: 6, md: 4}),
@@ -60,4 +68,7 @@ export default {
 .theme--dark .name {
   color: rgba(255,255,255,.6);
 }
+.mono {
+  font-family: monospace !important;
+}
 </style>