Loadout selector (#107)

module/blades-actor-sheet.js

@@ -22,7 +22,7 @@ export class BladesActorSheet extends BladesSheet {
 
   /** @override */
   getData() {
-    const data = super.getData();
+    var data = super.getData();
 
     // Calculate Load
     let loadout = 0;
@@ -59,6 +59,8 @@ export class BladesActorSheet extends BladesSheet {
       data.data.load_level=load_level[loadout];   
     }
     
+    data.load_levels = ["BITD.Light", "BITD.Normal", "BITD.Heavy"];
+
     return data;
   }
 

scss/README.md

@@ -0,0 +1,5 @@
+# How to build CSS
+
+Install nodeJS: https://nodejs.org/en/
+Install sass (https://www.npmjs.com/package/sass): npm install -g sass
+Open a shell in this folder and run: sass style.scss ../styles/blades.css

scss/style.scss

@@ -246,25 +246,33 @@ $hover-brightness: 0.8;
     }
   }
 
-  // Abilities
+  //Abilitiers and loadout
-  #abilities {
+  #abilities, #loadout {
-
     .item-name {
-      width: 70px;
+      width: 100px;
     }
     .item-body {
       width: auto;
     }
     .item-description {
-      width: 200px;
+      width: 260px;
     }
+  }
 
+  // Abilities
+  #abilities {
     .label-stripe {
       p:first-child {
         margin-right: 10px;
       }
     }
+  }
   
+  // Loadout
+  #loadout {
+    .item-add-popup {
+      margin-left: 10px;
+    }
   }
 
   // Experience teeth
@@ -708,4 +716,33 @@ $hover-brightness: 0.8;
       @include changeable($transition-period, $hover-brightness, $hover-opacity, $red);
     }
   }
+
+  #loadout {
+    select {
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      box-shadow: none;
+      border: none;
+      cursor: pointer;
+      background: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right;
+      padding: 0 20px 0 0;
+      margin: 0.1em -6px 0 0;
+      background-color: $almost_black;
+      font-family: Georgia, "Bitstream Charter", "Times New Roman", serif;
+      font-size: 14px;
+      font-weight: bold;
+      text-transform: uppercase;
+      color: white;
+      text-align: right;
+
+      option {
+        color: white;
+      }
+    }
+
+    select:hover {
+      color: red;
+    }
+  }
 }

styles/blades.css

@@ -301,18 +301,21 @@
 * #character-stress label[for$="-0"] {
   margin-right: 0px;
 }
-* #abilities .item-name {
+* #abilities .item-name, * #loadout .item-name {
-  width: 70px;
+  width: 100px;
 }
-* #abilities .item-body {
+* #abilities .item-body, * #loadout .item-body {
   width: auto;
 }
-* #abilities .item-description {
+* #abilities .item-description, * #loadout .item-description {
-  width: 200px;
+  width: 260px;
 }
 * #abilities .label-stripe p:first-child {
   margin-right: 10px;
 }
+* #loadout .item-add-popup {
+  margin-left: 10px;
+}
 * .teeth-experience {
   display: flex;
   /* Hide the browser's default checkbox */
@@ -1213,5 +1216,29 @@
   opacity: 0.9;
   color: red;
 }
+* #loadout select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  box-shadow: none;
+  border: none;
+  cursor: pointer;
+  background: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right;
+  padding: 0 20px 0 0;
+  margin: 0.1em -6px 0 0;
+  background-color: #191813;
+  font-family: Georgia, "Bitstream Charter", "Times New Roman", serif;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: white;
+  text-align: right;
+}
+* #loadout select option {
+  color: white;
+}
+* #loadout select:hover {
+  color: red;
+}
 
 /*# sourceMappingURL=blades.css.map */

template.json

@@ -25,6 +25,7 @@
     "special_abilities": [],
     "loadout": 0,
     "load_level": "",
+    "selected_load_level": "",
     "harm": {
         "light": {
           "one": "",

templates/actor-sheet.html

@@ -285,8 +285,13 @@
       {{!-- Owned Items Tab --}}
       <div id="loadout" class="tab flex-vertical" data-tab="loadout">
         <div class="label-stripe flex-horizontal">
-           <p>{{localize "BITD.Loadout"}}: {{data.loadout}}/{{localize data.load_level}} </p>
+           <p>{{localize "BITD.Loadout"}} <a class="item-add-popup" data-item-type="item"><i class="fas fa-plus-square"></i></a></p>
-          <p><a class="item-add-popup" data-item-type="item"><i class="fas fa-plus-square"></i></a></p>
+           <p>{{data.loadout}}/{{localize data.load_level}} </p>
+           <div class="dropdown">
+             <select name="data.selected_load_level">
+               {{selectOptions load_levels selected=data.selected_load_level localize=true}}
+             </select>
+           </div>
         </div>
         <div>
           {{#each actor.items as |item id|}}