Merge pull request #7757 from joesinghaus/heart

[Heart: The City Beneath] Some tweaks to the sheet

Heart-the-City-Beneath-mk2/Heart.css

@@ -17,13 +17,14 @@
   display: grid;
   grid-template-areas:
     "top            stress"
-    "beats          abilities-fallout"
-    "equipment      abilities-fallout"
-    "resources      abilities-fallout"
-    "skills-domains abilities-fallout"
+    "beats          abilities"
+    "equipment      abilities"
+    "resources      abilities"
+    "skills-domains abilities"
+    "fallout        abilities"
     "notes          notes";
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: repeat(4,auto) 1fr auto;
+  grid-template-rows: repeat(5,auto) 1fr auto;
   grid-gap: var(--large-gap) calc(2 * var(--large-gap));
   align-items: start;
   align-content: start;
@@ -102,7 +103,6 @@ input[type="checkbox"] + span {
   display: flex;
   border: 1px solid black;
   background: transparent;
-  margin-right: 4px;
   width: 16px;
   height: 16px;
   align-items: center;
@@ -247,6 +247,29 @@ input[type="text"].sheet-redtext {
   text-align: inherit;
 }
 
+/* Broadcast buttons */
+
+button[type=roll].btn.sheet-broadcast-button {
+  font-family: pictos;
+  position: absolute;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  z-index: 3;
+  font-size: 12px;
+  line-height: 14px;
+  height: 14px;
+  width: 14px;
+  color: #777;
+  right: 3px;
+  bottom: 7px;
+}
+
+button[type=roll].sheet-broadcast-button::before {
+  display: none;
+}
+
 /* Common grid formatting */
 .sheet-grid-tiny {
   display: grid;
@@ -334,6 +357,9 @@ input[type="text"].sheet-redtext {
   font-weight: bold;
   align-self: stretch;
 }
+.sheet-rollbutton input[type="checkbox"] + span {
+  margin-right: 4px;
+}
 .sheet-rollbutton .sheet-small-text {
   grid-area: text;
 }
@@ -362,7 +388,15 @@ label.sheet-extradice input[type="number"] {
   grid-area: beats;
 }
 .sheet-beats .sheet-reprow {
-  grid-template-columns: 1fr 80px;
+  grid-template-columns: auto 1fr 80px;
+  align-items: flex-start;
+}
+.sheet-beats label {
+  height: 24px;
+}
+.sheet-beats .sheet-auto-expand {
+  padding: var(--def-padding);
+  min-height: 24px;
 }
 
 /* Equipment and resources */
@@ -394,6 +428,9 @@ label.sheet-extradice input[type="number"] {
   grid-template-columns: 1fr 1fr;
   align-items: start;
 }
+.sheet-skills-domains input[type="checkbox"] + span {
+  margin-right: 4px;;
+}
 .sheet-skills,
 .sheet-domains {
   grid-template-columns: 85px 1fr;
@@ -419,18 +456,22 @@ label.sheet-extradice input[type="number"] {
 }
 
 /* Abilities, Fallout */
-.sheet-abilities-fallout {
-  grid-area: abilities-fallout;
-}
-.sheet-abilities-fallout h3 {
+.sheet-abilities h3,
+.sheet-fallout h3 {
   display: flex;
 }
+.sheet-abilities {
+  grid-area: abilities;
+}
 .sheet-abilities .sheet-reprow {
-  grid-template-columns: 1fr 80px;
+  grid-template-columns: 1fr 80px auto;
   border-bottom: 2px solid var(--red-color);
 }
 .sheet-abilities .sheet-auto-expand {
-  grid-column: span 2;
+  grid-column: span 3;
+}
+.sheet-fallout {
+  grid-area: fallout;
 }
 .sheet-fallout .sheet-reprow {
   grid-template-columns: 1fr 90px 90px;
@@ -493,6 +534,7 @@ label.sheet-extradice input[type="number"] {
 .sheet-rolltemplate-heart .sheet-name {
   font-size: 1.1em;
   letter-spacing: 0.5px;
+  grid-area: name;
 }
 .sheet-rolltemplate-heart .sheet-roll {
   grid-area: roll;

Heart-the-City-Beneath-mk2/Heart.html

@@ -5,79 +5,79 @@
       src="https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Heart-the-City-Beneath-mk2/Heart-logo-transparent.png"
       alt="Heart: The City Beneath logo" />
     <label>
-      <span class="redtext" data-i18n="name-label">Name</span>
+      <span class="redtext" data-i18n="name">Name</span>
       <input type="text" spellcheck="false" name="attr_character_name">
     </label>
     <label>
-      <span class="redtext" data-i18n="class-label">Class</span>
+      <span class="redtext" data-i18n="class">Class</span>
       <input type="text" spellcheck="false" name="attr_class">
     </label>
     <label>
-      <span class="redtext" data-i18n="calling-label">Calling</span>
+      <span class="redtext" data-i18n="calling">Calling</span>
       <input type="text" spellcheck="false" name="attr_calling">
     </label>
     <label>
-      <span class="redtext" data-i18n="ancestry-label">Ancestry</span>
+      <span class="redtext" data-i18n="ancestry">Ancestry</span>
       <input type="text" spellcheck="false" name="attr_ancestry">
     </label>
   </div>
 
   <div class="stress grid-large">
     <div class="stress-values grid-tiny">
-      <h3 class="redtext stresslabel" data-i18n="stress-label">Stress</h3>
-      <h3 class="redtext" data-i18n="protection-label">Protection</h3>
+      <h3 class="redtext stresslabel" data-i18n="stress">Stress</h3>
+      <h3 class="redtext" data-i18n="protection">Protection</h3>
 
       <label>
-        <span class="redtext" data-i18n="blood-label">Blood</span>
+        <span class="redtext" data-i18n="blood">Blood</span>
         <input type="number" value="0" min="0" max="10" name="attr_blood_stress" />
       </label>
       <input type="number" placeholder="0" min="0" max="5" name="attr_blood_protection" />
 
       <label>
-        <span class="redtext" data-i18n="mind-label">Mind</span>
+        <span class="redtext" data-i18n="mind">Mind</span>
         <input type="number" value="0" min="0" max="10" name="attr_mind_stress" />
       </label>
       <input type="number" placeholder="0" min="0" max="5" name="attr_mind_protection" />
 
       <label>
-        <span class="redtext" data-i18n="echo-label">Echo</span>
+        <span class="redtext" data-i18n="echo">Echo</span>
         <input type="number" value="0" min="0" max="10" name="attr_echo_stress" />
       </label>
       <input type="number" placeholder="0" min="0" max="5" name="attr_echo_protection" />
 
       <label>
-        <span class="redtext" data-i18n="fortune-label">Fortune</span>
+        <span class="redtext" data-i18n="fortune">Fortune</span>
         <input type="number" value="0" min="0" max="10" name="attr_fortune_stress" />
       </label>
       <input type="number" placeholder="0" min="0" max="5" name="attr_fortune_protection" />
 
       <label>
-        <span class="redtext" data-i18n="supplies-label">Supplies</span>
+        <span class="redtext" data-i18n="supplies">Supplies</span>
         <input type="number" value="0" min="0" max="10" name="attr_supplies_stress" />
       </label>
       <input type="number" placeholder="0" min="0" max="5" name="attr_supplies_protection" />
 
       <label>
-        <span class="redtext" data-i18n="total-label">Total</span>
+        <span class="redtext" data-i18n="total">Total</span>
         <input type="number" value="0" min="0" max="10" name="attr_total_stress" readonly />
       </label>
     </div>
 
     <div class="stress-clear">
-      <h3 class="redtext" data-i18n="clearstress-label">Clear Stress</h3>
+      <h3 class="redtext" data-i18n="clearstress">Clear Stress</h3>
       <select name="attr_clearedstress">
-        <option value="blood" data-i18n="blood-label" selected>Blood</option>
-        <option value="mind" data-i18n="mind-label">Mind</option>
-        <option value="echo" data-i18n="echo-label">Echo</option>
-        <option value="fortune" data-i18n="fortune-label">Fortune</option>
-        <option value="supplies" data-i18n="supplies-label">Supplies</option>
-        <option value="all" data-i18n="all-stress-label">All Stress</option>
+        <option value="blood" data-i18n="blood" selected>Blood</option>
+        <option value="mind" data-i18n="mind">Mind</option>
+        <option value="echo" data-i18n="echo">Echo</option>
+        <option value="fortune" data-i18n="fortune">Fortune</option>
+        <option value="supplies" data-i18n="supplies">Supplies</option>
+        <option value="all" data-i18n="all-stress">All Stress</option>
       </select>
-      <button type="action" title="Clear Stress" name="act_clear_stress" data-i18n="clear-label">Clear</button>
+      <button type="action" title="Clear Stress" name="act_clear_stress" data-i18n="clear">Clear</button>
     </div>
 
-    <button type="roll" title="Receive fallout?" name="roll_fallout" data-i18n="fallout-test-label"
-      value="&{template:heart} {{title=^{fallout-label}}} {{name=@{character_name}}} {{fallout_against=[[@{total_stress}]]}} {{roll=[[1d12cs0cf0]] vs [[@{total_stress}]]}}">Fallout</button>
+    <button type="roll" title="Receive fallout?" name="roll_fallout" data-i18n="fallout-test"
+      value="&{template:heart} {{title=^{fallout}}} {{name=@{character_name}}} {{fallout_against=[[@{total_stress}]]}} {{roll=[[1d12cs0cf0]] vs [[@{total_stress}]]}}">Fallout</button>
 
     <div class="rollbutton grid-large">
       <select name="attr_roll_skill" class="skill-select">
@@ -117,7 +117,7 @@
         <option value="1" data-i18n="risky">Risky</option>
         <option value="2" data-i18n="dangerous">Dangerous</option>
       </select>
-      <button type="roll" title="roll dice" name="roll_normal" data-i18n="roll-label"
+      <button type="roll" title="roll dice" name="roll_normal" data-i18n="roll"
         value="&{template:heart} {{title=@{roll_title}}} {{name=@{character_name}}} {{roll=@{roll_formula}}} {{roll_details=@{roll_formula_single}}} {{details=@{roll_message}}} {{showresult=1}} @{roll_zerodice}">Roll</button>
       <input type="hidden" name="attr_roll_formula" value="" />
       <input type="hidden" name="attr_roll_formula_single" value="" />
@@ -138,25 +138,31 @@
   </div>
 
   <div class="beats grid-tiny">
-    <h3 class="redtext" data-i18n="active-beats-label">Active Beats</h3>
+    <h3 class="redtext" data-i18n="active-beats">Active Beats</h3>
     <fieldset class="repeating_activebeats">
       <div class="reprow grid-tiny">
-        <input type="text" spellcheck="false" name="attr_beat_name" />
+        <label class="check">
+          <input type="checkbox" name="attr_beat_check" value="1" />
+          <span></span>
+        </label>
+        <div class="auto-expand"><span name="attr_beat_name"></span>
+          <textarea spellcheck="false" name="attr_beat_name"></textarea>
+        </div>
         <select name="attr_beat_type">
-          <option value="minor" data-i18n="minor-label">Minor</option>
-          <option value="major" data-i18n="major-label">Major</option>
-          <option value="zenith" data-i18n="zenith-label">Zenith</option>
+          <option value="minor" data-i18n="minor">Minor</option>
+          <option value="major" data-i18n="major">Major</option>
+          <option value="zenith" data-i18n="zenith">Zenith</option>
         </select>
       </div>
     </fieldset>
   </div>
 
   <div class="equipment grid-tiny">
-    <h3 class="redtext" data-i18n="equipment-label">Equipment</h3>
+    <h3 class="redtext" data-i18n="equipment">Equipment</h3>
     <div class="equipment-grid grid-tiny">
-      <h4 data-i18n="name-label">Name</h4>
+      <h4 data-i18n="name">Name</h4>
       <h4 data-i18n="description-label">Domain/Tags</h4>
-      <h4 data-i18n="die-label">Die</h4>
+      <h4 data-i18n="die">Die</h4>
     </div>
     <fieldset class="repeating_equipment">
       <div class="equipment-grid grid-tiny">
@@ -183,11 +189,11 @@
   </div>
 
   <div class="resources grid-tiny">
-    <h3 class="redtext" data-i18n="resources-label">Resources</h3>
+    <h3 class="redtext" data-i18n="resources">Resources</h3>
     <div class="equipment-grid grid-tiny">
-      <h4 data-i18n="name-label">Name</h4>
+      <h4 data-i18n="name">Name</h4>
       <h4 data-i18n="description-label">Domain/Tags</h4>
-      <h4 ata-i18n="die-label">Die</h4>
+      <h4 ata-i18n="die">Die</h4>
     </div>
     <fieldset class="repeating_resources">
       <div class="equipment-grid grid-tiny">
@@ -215,8 +221,8 @@
 
   <div class="skills-domains grid-large">
     <div class="skills grid-small">
-      <h3 class="redtext" data-i18n="skills-label">Skills</h3>
-      <h4 class="pinktext" data-i18n="knacks-label">Knacks</h4>
+      <h3 class="redtext" data-i18n="skills">Skills</h3>
+      <h4 class="pinktext" data-i18n="knacks">Knacks</h4>
 
       <label class="skill-box">
         <input type="checkbox" name="attr_skill_compel" value="1" />
@@ -300,8 +306,8 @@
       </div>
     </div>
     <div class="domains grid-small">
-      <h3 class="redtext" data-i18n="domains-label">Domains</h3>
-      <h4 class="pinktext" data-i18n="knacks-label">Knacks</h4>
+      <h3 class="redtext" data-i18n="domains">Domains</h3>
+      <h4 class="pinktext" data-i18n="knacks">Knacks</h4>
 
       <label class="skill-box">
         <input type="checkbox" name="attr_domain_cursed" value="1" />
@@ -377,53 +383,60 @@
     </div>
   </div>
 
-  <div class="abilities-fallout grid-large">
-    <div class="abilities grid-tiny">
-      <h3><span class="whiteonredtext" data-i18n="abilities-label">Abilities</span></h3>
-      <fieldset class="repeating_abilities">
-        <div class="reprow grid-tiny">
-          <input type="text" class="redtext" spellcheck="false" name="attr_ability_name"
-            data-i18n-placeholder="ability_name" />
-          <select name="attr_ability_type">
-            <option value="minor" data-i18n="minor-label">Minor</option>
-            <option value="major" data-i18n="major-label">Major</option>
-            <option value="zenith" data-i18n="zenith-label">Zenith</option>
-          </select>
-          <div class="auto-expand"><span name="attr_ability_details"></span>
-            <textarea spellcheck="false" name="attr_ability_details"></textarea>
-          </div>
+  <div class="abilities grid-tiny">
+    <h3><span class="whiteonredtext" data-i18n="abilities">Abilities</span></h3>
+    <fieldset class="repeating_abilities">
+      <div class="reprow grid-tiny">
+        <input type="text" class="redtext" spellcheck="false" name="attr_ability_name"
+          data-i18n-placeholder="ability_name" />
+        <select name="attr_ability_type">
+          <option value="core" data-i18n="core">Core</option>
+          <option value="minor" data-i18n="minor" selected>Minor</option>
+          <option value="major" data-i18n="major">Major</option>
+          <option value="zenith" data-i18n="zenith">Zenith</option>
+        </select>
+        <label class="check">
+          <input type="checkbox" name="attr_ability_check" value="1" />
+          <span></span>
+        </label>
+        <div class="auto-expand"><span name="attr_ability_details"></span>
+          <textarea spellcheck="false" name="attr_ability_details"></textarea>
         </div>
-      </fieldset>
-    </div>
-    <div class="fallout grid-tiny">
-      <h3><span class="whiteonredtext" data-i18n="fallout-label">Fallout</span></h3>
-      <fieldset class="repeating_fallout">
-        <div class="reprow grid-tiny">
-          <input type="text" spellcheck="false" class="sheet-redtext" name="attr_fallout_name"
-            data-i18n-placeholder="fallout_name" />
-          <select name="attr_fallout_type">
-            <option value="blood" data-i18n="blood-label" selected>Blood</option>
-            <option value="mind" data-i18n="mind-label">Mind</option>
-            <option value="echo" data-i18n="echo-label">Echo</option>
-            <option value="fortune" data-i18n="fortune-label">Fortune</option>
-            <option value="supplies" data-i18n="supplies-label">Supplies</option>
-          </select>
-          <select name="attr_fallout_severity">
-            <option value="minor" data-i18n="minor-label">Minor</option>
-            <option value="major" data-i18n="major-label">Major</option>
-            <option value="critical" data-i18n="critical-label">Critical</option>
-          </select>
-          <div class="auto-expand"><span name="attr_fallout_details"></span>
-            <textarea spellcheck="false" name="attr_fallout_details"></textarea>
-          </div>
-        </div>
-      </fieldset>
-    </div>
+        <button class="broadcast-button" type="roll" name="roll_Show"
+          value="&amp;{template:heart} {{title=@{ability_name} (^{@{ability_type}})}} {{name=@{character_name}}} {{details=@{ability_details}}}">:</button>
+      </div>
+    </fieldset>
   </div>
 
+  <div class="fallout grid-tiny">
+    <h3><span class="whiteonredtext" data-i18n="fallout">Fallout</span></h3>
+    <fieldset class="repeating_fallout">
+      <div class="reprow grid-tiny">
+        <input type="text" spellcheck="false" class="sheet-redtext" name="attr_fallout_name"
+          data-i18n-placeholder="fallout_name" />
+        <select name="attr_fallout_type">
+          <option value="blood" data-i18n="blood" selected>Blood</option>
+          <option value="mind" data-i18n="mind">Mind</option>
+          <option value="echo" data-i18n="echo">Echo</option>
+          <option value="fortune" data-i18n="fortune">Fortune</option>
+          <option value="supplies" data-i18n="supplies">Supplies</option>
+        </select>
+        <select name="attr_fallout_severity">
+          <option value="minor" data-i18n="minor">Minor</option>
+          <option value="major" data-i18n="major">Major</option>
+          <option value="critical" data-i18n="critical">Critical</option>
+        </select>
+        <div class="auto-expand"><span name="attr_fallout_details"></span>
+          <textarea spellcheck="false" name="attr_fallout_details"></textarea>
+        </div>
+        <button class="broadcast-button" type="roll" name="roll_Show"
+          value="&amp;{template:heart} {{title=@{fallout_name} (^{@{fallout_type}}, ^{@{fallout_severity}})}} {{name=@{character_name}}} {{details=@{fallout_details}}}">:</button>
+      </div>
+    </fieldset>
+  </div>
 
   <div class="notes grid-tiny">
-    <h3><span class="redtext" data-i18n="notes-label">Notes</h3>
+    <h3><span class="redtext" data-i18n="notes">Notes</h3>
     <fieldset class="repeating_notes">
       <div class="auto-expand"><span name="attr_notes"></span>
         <textarea spellcheck="false" name="attr_notes"></textarea>
@@ -441,10 +454,10 @@
     {{#title_suffix}}({{title_suffix}}){{/title_suffix}}
   </div>
   <div class="name">{{name}}</div>
-  <div class="roll">
+  {{#roll}}<div class="roll">
     <div class="main-roll">{{roll}}</div>
     <div class="roll-details">{{roll_details}}</div>
-  </div>
+  </div>{{/roll}}
   {{#showresult}}<div class="result">
     {{^zerodice}}
     {{#rollTotal() roll 1}}

Heart-the-City-Beneath-mk2/translation.json

@@ -1,18 +1,18 @@
 {
-    "abilities-label": "Abilities",
+    "abilities": "Abilities",
     "ability_name": "Ability name",
-    "active-beats-label": "Active Beats",
-    "all-stress-label": "All Stress",
-    "ancestry-label": "Ancestry",
-    "blood-label": "Blood",
-    "build-pool-label": "Build dice pool: 1D + Skill + Domain + Mastery + Knack",
-    "calling-label": "Calling",
-    "class-label": "Class",
-    "clear-label": "Clear",
-    "clearstress-label": "Clear Stress",
+    "active-beats": "Active Beats",
+    "all-stress": "All Stress",
+    "ancestry": "Ancestry",
+    "blood": "Blood",
+    "calling": "Calling",
+    "class": "Class",
+    "clear": "Clear",
+    "clearstress": "Clear Stress",
     "compel": "Compel",
+    "core": "Core",
     "critical-failure-msg": "<strong>Critical failure</strong> (take double stress)",
-    "critical-label": "Critical",
+    "critical": "Critical",
     "critical-success-msg": "<strong>Critical success</strong> (increase outgoing stress die size)",
     "cursed": "Cursed",
     "dangerous": "Dangerous",
@@ -20,54 +20,53 @@
     "delve": "Delve",
     "description-label": "Domains/Tags",
     "desolate": "Desolate",
-    "die-label": "Die",
+    "die": "Die",
     "difficulty": "Difficulty",
     "discern": "Discern",
-    "domains-label": "Domains",
-    "echo-label": "Echo",
+    "domains": "Domains",
+    "echo": "Echo",
     "endure": "Endure",
-    "equipment-label": "Equipment",
+    "equipment": "Equipment",
     "evade": "Evade",
     "failure-msg": "<strong>Failure</strong> (take stress)",
-    "fallout-label": "Fallout",
-    "fallout-test-label": "Fallout Test",
+    "fallout": "Fallout",
+    "fallout-test": "Fallout Test",
     "fallout_name": "Fallout name",
-    "fortune-label": "Fortune",
+    "fortune": "Fortune",
     "haven": "Haven",
     "hunt": "Hunt",
     "kill": "Kill",
-    "knacks-label": "Knacks",
-    "major-label": "Major",
+    "knacks": "Knacks",
+    "major": "Major",
     "mastery?": "Mastery?",
     "mend": "Mend",
-    "mind-label": "Mind",
-    "minor-label": "Minor",
-    "name-label": "Name",
+    "mind": "Mind",
+    "minor": "Minor",
+    "name": "Name",
     "no-fallout": "No fallout",
     "none": "None",
-    "notes-label": "Notes",
+    "notes": "Notes",
     "occult": "Occult",
-    "protection-label": "Protection",
+    "protection": "Protection",
     "religion": "Religion",
-    "resources-label": "Resources",
+    "resources": "Resources",
     "risky": "Risky",
     "risky-pool-label": "drop highest result, use second-highest result",
-    "roll-label": "Roll",
-    "skills-label": "Skills",
+    "roll": "Roll",
+    "skills": "Skills",
     "success-at-a-cost-msg": "<strong>Success at a cost</strong> (take stress)",
     "success-msg": "<strong>Success</strong> (take no stress)",
     "sneak": "Sneak",
     "standard": "Standard",
     "standard-pool-label": "use highest result",
-    "stress-label": "Stress",
-    "supplies-label": "Supplies",
+    "stress": "Stress",
+    "supplies": "Supplies",
     "take-major-fallout": "Take major fallout",
     "take-minor-fallout": "Take minor fallout",
     "technology": "Technology",
-    "total-label": "Total",
+    "total": "Total",
     "warren": "Warren",
     "wild": "Wild",
-    "zenith-label": "Zenith",
-    "zero-dice-label": "only succeed on a 10.",
+    "zenith": "Zenith",
     "zero-effective-dice": "Zero effective dice"
-}
+}