Updated Mythic Bastionland sheet

- Made roll results larger/easier to read
- Fixed guard input so it works correctly
- Fixed armor calculations so they work correctly
- Added recovery/oaths/feats, per print character sheets

Mythic-Bastionland/mythic-bastionland.css

@@ -1,23 +1,18 @@
 @import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&family=Pirata+One&family=UnifrakturCook:wght@700&display=swap');
 
-/* TABS */
+/* TABS *//*
 .sheet-character,
 .sheet-property,
 .sheet-notes {
   display: none;
-}
+}*/
+
 
-.sheet-property,
-.sheet-notes {
-  background-color: #18282e !important;
-}
 
 input[name="attr_sheetTab"][value="character"]~div.sheet-character,
 input[name="attr_sheetTab"][value="property"]~div.sheet-property,
 input[name="attr_sheetTab"][value="notes"]~div.sheet-notes {
   display: flex !important;
-  padding: 30px;
-  background-color: #f9f9f9;
 }
 
 .sheet-button-select {
@@ -52,7 +47,10 @@ input[name="attr_sheetTab"][value="notes"]~.sheet-button-select button[name="act
 
 /* OVERRIDE */
 .ui-dialog .charsheet {
-  background-color: #1f1f1f;
+  background-color: white;
+  background-image:url('https://i.imgur.com/8NZ1CFj.jpeg');
+  background-size:cover;
+  background-repeat: no-repeat;
 }
 
 .ui-dialog .charsheet .repcontainer .repitem .itemcontrol .repcontrol_del {
@@ -204,7 +202,7 @@ input[type="checkbox"] {
   font-weight: normal;
   box-sizing: border-box;
   font-family: "Pirata One";
-  color: #f9f9f9 !important;
+  color: #548da3 !important;
   font-size: 22px !important;
 }
 
@@ -282,17 +280,22 @@ input[type="checkbox"] {
 .armor-content {
   flex-direction: column;
   height: 180px;
-  width: 231px !important;
+  width: 270px !important;
   gap: 5px;
 }
 
 .armor-line {
   align-items: center;
 }
+.armor_value{
+  max-width:40px;
+}
 
 .armor-line input {
   padding: 0px 5px !important;
   border: 2px solid #18282e !important;
+      font-size: 16px !important;
+    line-height: 170%;
 }
 
 .armor-content label {
@@ -328,13 +331,15 @@ input[type="checkbox"] {
 
 .ability-description {
   height: 100px !important;
-  font-size: 12px !important;
+     font-size: 15px !important;
+    line-height: 130%;
   outline-color: #a7a984;
 }
 
 .passion-description {
   height: 48px !important;
-  font-size: 12px !important;
+    font-size: 15px !important;
+    line-height: 130%;
   outline-color: #a7a984;
 }
 
@@ -351,9 +356,7 @@ input[type="checkbox"] {
   justify-content: center;
 }
 
-.weapon {
-  margin-bottom: 20px;
-}
+
 
 .weapon-grid div {
   flex-direction: column;
@@ -418,12 +421,25 @@ input[type="checkbox"] {
 #weapon-name input {
   padding-left: 10px !important;
 }
+
+.sheet-property-notes-container {
+  display: flex !important;
+  gap: 20px !important;
+  width: 100% !important;
+}
+
+.sheet-property, .sheet-notes{
+  flex: 1 !important;
+  width: auto !important;
+  display: block !important;
+}
+
 /* END OF SHEET-CHARACTER */
 
 /*PROPERTY AND NOTES */
 .property,
 .notes {
-  height: 500px !important;
+  height: 350px !important;
   background-color: #f9f9f9;
   box-sizing: border-box;
   border-color: #18282e;
@@ -435,11 +451,81 @@ input[type="checkbox"] {
 }
 /* END OF PROPERTY AND NOTES */
 
+/* RECOVERY, OATH, FEATS, AND GAMBITS SECTION */
+.recovery-oath-feats-gambits {
+  width: 100%;
+}
+
+.recovery-oath-feats-gambits .top-row,
+.recovery-oath-feats-gambits .bottom-row {
+  display: flex;
+  gap: 20px;
+}
+
+.recovery-oath-feats-gambits .recovery-section,
+.recovery-oath-feats-gambits .feats-section,
+.recovery-oath-feats-gambits .oath-section,
+.recovery-oath-feats-gambits .gambits-section {
+    flex: 1;
+    padding: 10px 5px 0px 5px;
+    padding-bottom: 0px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+.recovery-oath-feats-gambits .recovery-content,
+.recovery-oath-feats-gambits .feats-content,
+.recovery-oath-feats-gambits .oath-content,
+.recovery-oath-feats-gambits .gambits-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.gambits-content, .oath-content{
+      flex-flow: column nowrap;
+}
+.gambits-section, .feats-section{
+min-width: 28%;
+}
+.oath-content{
+  text-align:left;
+}
+
+.recovery-oath-feats-gambits h3 {
+  margin-top: 0;
+  color: #18282e;
+  font-family: "Pirata One";
+  font-size: 18px;
+  text-align: center;
+}
+
+.recovery-oath-feats-gambits p {
+  font-size: 14px;
+  font-family: "Alegreya";
+  margin-bottom: 3px;
+}
+
+.recovery-oath-feats-gambits strong {
+  color: #18282e;
+  font-weight: bold;
+}
+
+.recovery-oath-feats-gambits em {
+  color: #666;
+  font-style: italic;
+  font-size: 12px;
+}
+
+.oath-content p{
+  font-size:20px;
+}
 /* TEMPLATES*/
 .sheet-rolltemplate-default,
 .sheet-rolltemplate-test-under {
   font-family: "Pirata One";
-  font-size: 12px;
+  font-size: 24px;
 }
 
 .sheet-rolltemplate-default table {
@@ -450,10 +536,10 @@ input[type="checkbox"] {
 
 .sheet-rolltemplate-default caption,
 .sheet-rolltemplate-test-under .sheet-rollname {
-  font-size: 16px !important;
+  font-size: 18px !important;
   text-align: center !important;
   font-family: "Pirata One" !important;
-  padding: 5px !important;
+  padding: 8px !important;
   background-color: #f9f9f9 !important;
   color: #f9f9f9 !important;
   line-height: 16px;
@@ -465,7 +551,7 @@ input[type="checkbox"] {
 }
 
 .sheet-rolltemplate-default td {
-  padding: 5px !important;
+  padding: 10px !important;
   line-height: 18px;
   font-weight: 600;
   color: #333;
@@ -482,7 +568,18 @@ input[type="checkbox"] {
   background-color: transparent !important;
   border: none !important;
 }
-
+.sheet-rolltemplate-default .inlinerollresult{
+  padding: 5px;
+    display: inline-block;
+    width: 30px;
+    text-align: center;
+    height: 27px;
+    vertical-align: middle;
+    padding-top: 16px;
+    color: #4c1f04 !important;
+    background-color: #eb9b3f !important;
+    border-radius: 5px;
+}
 .sheet-rolltemplate-test-under .sheet-template-header {
   display: flex;
   background-color: #18282e;
@@ -505,6 +602,7 @@ input[type="checkbox"] {
 .sheet-rolltemplate-test-under .sheet-template-result {
   background-color: #f9f9f9;
   padding: 5px;
+  min-height: 40px;
 }
 
 .sheet-rolltemplate-test-under .sheet-template-result span {
@@ -512,10 +610,22 @@ input[type="checkbox"] {
   color: #333 !important;
   border: none !important;
 }
+.sheet-rolltemplate-test-under .sheet-template-result span span {
+padding: 5px;
+    display: inline-block;
+    width: 30px;
+    text-align: center;
+    height: 27px;
+    vertical-align: middle;
+    padding-top: 16px;
+    color: #ffdabf !important;
+    background-color: #714545 !important;
+    border-radius:5px;
+}
 
 .sheet-rolltemplate-test-under .sheet-template-outcome-success {
   background-color: #18282e;
-  color: green;
+  color: #65f192;
   padding: 5px;
   font-weight: bolder !important;
   display: flex;
@@ -525,7 +635,7 @@ input[type="checkbox"] {
 
 .sheet-rolltemplate-test-under .sheet-template-outcome-failure {
   background-color: #18282e;
-  color: red;
+  color: #e76161;
   padding: 5px;
   font-weight: bolder !important;
   display: flex;

Mythic-Bastionland/mythic-bastionland.html

@@ -2,11 +2,11 @@
 <input type="hidden" name="attr_sheetTab" value="character" />
 
 <!-- SHEET SELECTOR -->
-<div class="sheet-button-select">
+<!-- <div class="sheet-button-select">
   <button type="action" name="act_character">Knight</button>
   <button type="action" name="act_property">Property</button>
   <button type="action" name="act_notes">Notes</button>
-</div>
+</div> -->
 <!-- END OF SHEET SELECTOR -->
 <!-- CHARACTER SHEET -->
 <div class="sheet-character">
@@ -15,12 +15,12 @@
     <div class="header">
       <div class="header-line">
         <label>
-          Knight:
-          <input type="text" name="attr_knight" id="knight-input" />
-        </label>
-        <label>
-          Name:
+          They were named:
           <input type="text" name="attr_character_name" id="name-input" />
+        </label>
+               <label>
+          Known as the:
+          <input type="text" name="attr_knight" id="knight-input" />
         </label>
       </div>
       <div class="header-line">
@@ -75,7 +75,7 @@
               class="virtue-button" />
           </div>
           <div class="virtues-line" id="guard">
-            <label>Guard (GD)<input type="text" name="attr_ac" />/<input type="text" name="attr_ac" /></label>
+            <label>Guard (GD)<input type="text" name="attr_ac" />/<input type="text" name="attr_acMax" /></label>
           </div>
         </div>
       </div>
@@ -87,19 +87,23 @@
         <h3>Armor</h3>
         <div class="armor-content">
           <div class="armor-line">
-            <input type="text" name="attr_armor_coat_name" placeholder="Coat" />
+            <input type="text" name="attr_armor_coat_desc" placeholder="Coat description" />
+            <input type="number" name="attr_armor_coat_name" placeholder="0" class="armor_value" />
             <input type="checkbox" name="attr_armor_coat_score" value="1" />
           </div>
           <div class="armor-line">
-            <input type="text" name="attr_armor_plate_name" placeholder="Plate" />
+            <input type="text" name="attr_armor_plate_desc" placeholder="Plate description" />
+            <input type="number" name="attr_armor_plate_name" placeholder="0" class="armor_value" />
             <input type="checkbox" name="attr_armor_plate_score" value="1" />
           </div>
           <div class="armor-line">
-            <input type="text" name="attr_armor_helm_name" placeholder="Helm" />
+            <input type="text" name="attr_armor_helm_desc" placeholder="Helm description" />
+            <input type="number" name="attr_armor_helm_name" placeholder="0" class="armor_value" />
             <input type="checkbox" name="attr_armor_helm_score" value="1" />
           </div>
           <div class="armor-line">
-            <input type="text" name="attr_armor_shield_name" placeholder="Shield" />
+            <input type="text" name="attr_armor_shield_desc" placeholder="Shield description" />
+            <input type="number" name="attr_armor_shield_name" placeholder="0" class="armor_value" />
             <input type="checkbox" name="attr_armor_shield_score" value="1" />
           </div>
           <label>Armor<input class="armor-total" type="text" readonly name="attr_armorTotal" /></label>
@@ -138,6 +142,55 @@
         <label class="weapon-damage-label">Damage</label>
       </div>
     </div>
+          <div class="weapon">
+                    <div class="weapon-grid">
+          <div id="weapon-roll">
+            <input type="hidden" name="attr_weaponRoll" value="0" />
+            <button type="roll" name="AttackRoll" class="attack-roll"
+              value="&{template:default} {{name=@{character_name} attacks with @{weaponNameSmite}}} {{Damage=[[@{weaponDamageSmite}]]}}"></button>
+          </div>
+          <div id="weapon-name">
+            <input type="text" name="attr_weaponNameSmite" value="Smite" />
+          </div>
+          <div id="weapon-attack-type">
+            <input type="text" name="attr_weaponTypeSmite" />
+          </div>
+          <div id="weapon-damage">
+            <input type="text" name="attr_weaponDamageSmite" value="1d12" class="input-as-number" />
+          </div>
+        </div>
+                <div class="weapon-grid">
+          <div id="weapon-roll">
+            <input type="hidden" name="attr_weaponRoll" value="0" />
+            <button type="roll" name="AttackRoll" class="attack-roll"
+              value="&{template:default} {{name=@{character_name} attacks with @{weaponNameAdvantage}}} {{Damage=[[@{weaponDamageAdvantage}]]}}"></button>
+          </div>
+          <div id="weapon-name">
+            <input type="text" name="attr_weaponNameAdvantage" value="Advantage" />
+          </div>
+          <div id="weapon-attack-type">
+            <input type="text" name="attr_weaponTypeAdvantage" />
+          </div>
+          <div id="weapon-damage">
+            <input type="text" name="attr_weaponDamageAdvantage" value="1d8" class="input-as-number" />
+          </div>
+        </div>
+        <div class="weapon-grid">
+          <div id="weapon-roll">
+            <input type="hidden" name="attr_weaponRoll" value="0" />
+            <button type="roll" name="AttackRoll" class="attack-roll"
+              value="&{template:default} {{name=@{character_name} attacks with @{weaponName}}} {{Damage=[[@{weaponDamage}]]}}"></button>
+          </div>
+          <div id="weapon-name">
+            <input type="text" name="attr_weaponName" value="Dagger" />
+          </div>
+          <div id="weapon-attack-type">
+            <input type="text" name="attr_weaponType" />
+          </div>
+          <div id="weapon-damage">
+            <input type="text" name="attr_weaponDamage" value="1d6" class="input-as-number" />
+          </div>
+        </div>
     <fieldset class="repeating_weapons">
       <div class="weapon">
         <div class="weapon-grid">
@@ -160,18 +213,72 @@
     </fieldset>
   </div>
   <!-- End of Weapons -->
+  
+  <!-- Recovery, Oath, Feats, and Gambits Section -->
+  <div class="recovery-oath-feats-gambits">
+    <div class="top-row">
+            <div class="oath-section">
+        <h3>OATH</h3>
+        <div class="oath-content">
+          <p>Seek the Myths</p>
+          <p>Honour the Seers</p>
+          <p>Protect the Realm</p>
+        </div>
+      <div class="recovery-section">
+        <h3>Recovery</h3>
+        <div class="recovery-content">
+          <p><strong>VIG</strong> - Hospitality or consume Sustenance</p>
+          <p><strong>CLA</strong> - Seer's guidance or consume Stimulant</p>
+          <p><strong>SPI</strong> - Indulge passion or consume Sacrament</p>
+          <p><strong>Gd/Fatigue</strong> - A moment's calm and rest</p>
+        </div>
+      </div>
+      </div>
+      <div class="feats-section">
+        <h3>FEATS</h3>
+        <div class="feats-content">
+          <p><strong>SMITE</strong> - +d12 or Blast to a melee attack.<br>
+          <em>VIG Save or become Fatigued.</em></p>
+          <p><strong>FOCUS</strong> - Perform a Gambit without using a die.<br>
+          <em>CLA Save or become Fatigued.</em></p>
+          <p><strong>DENY</strong> - Discard a damage die rolled against you or a nearby Ally.<br>
+          <em>SPI Save or become Fatigued.</em></p>
+        </div>
+      </div>
+      <div class="gambits-section">
+        <h3>GAMBITS</h3>
+        <div class="gambits-content">
+          <p><strong>Bolster</strong> the attack for +1 total damage</p>
+          <p><strong>Move</strong> after the attack</p>
+          <p><strong>Repel</strong> a foe away from you</p>
+          <p><strong>Stop</strong> a foe from moving next turn</p>
+          <p><strong>Impair</strong> a weapon on their next turn</p>
+          <p><strong>Trap</strong> a shield until your next turn</p>
+          <p><strong>Dismount</strong> a foe</p>
+          <p><strong>Other</strong> effect of a similar level of impact</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- End of Recovery, Oath, Feats, and Gambits Section -->
 </div>
 <!-- END OF CHARACTER SHEET -->
-<!-- PROPERTY SHEET -->
-<div class="sheet-property">
-  <textarea name="attr_property" class="property"></textarea>
+<!-- PROPERTY AND NOTES CONTAINER -->
+<div class="sheet-property-notes-container">
+  <!-- PROPERTY SHEET -->
+  <div class="sheet-property">
+   <h3>Property</h3>
+    <textarea name="attr_property" class="property"></textarea>
+  </div>
+  <!-- END OF PROPERTY SHEET -->
+  <!-- NOTES SHEET -->
+  <div class="sheet-notes">
+     <h3>Notes</h3>
+    <textarea name="attr_notes" class="notes"></textarea>
+  </div>
+  <!-- END OF NOTES SHEET -->
 </div>
-<!-- END OF PROPERTY SHEET -->
-<!-- NOTES SHEET -->
-<div class="sheet-notes">
-  <textarea name="attr_notes" class="notes"></textarea>
-</div>
-<!-- END OF NOTES SHEET -->
+<!-- END OF PROPERTY AND NOTES CONTAINER -->
 <!-- ROLLTEMPLATES -->
 <rolltemplate class="sheet-rolltemplate-test-under">
   <div class="sheet-template-container">
@@ -201,14 +308,26 @@
     });
 
     // Calculate armor total based on checked pieces
-    const armorPieces = ['armor_coat_score', 'armor_plate_score', 'armor_helm_score', 'armor_shield_score'];
+    const armorPieces = [
+      {score: 'armor_coat_score', value: 'armor_coat_name'},
+      {score: 'armor_plate_score', value: 'armor_plate_name'},
+      {score: 'armor_helm_score', value: 'armor_helm_name'},
+      {score: 'armor_shield_score', value: 'armor_shield_name'}
+    ];
     
     function calculateArmorTotal() {
-      getAttrs(armorPieces, function(values) {
+      // Get all armor score and value attributes
+      const attrsToGet = [];
+      armorPieces.forEach(piece => {
+        attrsToGet.push(piece.score, piece.value);
+      });
+      
+      getAttrs(attrsToGet, function(values) {
         let total = 0;
         armorPieces.forEach(piece => {
-          if(values[piece] === "1") {
-            total += 1;
+          if(values[piece.score] === "1") {
+            const armorValue = parseInt(values[piece.value]) || 0;
+            total += armorValue;
           }
         });
         setAttrs({
@@ -217,9 +336,10 @@
       });
     }
 
-    // Listen for changes in any armor piece
+    // Listen for changes in any armor piece score or value
     armorPieces.forEach(piece => {
-      on(`change:${piece}`, calculateArmorTotal);
+      on(`change:${piece.score}`, calculateArmorTotal);
+      on(`change:${piece.value}`, calculateArmorTotal);
     });
 
     // Initial calculation when sheet opens