ENH: Weapon sheet

src/lang/en.json

@@ -196,13 +196,16 @@
   "OSE.items.ArmorAC": "AC",
   "OSE.items.ArmorAAC": "AAC",
   "OSE.items.Bonus": "Bonus",
+  "OSE.items.AtkBonus": "Attack Bonus",
   "OSE.items.roundAttacks": "Attacks Spent this Round",
   "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.items.typeTag": "Type a comma separated list of tag e.g 'Melee,Missile (5’–10’ / 11’–20’ / 21’–30’)' and press ENTER",
+  "OSE.items.enterTag": "Tags",
   "OSE.items.pattern": "Attack pattern marker",
 
+  "OSE.items.Range": "Range",
   "OSE.items.Melee": "Melee",
   "OSE.items.Missile": "Missile",
   "OSE.items.Slow": "Slow",

src/module/item/item-sheet.js

@@ -67,6 +67,14 @@ export class OseItemSheet extends ItemSheet {
       let value = ev.currentTarget.parentElement.dataset.tag;
       this.object.popTag(value);
     });
+    html.find('a.melee-toggle').click(() => {
+      this.object.update({data: {melee: !this.object.data.data.melee}});
+    });
+
+    html.find('a.missile-toggle').click(() => {
+      this.object.update({data: {missile: !this.object.data.data.missile}});
+    });
+
     super.activateListeners(html);
   }
 }

src/scss/item.scss

@@ -5,6 +5,12 @@
         margin: 6px 2%;
       }
     }
+    .details {
+      flex: 0 0 70px;
+      label {
+        flex: 0 0 20px;
+      }
+    }
     .profile-img {
       border: none;
       flex: 0 0 84px;
@@ -51,6 +57,26 @@
           border-bottom: none;
           margin: auto 0;
         }
+        .form-fields {
+          &.range { 
+            .sep {
+              flex: 0 0 1px;
+              background: $colorTan;
+              margin: 4px 0;
+            }
+          }
+        }
+        &.attack-type {
+          text-align: center;
+          padding: 2px;
+          font-size: 15px;
+          a {
+            color: $colorInactive;
+            &.active,:hover {
+              color: $colorDark;
+            }
+          }
+        }
       }
       .block-input {
         display: flex;

src/scss/variables.scss

@@ -6,6 +6,7 @@
 $darkBackground: url('/systems/ose/assets/back.png');
 $colorDark: rgba(0, 0, 0, 0.9);
 $colorFaint: #d8d6c9;
+$colorInactive: #969696;
 $colorBeige: #b5b3a4;
 $colorTan: #7a7971;
 $colorOlive: #4b4a44;

src/template.json

@@ -168,6 +168,12 @@
       "weight": 80
     },
     "weapon": {
+      "range": {
+        "short": 0,
+        "medium": 0,
+        "long": 0
+      },
+      "save": "",
       "pattern": "white",
       "description": "",
       "damage": "1d6",

src/templates/items/weapon-sheet.html

@@ -5,21 +5,49 @@
       src="{{item.img}}"
       data-edit="img"
       title="{{item.name}}"
-    />
+      />
     <div class="header-col">
-      <h1 class="charname">
+      <div class="flexrow">
-        <input
+        <h1 class="charname">
-          name="name"
+          <input
-          type="text"
+            name="name"
-          value="{{item.name}}"
+            type="text"
-          placeholder="Name"
+            value="{{item.name}}"
-        />
+            placeholder="Name"
-      </h1>
+            />
+        </h1>
+        <div class="details">
+          <div class="form-group">
+            <label title="{{localize 'OSE.items.Cost'}}"><i class="fas
+                fa-circle"></i></label>
+            <div class="form-fields">
+              <input
+                type="text"
+                name="data.cost"
+                value="{{data.cost}}"
+                data-dtype="Number"
+                />
+            </div>
+          </div>
+          <div class="form-group">
+            <label title="{{localize 'OSE.items.Weight'}}"><i class="fas
+                fa-weight-hanging"></i></label>
+            <div class="form-fields">
+              <input
+                type="text"
+                name="data.weight"
+                value="{{data.weight}}"
+                data-dtype="Number"
+                />
+            </div>
+          </div>
+        </div>
+      </div>
       <ol class="tag-list">
         {{#each data.tags as |tag|}}
         <li class="tag" title="{{tag.title}}" data-tag="{{tag.value}}">
-            <span>{{tag.value}}</span>
+          <span>{{tag.value}}</span>
-            <a class="tag-delete"><i class="fas fa-times"></i></a>
+          <a class="tag-delete"><i class="fas fa-times"></i></a>
         </li>
         {{/each}}
       </ol>
@@ -34,7 +62,8 @@
               type="text"
               data-action="add-tag"
               title="{{localize 'OSE.items.typeTag'}}"
-            />
+              placeholder="{{localize 'OSE.items.enterTag'}}"
+              />
           </div>
         </div>
         <div class="form-group block-input">
@@ -45,18 +74,65 @@
               name="data.damage"
               value="{{data.damage}}"
               data-dtype="String"
-            />
+              />
           </div>
         </div>
         <div class="form-group">
-          <label>{{localize 'OSE.items.Bonus'}}</label>
+          <label title="{{localize 'OSE.items.AtkBonus'}}">{{localize
+            'OSE.items.Bonus'}}</label>
           <div class="form-fields">
             <input
               type="text"
               name="data.bonus"
               value="{{data.bonus}}"
               data-dtype="Number"
-            />
+              />
+          </div>
+        </div>
+        <div class="form-group attack-type">
+          <a title="{{localize 'OSE.items.Melee'}}" class="melee-toggle {{#if
+            data.melee}}active{{/if}}"><i class="fas fa-fist-raised"></i></a>
+          <a title="{{localize 'OSE.items.Missile'}}" class="missile-toggle
+            {{#if data.missile}}active{{/if}}"><i class="fas fa-bullseye"></i></a>
+        </div>
+        {{#if data.missile}}
+        <div class="form-group block-input">
+          <label>{{localize 'OSE.items.Range'}}</label>
+          <div class="form-fields range">
+            <input
+              type="text"
+              name="data.range.close"
+              value="{{data.range.close}}"
+              data-dtype="Number"
+              />
+              <div class="sep"></div>
+              <input
+              type="text"
+              name="data.range.medium"
+              value="{{data.range.medium}}"
+              data-dtype="Number"
+              />
+              <div class="sep"></div>
+              <input
+              type="text"
+              name="data.range.long"
+              value="{{data.range.long}}"
+              data-dtype="Number"
+              />
+          </div>
+        </div>
+        {{/if}}
+        <div class="form-group">
+          <label>{{localize 'OSE.spells.Save'}}</label>
+          <div class="form-fields">
+            <select name="data.save">
+              {{#select data.save}}
+              <option value=""></option>
+              {{#each config.saves_short as |save a|}}
+              <option value="{{a}}">{{save}}</option>
+              {{/each}}
+              {{/select}}
+            </select>
           </div>
         </div>
         <div class="form-group">
@@ -69,53 +145,7 @@
               {{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"
-            />
-          </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"
-            />
-          </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"
-            />
-          </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"
-            />
           </div>
         </div>
       </div>