ENH: Weapon tags

src/lang/en.json

@@ -173,6 +173,7 @@
     "OSE.items.roundAttacksMax": "Maximum Attacks per Round",
     "OSE.items.resetAttacks": "Reset all Attacks per Round",
     "OSE.items.hasShield": "Has a Shield bonus",
+    "OSE.items.typeTag": "Type a comma separated list of tag e.g 'Melee,Missile (5’–10’ / 11’–20’ / 21’–30’)'",
 
     "OSE.armor.type": "Armor Type",
     "OSE.armor.unarmored": "Unarmored",

src/module/actor/character-sheet.js

@@ -183,7 +183,6 @@ export class OseActorSheetCharacter extends OseActorSheet {
     let update = duplicate(data[table]);
     this._chooseLang().then((dialogInput) => {
       const name = CONFIG.OSE.languages[dialogInput.choice];
-      console.log(name);
       if (update.value) {
         update.value.push(name);
       } else {
@@ -200,7 +199,6 @@ export class OseActorSheetCharacter extends OseActorSheet {
   _popLang(table, lang) {
     const data = this.actor.data.data;
     let update = data[table].value.filter((el) => el != lang);
-    console.log(update);
     let newData = {};
     newData[table] = { value: update };
     return this.actor.update({ data: newData }).then(() => {

src/module/item/item-sheet.js

@@ -18,8 +18,8 @@ export class OseItemSheet extends ItemSheet {
   static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
       classes: ["ose", "sheet", "item"],
-      width: 500,
+      width: 520,
-      height: 370,
+      height: 380,
       resizable: false,
       tabs: [
         {
@@ -51,11 +51,57 @@ export class OseItemSheet extends ItemSheet {
 
   /* -------------------------------------------- */
 
+  _pushTag(values) {
+    const data = this.object.data.data;
+    let update = [];
+    if (data.tags) {
+      update = duplicate(data.tags);
+    }
+    var regExp = /\(([^)]+)\)/;
+    if (update) {
+      values.forEach(val => {
+        // Catch infos in brackets
+        var matches = regExp.exec(val);
+        let title = "";
+        if (matches) {
+          title = matches[1];
+          val = val.substring(0, matches.index);
+        }
+        update.push({title: title, value: val});
+      })
+    } else {
+      update = values;
+    }
+    let newData = {
+      tags: update
+    };
+    return this.object.update({ data: newData });
+  }
+
+  _popTag(value) {
+    const data = this.object.data.data;
+    let update = data.tags.filter((el) => el.value != value);
+    let newData = {
+      tags: update
+    };
+    return this.object.update({ data: newData });
+  }
   /**
    * Activate event listeners using the prepared sheet HTML
    * @param html {HTML}   The prepared HTML object ready to be rendered into the DOM
    */
   activateListeners(html) {
+    html.find('input[data-action="add-tag"]').keypress((ev) => {
+      if (event.which == 13) {
+        let value = $(ev.currentTarget).val();
+        let values = value.split(',');
+        this._pushTag(values);
+      }
+    });
+    html.find('.tag-delete').click((ev) => {
+      let value = ev.currentTarget.parentElement.dataset.tag;
+      this._popTag(value);
+    });
     super.activateListeners(html);
   }
 }

src/scss/character.scss

@@ -41,9 +41,8 @@
       }
     }
     .resources {
-      margin: 20px;
       display: flex;
-      justify-content: space-around;
+      justify-content: space-evenly;
       flex-direction: column;
       .attribute {
         flex: 0 0 55px;
@@ -86,7 +85,7 @@
             .tox .tox-tbtn {
               height: 24px;
             }
-            height: 100px;
+            height: 110px;
           }
         }
         &.notes {

src/scss/item.scss

@@ -1,8 +1,31 @@
 .ose.sheet.item {
-  .profile-img {
+  .sheet-header {
-    border: none;
+    .profile-img {
-    flex: 0 0 84px;
+      border: none;
-    height: 84px;
+      flex: 0 0 84px;
+      height: 84px;
+    }
+    .tag-list {
+      margin: 0;
+      height: 20px;
+      overflow: auto;
+      list-style: none;
+      padding: 0;
+      display: flex;
+      .tag {
+        background: $colorFaint;
+        border-radius: 10px;
+        color: $colorDark;
+        padding: 2px 5px;
+        box-shadow: 0 0 1px $colorDark;
+        margin: 0 2px;
+        i {
+          font-size: 8px;
+          vertical-align: top;
+          color: $colorOlive;
+        }
+      }
+    }
   }
   .sheet-body {
     .stats {
@@ -29,8 +52,6 @@
       }
       &.narrow {
         .form-group {
-          label {
-          }
           input {
             height: 18px;
           }
@@ -40,8 +61,10 @@
     .editor {
       height: 240px;
     }
-    .weapon-editor .editor {
+    .weapon-editor {
-      height: 215px;
+      .editor {
+        height: 215px;
+      }
     }
   }
 }

src/template.json

@@ -171,6 +171,7 @@
       "description": "",
       "damage": "1d6",
       "bonus": 0,
+      "tags": [],
       "qualities": "",
       "slow": false,
       "missile": true,

src/templates/items/weapon-sheet.html

@@ -1,58 +1,121 @@
 <form class="{{cssClass}}" autocomplete="off">
   <header class="sheet-header">
-    <img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
+    <img
+      class="profile-img"
+      src="{{item.img}}"
+      data-edit="img"
+      title="{{item.name}}"
+    />
     <div class="header-col">
       <h1 class="charname">
-        <input name="name" type="text" value="{{item.name}}" placeholder="Name" />
+        <input
+          name="name"
+          type="text"
+          value="{{item.name}}"
+          placeholder="Name"
+        />
       </h1>
+      <ol class="tag-list">
+        {{#each data.tags as |tag|}}
+        <li class="tag" title="{{tag.title}}" data-tag="{{tag.value}}">
+            <span>{{tag.value}}</span>
+            <a class="tag-delete"><i class="fas fa-times"></i></a>
+        </li>
+        {{/each}}
+      </ol>
     </div>
   </header>
   <section class="sheet-body">
-    <div class="flexrow">
-      <input name="data.qualities" type="text" value="{{data.qualities}}" placeholder="Qualities" data-dtype="String"/>
-    </div>
     <div class="flexrow">
       <div class="stats">
+        <div class="form-group">
+          <div class="form-fields">
+            <input
+              type="text"
+              data-action="add-tag"
+              title="{{localize 'OSE.items.typeTag'}}"
+            />
+          </div>
+        </div>
         <div class="form-group block-input">
           <label>{{localize 'OSE.items.Damage'}}</label>
           <div class="form-fields">
-            <input type="text" name="data.damage" value="{{data.damage}}" data-dtype="String" />
+            <input
+              type="text"
+              name="data.damage"
+              value="{{data.damage}}"
+              data-dtype="String"
+            />
           </div>
         </div>
         <div class="form-group">
           <label>{{localize 'OSE.items.Bonus'}}</label>
           <div class="form-fields">
-            <input type="text" name="data.bonus" value="{{data.bonus}}" data-dtype="Number" />
+            <input
+              type="text"
+              name="data.bonus"
+              value="{{data.bonus}}"
+              data-dtype="Number"
+            />
           </div>
         </div>
         <div class="form-group">
           <label>{{localize 'OSE.items.Slow'}}</label>
           <div class="form-fields">
-            <input type="checkbox" name="data.slow" value="{{data.slow}}" {{checked data.slow}}  data-dtype="Number"/>
+            <input
+              type="checkbox"
+              name="data.slow"
+              value="{{data.slow}}"
+              {{checked
+              data.slow}}
+              data-dtype="Number"
+            />
           </div>
         </div>
         <div class="form-group">
           <label>{{localize 'OSE.items.Missile'}}</label>
           <div class="form-fields">
-            <input type="checkbox" name="data.missile" {{checked data.missile}}  data-dtype="Number"/>
+            <input
+              type="checkbox"
+              name="data.missile"
+              {{checked
+              data.missile}}
+              data-dtype="Number"
+            />
           </div>
         </div>
         <div class="form-group">
           <label>{{localize 'OSE.items.Melee'}}</label>
           <div class="form-fields">
-            <input type="checkbox" name="data.melee" {{checked data.melee}}  data-dtype="Boolean"/>
+            <input
+              type="checkbox"
+              name="data.melee"
+              {{checked
+              data.melee}}
+              data-dtype="Boolean"
+            />
           </div>
         </div>
         <div class="form-group">
           <label>{{localize 'OSE.items.Cost'}}</label>
           <div class="form-fields">
-            <input type="text" name="data.cost" value="{{data.cost}}" data-dtype="Number" />
+            <input
+              type="text"
+              name="data.cost"
+              value="{{data.cost}}"
+              data-dtype="Number"
+            />
           </div>
         </div>
         <div class="form-group">
           <label>{{localize 'OSE.items.Weight'}}</label>
           <div class="form-fields">
-            <input type="text" name="data.weight" value="{{data.weight}}" data-dtype="Number" />
+            <input
+              type="text"
+              name="data.weight"
+              value="{{data.weight}}"
+              data-dtype="Number"
+            />
           </div>
         </div>
       </div>
@@ -62,4 +125,4 @@
       </div>
     </div>
   </section>
-</form>
+</form>