Iterated on printing format

2023-09-23 12:48:05 +02:00
parent 6204be2240
commit ac8bd2cddb
8 changed files with 182 additions and 97 deletions
--- a/app/imports/client/ui/creature/character/printedCharacterSheet/PrintedSpells.vue
+++ b/app/imports/client/ui/creature/character/printedCharacterSheet/PrintedSpells.vue
@@ -2,37 +2,38 @@
  <div
    class="spells"
  >
-    <column-layout wide-columns>
-      <div class="span-all">
-        <div class="label text-center octagon-border">
-          Spells
-        </div>
-      </div>
+    <div
+      class="label text-center octagon-border my-2 avoid-page-break-after"
+    >
+      Spells
+    </div>
+    <column-layout
+      v-if="spellsWithoutList && spellsWithoutList.length"
+      wide-columns
+    >
      <div
        v-for="spell in spellsWithoutList"
        :key="spell._id"
      >
        <printed-spell :model="spell" />
      </div>
-      <template
-        v-for="spellList in spellListsWithoutAncestorSpellLists"
-      >
-        <div
-          :key="spellList._id"
-          class="span-all"
-        >
-          <printed-spell-list
-            :model="spellList"
-          />
-        </div>
+    </column-layout>
+    <div
+      v-for="spellList in spellListsWithoutAncestorSpellLists"
+      :key="spellList._id"
+    >
+      <printed-spell-list
+        :model="spellList"
+      />
+      <column-layout wide-columns>
        <div
          v-for="spell in spellList.spells"
          :key="spell._id"
        >
          <printed-spell :model="spell" />
        </div>
-      </template>
-    </column-layout>
+      </column-layout>
+    </div>
  </div>
 </template>

--- a/app/imports/client/ui/creature/character/printedCharacterSheet/PrintedStats.vue
+++ b/app/imports/client/ui/creature/character/printedCharacterSheet/PrintedStats.vue
@@ -13,7 +13,10 @@
        >
          <div class="score">
            <div class="double-border top">
-              <div class="label text-center mb-0">
+              <div
+                class="label text-center mb-0"
+                style="line-height: 16px"
+              >
                {{ ability.name }}
              </div>
              <div class="big-number mb-1">
@@ -108,8 +111,13 @@
        :key="healthBar._id"
      >
        <div class="double-border">
-          <div class="label">
-            Total: {{ healthBar.total }}
+          <div>
+            <b>
+              Total:
+            </b>
+            <span>
+              {{ healthBar.total }}
+            </span>
          </div>
          <div style="height: 40px;" />
          <div
@@ -131,9 +139,9 @@
      >
        <div class="double-border">
          <div>
-            <span class="label">
+            <b>
              Total:
-            </span>
+            </b>
            <span
              v-for="hitDie in hitDice"
              :key="hitDie._id"
@@ -162,7 +170,7 @@
        >
          <div
            v-if="resource.total <= 8"
-            class="label"
+            class="label mb-0"
          >
            {{ resource.name }}
          </div>
@@ -175,6 +183,7 @@
          <div
            v-if="resource.total <= 8"
            class="d-flex justify-end"
+            style="margin-top: -4px"
          >
            <div
              v-for="i in resource.total"
@@ -191,41 +200,6 @@
        </div>
      </div>

-      <div
-        v-if="spellSlots && spellSlots.length"
-      >
-        <div class="double-border">
-          <div class="label text-center">
-            Spell Slots
-          </div>
-          <div
-            v-for="spellSlot in spellSlots"
-            :key="spellSlot._id"
-            class="mb-7"
-            :class="spellSlot.total <= 8 && 'mb-7'"
-          >
-            <div class="label">
-              {{ spellSlot.name }}
-            </div>
-            <div
-              v-if="spellSlot.total > 8"
-            >
-              Total: {{ spellSlot.total }}
-            </div>
-            <div
-              v-else
-              class="d-flex"
-            >
-              <div
-                v-for="i in spellSlot.total"
-                :key="i"
-                class="resource-bubble"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
      <div
        v-if="savingThrows.length"
      >
@@ -275,9 +249,7 @@
          </div>
        </div>
      </div>
-      <div
-        v-if="weapons && weapons.length"
-      >
+      <div>
        <div
          class="double-border"
        >
@@ -299,6 +271,41 @@
        </div>
      </div>

+      <div
+        v-if="spellSlots && spellSlots.length"
+      >
+        <div class="double-border">
+          <div class="label text-center">
+            Spell Slots
+          </div>
+          <div
+            v-for="spellSlot in spellSlots"
+            :key="spellSlot._id"
+            class="mb-7"
+            :class="spellSlot.total <= 8 && 'mb-7'"
+          >
+            <div class="label">
+              {{ spellSlot.name }}
+            </div>
+            <div
+              v-if="spellSlot.total > 8"
+            >
+              Total: {{ spellSlot.total }}
+            </div>
+            <div
+              v-else
+              class="d-flex"
+            >
+              <div
+                v-for="i in spellSlot.total"
+                :key="i"
+                class="resource-bubble"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
      <div
        v-for="note in notes"
        :key="note._id"
@@ -511,7 +518,15 @@ export default {
      return getProperties(this.creature, { type: 'feature' });
    },
    notes(){
-      return getProperties(this.creature, { type: 'note', summary: {$exists: true} });
+      const allNoteIds = getProperties(this.creature, { 
+        type: 'note',
+      }).map(note => note._id);
+      const topLevelNotes = getProperties(this.creature, {
+        type: 'note',
+        summary: { $exists: true },
+        'ancestor.id': {$nin: allNoteIds}
+      });
+      return topLevelNotes;
    },
  },
  methods: {
@@ -554,7 +569,6 @@ export default {
  min-width: 86px;
  text-align: center;
  margin: 4px 4px -10px;
-  padding: 8px;
  z-index: 1;
 }
 .ability .bottom {
--- a/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedAction.vue
+++ b/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedAction.vue
@@ -84,7 +84,7 @@

 <script lang="js">
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
-import numberToSignedString from '../../../../../../api/utility/numberToSignedString.js';
+import numberToSignedString from '/imports/api/utility/numberToSignedString.js';
 import AttributeConsumedView from '/imports/client/ui/properties/components/actions/AttributeConsumedView.vue';
 import ItemConsumedView from '/imports/client/ui/properties/components/actions/ItemConsumedView.vue';
 import PropertyIcon from '/imports/client/ui/properties/shared/PropertyIcon.vue';
--- a/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedContainer.vue
+++ b/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedContainer.vue
@@ -88,11 +88,6 @@
        </div>
      </div>
    </div>
-
-    <property-description
-      text
-      :model="model.description"
-    />
  </div>
 </template>

--- a/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedLineItem.vue
+++ b/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedLineItem.vue
@@ -100,16 +100,15 @@ export default {
 <style lang="css" scoped>
  .quantity {
    flex-basis: 32px;
-    font-weight: 500;
-    text-align: center;
+    font-weight: 700;
+    text-align: end;
+    padding-right: 8px;
  }
  .each {
    font-weight: 300;
  }
  .total {
-
-  }
-  .weight-value {
+    font-weight: 500;
  }
  .value {
    min-width: 40px;
--- a/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedSpell.vue
+++ b/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedSpell.vue
@@ -2,35 +2,52 @@
  <div
    class="double-border"
  >
-    <div
-      v-if="model.name"
-      class="label"
-    >
-      {{ model.name }}
+    <div class="d-flex align-center mb-2">
+      <div class="spell-level">
+        <div
+          v-if="model.level"
+          class="spell-level-number"
+        >
+          {{ romanLevel }}
+        </div>
+      </div>
+      <div class="spell-title text-center flex-grow-1">
+        {{ model.name || propertyName }}
+      </div>
+      <div class="avatar">
+        <property-icon
+          :model="model"
+          color="rgba(0,0,0,0.7)"
+        />
+      </div>
    </div>
    <div v-if="model.level">
      {{ levelText }} {{ model.school }} {{ model.ritual ? '(ritual)' : '' }}
    </div>
    <div v-else>
-      {{ model.school }} cantrip
+      {{ model.school }} cantrip {{ model.ritual ? '(ritual)' : '' }}
+    </div>
+    <div
+      v-if="rollBonus"
+    >
+      <b>To hit:</b> {{ rollBonus }}
    </div>
    <div>
-      Casting Time: {{ model.castingTime }}
+      <b>Casting time:</b> {{ model.castingTime }}
    </div>
    <div>
-      Range: {{ model.range }}
+      <b>Range:</b> {{ model.range }}
    </div>
    <div>
-      Components: {{ spellComponents }}
+      <b>Components:</b> {{ spellComponents }}
    </div>
-    <div>
-      Duration: {{ model.duration }}
+    <div class="mb-4">
+      <b>Duration:</b> {{ model.duration }}
    </div>
    <property-description
      text
      :model="model.summary"
    />
-    <v-divider class="my-2" />
    <property-description
      text
      :model="model.description"
@@ -39,7 +56,10 @@
 </template>

 <script lang="js">
+import PropertyIcon from '/imports/client/ui/properties/shared/PropertyIcon.vue';
 import PropertyDescription from '/imports/client/ui/properties/viewers/shared/PropertyDescription.vue';
+import numberToSignedString from '/imports/api/utility/numberToSignedString.js';
+import romanize from '/imports/client/ui/utility/romanize.js';

 const levelText = [
  'cantrip', '1st-level', '2nd-level', '3rd-level', '4th-level', '5th-level',
@@ -48,6 +68,7 @@ const levelText = [

 export default {
  components: {
+    PropertyIcon,
    PropertyDescription,
  },
  props: {
@@ -58,15 +79,21 @@ export default {
  },
  computed: {
    levelText() {
-      return levelText[this.model.level]
+      return levelText[this.model.level] || `level ${this.model.level}`;
+    },
+    romanLevel() {
+      return romanize(this.model.level) || this.model.level;
+    },
+    rollBonus() {
+      if (!this.model.attackRoll) return;
+      return numberToSignedString(this.model.attackRoll.value);
    },
    spellComponents() {
      let components = [];
-      if (this.model.ritual) components.push('Ritual');
-      if (this.model.concentration) components.push('Concentration');
-      if (this.model.verbal) components.push('Verbal');
-      if (this.model.somatic) components.push('Somatic');
-      if (this.model.material) components.push(`Material (${this.model.material})`);
+      if (this.model.concentration) components.push('C');
+      if (this.model.verbal) components.push('V');
+      if (this.model.somatic) components.push('S');
+      if (this.model.material) components.push(`M (${this.model.material})`);
      return components.join(', ');
    },
  }
@@ -74,9 +101,24 @@ export default {
 </script>

 <style lang="css" scoped>
-.label {
+.spell-level {
+  width: 24px;
+}
+.spell-level-number {
+  font-size: 18pt;
+}
+.avatar {
+  min-width: 24px;
+  min-height: 24px;
+  line-height: 24px;
+}
+.spell-title {
  font-size: 14pt;
-  font-variant: all-small-caps;
  font-weight: 600;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-variant: all-small-caps;
 }
 </style>
--- a/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedSpellList.vue
+++ b/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedSpellList.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="octagon-border">
+  <div
+    class="octagon-border my-1"
+    style="page-break-after: avoid;"
+  >
    <div class="label text-center">
      {{ model.name }}
    </div>
--- a/app/imports/client/ui/utility/romanize.js
+++ b/app/imports/client/ui/utility/romanize.js
@@ -0,0 +1,31 @@
+const roman = {
+  Ⅿ: 1000,
+  ⅭⅯ: 900,
+  Ⅾ: 500,
+  ⅭⅮ: 400,
+  Ⅽ: 100,
+  ⅩⅭ: 90,
+  Ⅼ: 50,
+  XL: 40,
+  Ⅻ: 12,
+  Ⅺ: 11,
+  Ⅹ: 10,
+  Ⅸ: 9,
+  Ⅷ: 8,
+  Ⅶ: 7,
+  Ⅵ: 6,
+  Ⅴ: 5,
+  Ⅳ: 4,
+  Ⅲ: 3,
+  Ⅱ: 2,
+  Ⅰ: 1
+};
+export default function romanize(num) {
+  var str = '';
+  for (var i of Object.keys(roman)) {
+    var q = Math.floor(num / roman[i]);
+    num -= q * roman[i];
+    str += i.repeat(q);
+  }
+  return str;
+}