Some styling fixes and bugfixes

TODO

@@ -12,4 +12,5 @@
 - Add Usage documentation to README.md
 - Add Turf Validation (<= 6 max)
 - Add turf connection validation
-- Document usage of "logic" item property (crew_upgrades)
+- Document usage of "logic" item property (crew_upgrades)
+- Add screenshots

module/blades.js

@@ -100,6 +100,27 @@ Hooks.once("init", async function() {
     return html;
   });
 
+  Handlebars.registerHelper('crew_experience', (options) => {
+
+    let html = options.fn(this);
+    for (let i = 1; i <= 10; i++) {
+
+      html += '<input type="radio" id="crew-experience-' + i + '" name="data.experience" value="' + i + '" dtype="Radio"><label for="crew-experience-' + i + '"></label>';
+    }
+
+    return html;
+  });
+
+  // Enrich the HTML replace /n with <br>
+  Handlebars.registerHelper('html', (options) => {
+
+    let html = "";
+    console.log(options);
+    let text = options.hash['text'].replace(/\n/g, "<br />");
+
+    return new Handlebars.SafeString(text);;
+  });
+
 });
 
 /*

packs/crew_types.db

@@ -1 +1 @@
-{"_id":"678LJHqxkBAaSJci","name":"Cult","permission":{"default":0},"type":"crew_type","data":{"description":"","turfs":{"1":{"name":"Cloister","value":false,"description":"+1 scale for your Adept cohorts","connects":["right"],"connected":[false,false,false,false]},"2":{"name":"Vice Den","value":false,"description":"(Tier roll) - Heat = coin in Downtime","connects":["left","right","bottom"],"connected":[false,false,false,false]},"3":{"name":"Offertory","value":false,"description":"+2 coin for occult operations","connects":["left"],"connected":[false,false,false,false]},"4":{"name":"Ancient Obelisk","value":false,"description":"-1 stress cost for all arcane powers and rituals","connects":["right"],"connected":[false,false,false,false]},"5":{"name":"Ancient Tower","value":false,"description":"+1d to Consort w/ arcane entities on site","connects":["left","bottom"],"connected":[false,false,false,false]},"6":{"name":"Turf","value":false,"description":"","connects":["top","right"],"connected":[false,false,false,false]},"7":{"name":"Turf","value":false,"description":"","connects":["left","top","right","bottom"],"connected":[false,false,false,false]},"8":{"name":"Lair","value":true,"description":"","connects":["left","top","right","bottom"],"connected":[false,false,false,true]},"9":{"name":"Turf","value":false,"description":"","connects":["left","right","bottom"],"connected":[false,false,false,false]},"10":{"name":"Turf","value":false,"description":"","connects":["left","top","bottom"],"connected":[false,false,false,false]},"11":{"name":"Spirit Well","value":false,"description":"+1d to Attune on site","connects":["right"],"connected":[false,false,false,false]},"12":{"name":"Ancient Gate","value":false,"description":"Safe passage in the Deathlands","connects":["left","top"],"connected":[false,false,false,false]},"13":{"name":"Sanctuary","value":false,"description":"+1d to Command and Sway on site","connects":["top"],"connected":[false,false,false,false]},"14":{"name":"Sacred Nexus","value":false,"description":"+1d to healing rolls","connects":["top","right"],"connected":[false,false,false,false]},"15":{"name":"Ancient Altar","value":false,"description":"+1d engagement for occult plans","connects":["left","top"],"connected":[false,false,false,false]}}},"folder":null,"sort":100001,"flags":{}}
+{"_id":"678LJHqxkBAaSJci","name":"Cult","permission":{"default":0},"type":"crew_type","data":{"description":"","experience_clues":"- Advance the agenda of your deity or embody its precepts in action.\n- Contend with challenges above your current station.\n- Bolster your crew's reputation or develop a new one.\n- Express the goals, drives, inner conflict, or essential nature of the crew.","turfs":{"1":{"name":"Cloister","value":false,"description":"+1 scale for your Adept cohorts","connects":["right"],"connected":[false,false,false,false]},"2":{"name":"Vice Den","value":false,"description":"(Tier roll) - Heat = coin in Downtime","connects":["left","right","bottom"],"connected":[false,false,false,false]},"3":{"name":"Offertory","value":false,"description":"+2 coin for occult operations","connects":["left"],"connected":[false,false,false,false]},"4":{"name":"Ancient Obelisk","value":false,"description":"-1 stress cost for all arcane powers and rituals","connects":["right"],"connected":[false,false,false,false]},"5":{"name":"Ancient Tower","value":false,"description":"+1d to Consort w/ arcane entities on site","connects":["left","bottom"],"connected":[false,false,false,false]},"6":{"name":"Turf","value":false,"description":"","connects":["top","right"],"connected":[false,false,false,false]},"7":{"name":"Turf","value":false,"description":"","connects":["left","top","right","bottom"],"connected":[false,false,false,false]},"8":{"name":"Lair","value":true,"description":"","connects":["left","top","right","bottom"],"connected":[false,false,false,true]},"9":{"name":"Turf","value":false,"description":"","connects":["left","right","bottom"],"connected":[false,false,false,false]},"10":{"name":"Turf","value":false,"description":"","connects":["left","top","bottom"],"connected":[false,false,false,false]},"11":{"name":"Spirit Well","value":false,"description":"+1d to Attune on site","connects":["right"],"connected":[false,false,false,false]},"12":{"name":"Ancient Gate","value":false,"description":"Safe passage in the Deathlands","connects":["left","top"],"connected":[false,false,false,false]},"13":{"name":"Sanctuary","value":false,"description":"+1d to Command and Sway on site","connects":["top"],"connected":[false,false,false,false]},"14":{"name":"Sacred Nexus","value":false,"description":"+1d to healing rolls","connects":["top","right"],"connected":[false,false,false,false]},"15":{"name":"Ancient Altar","value":false,"description":"+1d engagement for occult plans","connects":["left","top"],"connected":[false,false,false,false]}}},"folder":null,"sort":100001,"flags":{}}

packs/crew_upgrades.db

@@ -1 +1,2 @@
-{"_id":"M7k3sdhua5qmJ93M","name":"Vault 1","permission":{"default":0,"BwbqQh8sHfeKmUax":3},"type":"crew_upgrade","data":{"description":"Adds the Vault providing additional 4 Coin space","logic":"{\"attribute\":\"data.vault.max\",\"operator\":\"addition\",\"value\":4,\"requirement\":\"\"}","crew_type":""},"folder":null,"sort":300000,"flags":{}}
+{"_id":"EhUz7EZZP0B5IOYn","name":"Vault 1","permission":{"default":0,"BwbqQh8sHfeKmUax":3},"type":"crew_upgrade","data":{"description":"Adds the Vault providing additional 4 Coin space","class":"","price":"1","logic":"{\"attribute\":\"data.vault.max\",\"operator\":\"addition\",\"value\":4,\"requirement\":\"\"}","crew_type":""},"folder":null,"sort":100001,"flags":{}}
+{"_id":"RmjU5DHgecia43Cf","name":"Vault 2","permission":{"default":0,"BwbqQh8sHfeKmUax":3},"type":"crew_upgrade","data":{"description":"Extend the Vault to additional +8 coins","class":"","price":"1","logic":"{\"attribute\":\"data.vault.max\",\"operator\":\"addition\",\"value\":8,\"requirement\":\"Vault 1\"}","crew_type":""},"folder":null,"sort":200001,"flags":{}}

scss/style.scss

@@ -149,15 +149,9 @@ $red: red;
 
   }
 
+  // Abilities
   #abilities {
 
-    #character-experience {
-      @include toothradio(10px, 30px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
-      position: absolute;
-      top: 0px;
-      right: 10px;
-    }
-
     .item-name {
       width: 70px;
     }
@@ -170,6 +164,14 @@ $red: red;
 
   }
 
+  // Experience teeth
+  .teeth-experience {
+    @include toothradio(10px, 30px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
+    position: absolute;
+    top: 0px;
+    right: 10px;
+  }
+
   #harm-armor {
     
     display: flex;
@@ -387,6 +389,7 @@ $red: red;
   #crew-hold {
     border-top: 3px solid black;
     @include toothradio_single(17px, 50px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
+    width: 220px;
   }
 
   #crew-tier {
@@ -409,4 +412,28 @@ $red: red;
     justify-content: none;
   }
 
+  .experience-clues-container {
+    width: 340px;
+    font-size: 12px;
+
+    .experience-clues-description {
+      font-weight: bold;
+    }
+
+    .experience-clues {
+      font-style: italic;
+    }
+  }
+
+  .class-name {
+    width: 512px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 48px;
+    text-transform: uppercase;
+    border: 3px solid black;
+  }
+
 }

styles/blades.css

@@ -209,40 +209,6 @@
   text-decoration: none;
   font-weight: bold;
 }
-* #abilities #character-experience {
-  display: flex;
-  /* Hide the browser's default checkbox */
-  position: absolute;
-  top: 0px;
-  right: 10px;
-}
-* #abilities #character-experience label {
-  height: 30px;
-  width: 10px;
-  background-image: url("assets/teeth/stresstooth-red.png");
-  background-repeat: no-repeat;
-  background-size: contain;
-  margin-right: 5px;
-}
-* #abilities #character-experience label:last-of-type {
-  margin-right: 0px;
-}
-* #abilities #character-experience label[for$="-0"] {
-  width: auto;
-  height: auto;
-  background-image: none !important;
-  background: black !important;
-  margin-right: 0px;
-}
-* #abilities #character-experience input {
-  display: none;
-}
-* #abilities #character-experience input:checked ~ label {
-  background-image: url("assets/teeth/stresstooth-halfgrey.png");
-}
-* #abilities #character-experience input:checked + label {
-  background-image: url("assets/teeth/stresstooth-red.png");
-}
 * #abilities .item-name {
   width: 70px;
 }
@@ -252,6 +218,40 @@
 * #abilities .item-description {
   width: 200px;
 }
+* .teeth-experience {
+  display: flex;
+  /* Hide the browser's default checkbox */
+  position: absolute;
+  top: 0px;
+  right: 10px;
+}
+* .teeth-experience label {
+  height: 30px;
+  width: 10px;
+  background-image: url("assets/teeth/stresstooth-red.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  margin-right: 5px;
+}
+* .teeth-experience label:last-of-type {
+  margin-right: 0px;
+}
+* .teeth-experience label[for$="-0"] {
+  width: auto;
+  height: auto;
+  background-image: none !important;
+  background: black !important;
+  margin-right: 0px;
+}
+* .teeth-experience input {
+  display: none;
+}
+* .teeth-experience input:checked ~ label {
+  background-image: url("assets/teeth/stresstooth-halfgrey.png");
+}
+* .teeth-experience input:checked + label {
+  background-image: url("assets/teeth/stresstooth-red.png");
+}
 * #harm-armor {
   display: flex;
 }
@@ -685,6 +685,7 @@
   border-top: 3px solid black;
   display: flex;
   /* Hide the browser's default checkbox */
+  width: 220px;
 }
 * #crew-hold label {
   height: 50px;
@@ -737,5 +738,25 @@
 * #heat-wanted {
   justify-content: none;
 }
+* .experience-clues-container {
+  width: 340px;
+  font-size: 12px;
+}
+* .experience-clues-container .experience-clues-description {
+  font-weight: bold;
+}
+* .experience-clues-container .experience-clues {
+  font-style: italic;
+}
+* .class-name {
+  width: 512px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48px;
+  text-transform: uppercase;
+  border: 3px solid black;
+}
 
 /*# sourceMappingURL=style.css.map */

template.json

@@ -144,11 +144,12 @@
     "templates": ["default"]
   },
   "crew_upgrade": {
-    "templates": ["default", "logic"],
+    "templates": ["ability", "logic"],
     "crew_type": ""
   },
   "crew_type": {
     "description": "",
+    "experience_clues": "",
     "turfs": {
       "1": {
         "name": "",

templates/actor-sheet.html

@@ -243,7 +243,7 @@
       <div id="abilities" class="flex-vertical">
         <div class="label-stripe">
           <p><label for="character-experience-0">Abilities</label></p>
-          <div id="character-experience">
+          <div id="character-experience" class="teeth-experience">
             {{#multiboxes data.experience}}
             <input type="radio" id="character-experience-0" name="data.experience" value="0" dtype="Radio">
             <input type="radio" id="character-experience-1" name="data.experience" value="1" dtype="Radio">

templates/crew-sheet.html

@@ -87,7 +87,7 @@
 
     {{!-- Coins --}}
     <div id="crew-coins">
-      
+
       <div id="crew-coins-hands">
         <div class="stripe">
           <label for="crew-coins-hands-0">Coins</label>
@@ -177,20 +177,55 @@
 
   <div class="section">
 
-    <div id="crew-hold" class="flex-horizontal">
-      <div class="black-label">Hold</div>
-      {{#multiboxes data.hold}}
-      <div class="flex-horizontal">
-        <div class="gray-label">Weak</div>
-        <input id="crew-hold-weak" type="radio" name="data.hold" value="weak">
-        <label for="crew-hold-weak"></label>
+    <div class="flex-vertical">
+
+      <div id="crew-hold" class="flex-horizontal">
+        <div class="black-label">Hold</div>
+        {{#multiboxes data.hold}}
+        <div class="flex-horizontal">
+          <div class="gray-label">Weak</div>
+          <input id="crew-hold-weak" type="radio" name="data.hold" value="weak">
+          <label for="crew-hold-weak"></label>
+        </div>
+        <div class="flex-horizontal">
+          <div class="gray-label">Strong</div>
+          <input id="crew-hold-strong" type="radio" name="data.hold" value="strong">
+          <label for="crew-hold-strong"></label>
+        </div>
+        {{/multiboxes}}
       </div>
-      <div class="flex-horizontal">
-        <div class="gray-label">Strong</div>
-        <input id="crew-hold-strong" type="radio" name="data.hold" value="strong">
-        <label for="crew-hold-strong"></label>
+
+      <div id="crew-class" class="class-name">
+        {{#each actor.items as |item id|}}
+        {{#eq item.type "crew_type"}}
+        {{item.name}}
+        {{/eq}}
+        {{/each}}
+      </div>
+    </div>
+
+
+    {{!-- Crew XP --}}
+    <div class="flex-fertical">
+      <div class="big-teeth-section">
+        <div class="big-teeth">
+          <label class="black-label" for="crew-experience-0">Crew XP</label>
+          {{#multiboxes data.experience}}
+          <input type="radio" id="crew-experience-0" name="data.experience" value="0" dtype="Radio">
+          {{#crew_experience}}{{/crew_experience}}
+          {{/multiboxes}}
+        </div>
+      </div>
+      <div class="experience-clues-container">
+        <div class="experience-clues-description">At the end of each session, for each item below, mark 1 xp (or instead mark 2xp if that item occurred multiple times).</div>
+        <div class="experience-clues">
+          {{#each actor.items as |item id|}}
+          {{#eq item.type "crew_type"}}
+          {{html text=item.data.experience_clues}}
+          {{/eq}}
+          {{/each}}
+        </div>
       </div>
-      {{/multiboxes}}
     </div>
 
   </div>
@@ -207,10 +242,12 @@
   </div>
 
   <div class="section">
-    <div id="crew-upgrades">   
+
+    {{!-- Crew Upgrades --}}
+    <div id="crew-upgrades" class="grow-two flex-vertical">
       <div class="label-stripe">
         <p><label>Crew Upgrades</label></p>
-      </div>   
+      </div>
       {{#each actor.items as |item id|}}
       {{#eq item.type "crew_upgrade"}}
         <div class="item flex-horizontal" data-item-id="{{item._id}}">

templates/items/crew_type.html

@@ -5,7 +5,12 @@
           <h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name"/></h1>
       </div>
   </header>
-  
+  <div>
+    <label>Description</label>
+    <textarea name="data.experience_clues">{{data.description}}</textarea>
+    <label>Exp Clues</label>
+    <textarea name="data.experience_clues">{{data.experience_clues}}</textarea>
+  </div>
 
   {{> "systems/blades-in-the-dark/templates/parts/turf-list.html" turfs_data=data.turfs can_edit=true}}
 </form>

templates/items/crew_upgrade.html

@@ -11,7 +11,9 @@
     <label>Description</label>
     <textarea name="data.description">{{data.description}}</textarea>
     <label>Crew Type</label>
-    <input type="text" name="data.crew_type" value="{{data.crew_type}}">
+    <input type="text" name="data.class" value="{{data.class}}">
+    <label>Price</label>
+    <input type="text" name="data.price" value="{{data.price}}">
     <label>Logic</label>
     <textarea name="data.logic">{{data.logic}}</textarea>
   </section>