Minor redesign of printed character sheets

app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedAction.vue

@@ -3,36 +3,21 @@
     class="action-card"
     :class="cardClasses"
   >
-    <div class="label text-center">
-      {{ actionTypeName }}
-    </div>
-    <div class="d-flex align-center">
+    <div class="d-flex align-center mb-2">
+      <div class="roll-bonus">
+        <template v-if="!onHitDamage && rollBonus">
+          {{ rollBonus }}
+        </template>
+      </div>
+      <div class="action-title text-center flex-grow-1">
+        {{ model.name || propertyName }}
+      </div>
       <div class="avatar">
-        <div
-          v-if="rollBonus"
-        >
-          <template v-if="rollBonus && !rollBonusTooLong">
-            {{ rollBonus }}
-          </template>
-          <property-icon
-            v-else
-            :model="model"
-            color="rgba(0,0,0,0.7)"
-          />
-        </div>
         <property-icon
-          v-else
           :model="model"
           color="rgba(0,0,0,0.7)"
         />
       </div>
-      <div
-        class="action-header flex d-flex column justify-center pl-1"
-      >
-        <div class="action-title my-1">
-          {{ model.name || propertyName }}
-        </div>
-      </div>
     </div>
     <div
       v-if="Number.isFinite(model.uses)"
@@ -40,7 +25,7 @@
     >
       {{ model.uses }} uses
     </div>
-    <div class="pb-3">
+    <div>
       <div
         v-if="model.resources && model.resources.attributesConsumed.length ||
           model.resources.itemsConsumed.length"
@@ -65,14 +50,35 @@
       <template v-if="model.summary">
         <markdown-text :markdown="model.summary.value || model.summary.text" />
       </template>
-      <v-divider v-if="children && children.length" />
+      <div
+        v-if="onHitDamage"
+      >
+        <span class="damage">
+          {{ rollBonus }}
+        </span>
+        <span>
+          to hit
+        </span>
+      </div>
+      <div v-if="onHitDamage">
+        <span class="damage">
+          {{ onHitDamage.damage }}
+        </span>
+        <span>
+          {{ onHitDamage.suffix }}
+        </span>
+      </div>
       <tree-node-list
-        v-if="children && children.length"
+        v-else-if="children && children.length"
         start-expanded
+        show-external-details
         :children="children"
         @selected="e => $emit('sub-click', e)"
       />
     </div>
+    <div class="action-subtitle text-center">
+      {{ actionTypeName }}
+    </div>
   </div>
 </template>
 
@@ -87,6 +93,8 @@ import TreeNodeList from '/imports/client/ui/components/tree/TreeNodeList.vue';
 import { nodeArrayToTree } from '/imports/api/parenting/nodesToTree.js';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import { some } from 'lodash';
+import applyEffectsToCalculationParseNode from '/imports/api/engine/actions/applyPropertyByType/shared/applyEffectsToCalculationParseNode.js';
+import resolve, { Context, toString } from '/imports/parser/resolve.js';
 
 export default {
   components: {
@@ -148,7 +156,24 @@ export default {
         'free': 'Free Action',
         'long': 'Long Action'
       }[this.model.actionType] || this.model.actionType
-    }
+    },
+    onHitDamage() {
+      /**
+       * Only match a property who has exactly one to-hit child with one damage under that
+       */
+      if (this.children?.length !== 1) return;
+      if (this.children[0]?.node?.type !== 'branch') return;
+      if (this.children[0].children?.length !== 1) return;
+      if (this.children[0].children[0]?.node?.type !== 'damage') return;
+      if (this.children[0].children[0].children?.length !== 0) return;
+      const damage = this.children[0].children[0]?.node;
+      applyEffectsToCalculationParseNode(damage.amount);
+      const { result } = resolve('compile', damage.amount.parseNode, {});
+      return {
+        damage: toString(result),
+        suffix: damage.damageType + (damage.damageType !== 'healing' ? ' damage ' : '')
+      };
+    },
   },
   meteor: {
     children() {
@@ -187,28 +212,39 @@ export default {
   transition: box-shadow .4s cubic-bezier(0.25, 0.8, 0.25, 1),
     transform 0.075s ease;
 }
-
-.avatar {
+.roll-bonus {
   font-size: 18pt;
-  text-align: center;
-  min-width: 40px;
-  min-height: 40px;
+  flex-basis: 24px;
+}
+.avatar {
+  min-width: 24px;
+  min-height: 24px;
+  line-height: 24px;
 }
 
 .label {
   font-size: 10pt;
-  font-variant: small-caps;
+  font-variant: all-small-caps;
   flex-grow: 1;
 }
 
+.damage {
+  font-size: 12pt;
+  font-weight: 500;
+}
 .action-title {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  position: relative;
-  text-align: left;
-  transition: .3s cubic-bezier(.25, .8, .5, 1);
-  width: 100%;
+  font-size: 12pt;
+  font-weight: 600;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-variant: all-small-caps;
+}
+
+.action-subtitle {
+  font-variant: all-small-caps;
+  font-size: 11pt;
 }
 
 .resources {

app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedLineItem.vue

@@ -0,0 +1,122 @@
+<template lang="html">
+  <div class="printed-line-item d-flex align-start mb-0">
+    <div class="quantity">
+      {{ model.quantity !== 1 ? model.quantity : undefined }}
+    </div>
+    <div class="text flex-grow-1">
+      {{ title }}
+      <template v-if="attunementText">
+        ({{ attunementText }})
+      </template>
+    </div>
+    <div class="weight-value d-flex flex-column align-end">
+      <div
+        v-if="model.quantity !== 1"
+        class="each d-flex align-center"
+      >
+        <coin-value
+          v-if="model.value"
+          class="value text-no-wrap"
+          :value="model.value"
+        />
+        <div
+          class="weight text-no-wrap"
+        >
+          <template
+            v-if="model.weight"
+          >
+            {{ model.weight }} lb
+          </template>
+        </div>
+      </div>
+      <div class="total d-flex align-center">
+        <coin-value
+          v-if="totalValue"
+          class="value text-no-wrap"
+          :value="totalValue"
+        />
+        <div
+          class="weight text-no-wrap"
+        >
+          <template
+            v-if="model.weight"
+          >
+            {{ totalWeight }} lb
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import PROPERTIES from '/imports/constants/PROPERTIES.js';
+import stripFloatingPointOddities from '/imports/api/engine/computation/utility/stripFloatingPointOddities.js';
+import CoinValue from '/imports/client/ui/components/CoinValue.vue';
+
+export default {
+  components: {
+    CoinValue,
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      let model = this.model;
+      if (!model) return;
+      if (model.quantity !== 1) {
+        if (model.plural) {
+          return model.plural;
+        } else if (model.name) {
+          return model.name;
+        }
+      } else if (model.name) {
+        return model.name;
+      }
+      let prop = PROPERTIES[model.type]
+      return prop && prop.name;
+    },
+    totalValue() {
+      return stripFloatingPointOddities(this.model.value * this.model.quantity);
+    },
+    totalWeight() {
+      return stripFloatingPointOddities(this.model.weight * this.model.quantity);
+    },
+    attunementText() {
+      if (this.model.requiresAttunement) {
+        if (this.model.attuned) return 'Attuned';
+        return 'Requires attunement';
+      }
+      return undefined;
+    }
+  },
+}
+</script>
+
+<style lang="css" scoped>
+  .quantity {
+    flex-basis: 32px;
+    font-weight: 500;
+    text-align: center;
+  }
+  .each {
+    font-weight: 300;
+  }
+  .total {
+
+  }
+  .weight-value {
+  }
+  .value {
+    min-width: 40px;
+    text-align: end;
+  }
+  .weight {
+    min-width: 40px;
+    text-align: end;
+  }
+</style>

app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedSkill.vue

@@ -11,7 +11,7 @@
           :value="model.proficiency"
           class="prof-icon"
         />
-        <div class="prof-mod ml-2 mr-4 text-right">
+        <div class="prof-mod mr-3 text-right">
           {{ displayedModifier }}
         </div>
         <v-icon
@@ -88,7 +88,7 @@ export default {
 
 <style lang="css" scoped>
 .printed-skill{
-  min-height: 30px;
+  min-height: 0;
 }
 
 .prof-icon {