From ac8bd2cddb0cf1938952d7fc912339d8ee52c929 Mon Sep 17 00:00:00 2001
From: ThaumRystra <9525416+ThaumRystra@users.noreply.github.com>
Date: Sat, 23 Sep 2023 12:48:05 +0200
Subject: [PATCH] Iterated on printing format

---
 .../printedCharacterSheet/PrintedSpells.vue   |  39 +++----
 .../printedCharacterSheet/PrintedStats.vue    | 106 ++++++++++--------
 .../components/PrintedAction.vue              |   2 +-
 .../components/PrintedContainer.vue           |   5 -
 .../components/PrintedLineItem.vue            |   9 +-
 .../components/PrintedSpell.vue               |  82 ++++++++++----
 .../components/PrintedSpellList.vue           |   5 +-
 app/imports/client/ui/utility/romanize.js     |  31 +++++
 8 files changed, 182 insertions(+), 97 deletions(-)
 create mode 100644 app/imports/client/ui/utility/romanize.js

diff --git a/app/imports/client/ui/creature/character/printedCharacterSheet/PrintedSpells.vue b/app/imports/client/ui/creature/character/printedCharacterSheet/PrintedSpells.vue
index 5e547734..cac6e162 100644
--- 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>
 
diff --git a/app/imports/client/ui/creature/character/printedCharacterSheet/PrintedStats.vue b/app/imports/client/ui/creature/character/printedCharacterSheet/PrintedStats.vue
index b504b5a6..85832259 100644
--- 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 {
diff --git a/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedAction.vue b/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedAction.vue
index 9382ae14..4a63daa5 100644
--- 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';
diff --git a/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedContainer.vue b/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedContainer.vue
index 40a0ce97..92115796 100644
--- 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>
 
diff --git a/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedLineItem.vue b/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedLineItem.vue
index 9ee7214e..99811f93 100644
--- 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;
diff --git a/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedSpell.vue b/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedSpell.vue
index bc1fbc75..3613a00e 100644
--- 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>
diff --git a/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedSpellList.vue b/app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedSpellList.vue
index 4dbf8d14..13ec0b26 100644
--- 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>
diff --git a/app/imports/client/ui/utility/romanize.js b/app/imports/client/ui/utility/romanize.js
new file mode 100644
index 00000000..f201d53d
--- /dev/null
+++ 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;
+}
\ No newline at end of file