From 7a11a4aa2266e0f97a6a78d5cd982ad9f1517b82 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 18 Oct 2021 12:48:26 +0200
Subject: [PATCH] Improved action viewer, fixed bugs found along the way

---
 .../applyPropertyByType/applyAction.js        |  17 +-
 app/imports/ui/components/propertyToolbar.vue |   7 +-
 .../CreaturePropertyDialog.vue                |  36 +--
 .../components/actions/ItemConsumedView.vue   |  17 +-
 .../ui/properties/viewers/ActionViewer.vue    | 214 +++++++++---------
 .../ui/properties/viewers/AttributeViewer.vue |   4 +-
 .../ui/properties/viewers/SkillViewer.vue     |  11 +-
 .../viewers/shared/PropertyDescription.vue    |   4 +-
 .../viewers/shared/PropertyField.vue          |   5 +-
 9 files changed, 167 insertions(+), 148 deletions(-)

diff --git a/app/imports/api/engine/actions/applyPropertyByType/applyAction.js b/app/imports/api/engine/actions/applyPropertyByType/applyAction.js
index 3b6ac32e..776e2f15 100644
--- a/app/imports/api/engine/actions/applyPropertyByType/applyAction.js
+++ b/app/imports/api/engine/actions/applyPropertyByType/applyAction.js
@@ -147,20 +147,23 @@ function spendResources({prop, log, scope}){
       if (!item.equipped){
         throw 'The selected ammo is not equipped';
       }
-      if (!itemConsumed.quantity) return;
+      if (
+        !itemConsumed.quantity.value ||
+        !isFinite(itemConsumed.quantity.value)
+      ) return;
       itemQuantityAdjustments.push({
         property: item,
         operation: 'increment',
-        value: itemConsumed.quantity,
+        value: itemConsumed.quantity.value,
       });
       let logName = item.name;
-      if (itemConsumed.quantity > 1 || itemConsumed.quantity < -1){
+      if (itemConsumed.quantity.value > 1 || itemConsumed.quantity.value < -1){
         logName = item.plural || logName;
       }
-      if (itemConsumed.quantity > 0){
-        spendLog.push(logName + ': ' + itemConsumed.quantity);
-      } else if (itemConsumed.quantity < 0){
-        gainLog.push(logName + ': ' + -itemConsumed.quantity);
+      if (itemConsumed.quantity.value > 0){
+        spendLog.push(logName + ': ' + itemConsumed.quantity.value);
+      } else if (itemConsumed.quantity.value < 0){
+        gainLog.push(logName + ': ' + -itemConsumed.quantity.value);
       }
     });
   } catch (e){
diff --git a/app/imports/ui/components/propertyToolbar.vue b/app/imports/ui/components/propertyToolbar.vue
index c6b474be..32282734 100644
--- a/app/imports/ui/components/propertyToolbar.vue
+++ b/app/imports/ui/components/propertyToolbar.vue
@@ -102,21 +102,26 @@
       />
     </v-slide-y-transition>
     <v-btn
-      icon
+      outlined
       @click="$emit('toggle-editing')"
     >
+      <span style="width: 44px;">
+        {{ editing ? 'Done' : 'Edit' }}
+      </span>
       <v-slide-y-transition
         hide-on-leave
       >
         <v-icon
           v-if="editing"
           key="doneIcon"
+          right
         >
           mdi-check
         </v-icon>
         <v-icon
           v-else
           key="createIcon"
+          right
         >
           mdi-pencil
         </v-icon>
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
index 93692c6b..f3dfc0b4 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
@@ -41,18 +41,23 @@
           This property can't be viewed yet.
         </p>
       </v-fade-transition>
-      <property-field
-        v-if="!editing && !embedded && childrenLength"
-        name="Child properties"
-        :cols="{cols: 12}"
+      <v-row
+        v-show="!editing && !embedded && childrenLength"
+        class="mt-1"
+        dense
       >
-        <creature-properties-tree
-          style="width: 100%;"
-          :root="{collection: 'creatureProperties', id: model._id}"
-          @length="childrenLength = $event"
-          @selected="selectSubProperty"
-        />
-      </property-field>
+        <property-field
+          name="Child properties"
+          :cols="{cols: 12}"
+        >
+          <creature-properties-tree
+            style="width: 100%;"
+            :root="{collection: 'creatureProperties', id: model._id}"
+            @length="childrenLength = $event"
+            @selected="selectSubProperty"
+          />
+        </property-field>
+      </v-row>
     </template>
     <div
       v-if="!embedded"
@@ -65,15 +70,18 @@
         data-id="insert-creature-property-btn"
         @click="addProperty"
       >
-        <v-icon>mdi-plus</v-icon>
-        Property
+        <v-icon left>
+          mdi-plus
+        </v-icon>
+        Child Property
       </v-btn>
       <v-spacer />
       <v-btn
         text
+        color="accent"
         @click="$store.dispatch('popDialogStack')"
       >
-        Done
+        Close
       </v-btn>
     </div>
   </dialog-base>
diff --git a/app/imports/ui/properties/components/actions/ItemConsumedView.vue b/app/imports/ui/properties/components/actions/ItemConsumedView.vue
index 083292e6..3363c5a4 100644
--- a/app/imports/ui/properties/components/actions/ItemConsumedView.vue
+++ b/app/imports/ui/properties/components/actions/ItemConsumedView.vue
@@ -12,12 +12,11 @@
     >
       <template #activator="{ on }">
         <div
-          class="layout align-center justify-start"
+          class="layout align-center justify-start px-2"
           style="height: 100%;"
           :class="{
             'error--text': insufficient,
             'clickable': context.creatureId && context.editPermission,
-            'left-pad': leftPad,
           }"
           v-on="on"
         >
@@ -31,7 +30,7 @@
             class="mr-2 text-no-wrap"
             style="min-width: 24px; text-align: center;"
           >
-            <template v-if="quantity !== 0 && insufficient">
+            <template v-if="quantity !== 1">
               {{ model.available }} / {{ quantity }}
             </template>
             <template v-else>
@@ -48,10 +47,13 @@
               v-else
               class="error--text"
             >
-              Select ammo
+              Select item
             </span>
           </div>
-          <v-icon v-if="context.editPermission">
+          <v-icon
+            v-if="context.editPermission"
+            style="overflow: hidden;"
+          >
             mdi-menu-down
           </v-icon>
         </div>
@@ -64,7 +66,6 @@
     <div
       v-else
       class="layout align-center justify-start"
-      :class="{'left-pad': leftPad}"
     >
       <div
         class="mr-2"
@@ -106,7 +107,6 @@ export default {
       type: Object,
       required: true,
     },
-    leftPad: Boolean,
   },
   computed: {
     insufficient(){
@@ -129,7 +129,4 @@ export default {
 .theme--dark .clickable:hover {
   background: hsla(0,0%,100%,.08);
 }
-.left-pad {
-  padding-left: 44px;
-}
 </style>
diff --git a/app/imports/ui/properties/viewers/ActionViewer.vue b/app/imports/ui/properties/viewers/ActionViewer.vue
index ce094084..57d64481 100644
--- a/app/imports/ui/properties/viewers/ActionViewer.vue
+++ b/app/imports/ui/properties/viewers/ActionViewer.vue
@@ -1,118 +1,113 @@
 <template lang="html">
   <div class="action-viewer">
-    <div class="action-sub-title layout align-center justify-space-between wrap mb-3">
-      <property-tags
-        :tags="model.tags"
-        no-margin
-        class="mx-2"
-      />
-      <div
-        v-if="!attack"
-        class="mx-2"
-      >
-        {{ model.actionType }}
-      </div>
-    </div>
-    <div class="layout align-center justify-space-around">
-      <v-btn
+    <v-row
+      dense
+    >
+      <property-field
         v-if="context.creatureId"
-        outlined
-        style="font-size: 18px;"
-        class="ma-2"
-        :color="model.color || 'primary'"
-        :icon="!rollBonusTooLong"
-        :loading="doActionLoading"
-        :disabled="model.insufficientResources || !context.editPermission"
-        @click.stop="doAction"
+        name="Apply action"
+        center
       >
-        <template v-if="attack">
-          {{ rollBonus }}
-        </template>
-        <property-icon
-          v-else
-          :model="model"
-        />
-      </v-btn>
-      <div
-        v-else-if="attack"
-        style="font-size: 18px;"
-        class="ma-2"
-      >
-        <code>{{ model.rollBonus && model.rollBonus.value }}</code>
-        <span
-          class="mx-1"
-          style="font-size: 14px"
-        >to hit</span>
-      </div>
-      <div v-if="model.uses">
-        <span
-          v-if="context.creatureId && model.uses.value"
-          class="uses mx-2"
+        <v-btn
+          outlined
+          style="font-size: 18px;"
+          class="ma-2"
+          :color="model.color || 'primary'"
+          icon
+          :loading="doActionLoading"
+          :disabled="model.insufficientResources || !context.editPermission"
+          @click.stop="doAction"
         >
-          {{ usesLeft }}/{{ model.uses.value }} uses
-        </span>
+          <property-icon
+            right
+            :model="model"
+          />
+        </v-btn>
+      </property-field>
+      <property-field
+        name="To hit"
+        large
+        center
+        :value="rollBonus"
+      />
+      <property-field
+        name="Action type"
+        :value="actionTypes[model.actionType]"
+      />
+      <property-field
+        v-if="model.uses"
+        name="Uses"
+      >
+        <template
+          v-if="context.creatureId && model.uses.value"
+        >
+          <v-spacer />
+          {{ usesLeft }}/{{ model.uses.value }}
+          <v-spacer />
+          <v-btn
+            v-if="context.creatureId"
+            text
+            color="primary"
+            :disabled="!model.usesUsed || !context.editPermission"
+            @click="resetUses"
+          >
+            Reset
+          </v-btn>
+        </template>
         <span v-else>
           <code>{{ model.uses.calculation }}</code>
-          <span class="mx-1">
-            uses
-          </span>
         </span>
-        <span
-          v-if="reset"
-          class="mx-2"
-        >
-          {{ reset }}
-        </span>
-        <v-btn
-          v-if="context.creatureId"
-          outlined
-          color="primary"
-          :disabled="!model.usesUsed || !context.editPermission"
-          @click="resetUses"
-        >
-          Reset
-        </v-btn>
-      </div>
-    </div>
-    <v-subheader
-      v-if="model.resources.attributesConsumed.length ||
-        model.resources.itemsConsumed.length"
-      style="height: 32px"
+      </property-field>
+      <property-field
+        name="Reset"
+        :value="reset"
+      />
+      <property-field
+        v-if="model.resources.attributesConsumed.length"
+        name="Attributes consumed"
+      >
+        <div style="width: 100%;">
+          <attribute-consumed-view
+            v-for="attributeConsumed in model.resources.attributesConsumed"
+            :key="attributeConsumed._id"
+            class="action-child"
+            :model="attributeConsumed"
+          />
+        </div>
+      </property-field>
+      <property-field
+        v-if="model.resources.itemsConsumed.length"
+        name="Items consumed"
+      >
+        <div style="width: 100%;">
+          <item-consumed-view
+            v-for="itemConsumed in model.resources.itemsConsumed"
+            :key="itemConsumed._id"
+            class="action-child"
+            :model="itemConsumed"
+            :action="model"
+          />
+        </div>
+      </property-field>
+    </v-row>
+    <v-row
+      v-if="model.summary && model.summary.text"
+      dense
     >
-      Resources
-    </v-subheader>
-    <attribute-consumed-view
-      v-for="attributeConsumed in model.resources.attributesConsumed"
-      :key="attributeConsumed._id"
-      class="action-child"
-      :model="attributeConsumed"
-      style="padding-left: 44px;"
-    />
-    <item-consumed-view
-      v-for="itemConsumed in model.resources.itemsConsumed"
-      :key="itemConsumed._id"
-      class="action-child"
-      :model="itemConsumed"
-      :action="model"
-      left-pad
-    />
-    <v-divider
-      v-if="(model.summary && model.summary.text) ||
-        (model.description && model.description.text)"
-      class="my-3"
-    />
-    <template v-if="(model.summary && model.summary.text)">
       <property-description
+        name="Summary"
         :model="model.summary"
       />
-      <v-divider
-        v-if="model.description && model.description.text"
-        class="my-3"
+    </v-row>
+    <v-row
+      v-if="model.description && model.description.text"
+      dense
+    >
+      <property-description
+        name="Description"
+        :model="model.description"
       />
-    </template>
-    <property-description
-      :model="model.description"
-    />
+    </v-row>
   </div>
 </template>
 
@@ -142,6 +137,14 @@ export default {
   },
   data(){return {
     doActionLoading: false,
+    actionTypes: {
+      action: 'Action',
+      bonus: 'Bonus action',
+      attack: 'Attack action',
+      reaction: 'Reaction',
+      free: 'Free action',
+      long: 'Long action',
+    },
   }},
   computed: {
     reset(){
@@ -154,8 +157,11 @@ export default {
       return undefined;
     },
     rollBonus(){
-      if (!this.attack || !this.model.rollBonus) return;
-      return numberToSignedString(this.model.rollBonus.value);
+      if (
+        !this.model.attackRoll ||
+        !isFinite(this.model.attackRoll.value)
+      ) return;
+      return numberToSignedString(this.model.attackRoll.value);
     },
     rollBonusTooLong(){
       return this.rollBonus && this.rollBonus.length > 3;
diff --git a/app/imports/ui/properties/viewers/AttributeViewer.vue b/app/imports/ui/properties/viewers/AttributeViewer.vue
index c90be210..7dbc4e71 100644
--- a/app/imports/ui/properties/viewers/AttributeViewer.vue
+++ b/app/imports/ui/properties/viewers/AttributeViewer.vue
@@ -103,7 +103,7 @@
     </v-row>
     <v-row dense>
       <property-description
-        label="Description"
+        name="Description"
         :model="model.description"
       />
     </v-row>
@@ -113,7 +113,7 @@
         :cols="{col: 12}"
         name="Effects"
       >
-        <v-list>
+        <v-list style="width: 100%;">
           <attribute-effect
             v-for="effect in baseEffects"
             :key="effect._id"
diff --git a/app/imports/ui/properties/viewers/SkillViewer.vue b/app/imports/ui/properties/viewers/SkillViewer.vue
index 91c3d47e..8c2c4e8a 100644
--- a/app/imports/ui/properties/viewers/SkillViewer.vue
+++ b/app/imports/ui/properties/viewers/SkillViewer.vue
@@ -41,11 +41,12 @@
         :value="model.skillType"
       />
     </v-row>
-    <property-description
-      :string="model.description"
-      :calculations="model.descriptionCalculations"
-      :inactive="model.inactive"
-    />
+    <v-row dense>      
+      <property-description
+        name="description"
+        :model="model.description"
+      />
+    </v-row>
     <v-row
       v-if="baseEffects.length || ability || effects.length"
       dense
diff --git a/app/imports/ui/properties/viewers/shared/PropertyDescription.vue b/app/imports/ui/properties/viewers/shared/PropertyDescription.vue
index f1a87521..c7954a50 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyDescription.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyDescription.vue
@@ -1,7 +1,7 @@
 <template lang="html">
   <property-field
     v-if="model"
-    :name="label"
+    :name="name"
     :cols="{col: 12}"
   >
     <markdown-text
@@ -24,7 +24,7 @@ export default {
       type: Object,
       default: undefined,
     },
-    label: {
+    name: {
       type: String,
       default: undefined,
     },
diff --git a/app/imports/ui/properties/viewers/shared/PropertyField.vue b/app/imports/ui/properties/viewers/shared/PropertyField.vue
index 8ab37dcb..742210f5 100644
--- a/app/imports/ui/properties/viewers/shared/PropertyField.vue
+++ b/app/imports/ui/properties/viewers/shared/PropertyField.vue
@@ -2,11 +2,10 @@
   <v-col
     v-if="value !== undefined || ($slots.default && $slots.default.length)"
     v-bind="cols"
-    class="mb-2"
+    class="mb-3"
   >
     <v-sheet
       outlined
-      rounded
       class="pa-2 layout column align-start fill-height"
     >
       <v-sheet
@@ -59,6 +58,6 @@ export default {
   color: rgba(0,0,0,.6);
 }
 .theme--dark .name {
-  color: rgba(255,255,255,.7);
+  color: rgba(255,255,255,.6);
 }
 </style>