added bonds tab and base logic

css/deltagreen.css

@@ -281,6 +281,8 @@ a.btn-tiny{
   border-radius: 4px;
   line-height: 25px;
   border: 1px solid #333333;
+  min-width: 20px;
+  text-align: center;
 }
 
 span.breaking-point-label{
@@ -362,4 +364,10 @@ div span.bio-grid-label{
   display: grid;
   grid-template-columns: 100px auto 20px 100px auto;
   align-items: center;
+} 
+
+.bonds-grid-3col{
+  display: grid;
+  grid-template-columns: auto 50px max-content;
+  align-items: center;
 } 

module/actor/actor-sheet.js

@@ -142,7 +142,6 @@ export class DeltaGreenActorSheet extends ActorSheet {
       event.preventDefault();
 
       let targetskill = event.target.getAttribute("data-typeskill");
-      //let updatedData = duplicate(this.actor.data.data);
 
       this._showNewTypeSkillDialog(targetskill);
     });
@@ -165,6 +164,19 @@ export class DeltaGreenActorSheet extends ActorSheet {
 
       this.actor.update({"data": updatedData});
     });
+
+    html.find('.btn-add-bond').click(event => {
+      event.preventDefault();
+      this._addNewBond();
+    });
+
+    html.find('.btn-remove-bond').click(event => {
+      event.preventDefault();
+      let skillindex = event.target.getAttribute("data-index");
+
+      this._removeBond(skillindex);
+    });
+    
   }
 
   _showNewTypeSkillDialog(targetskill){
@@ -204,6 +216,40 @@ export class DeltaGreenActorSheet extends ActorSheet {
     this.actor.update({"data": updatedData});
   }
 
+  _addNewBond(){
+    let updatedData = duplicate(this.actor.data.data);
+    let updatedBonds = [];
+    let x;
+
+    for(x in updatedData.bonds){
+      if(Number.isNumeric(x)){
+        updatedBonds.push(updatedData.bonds[x]);
+      }
+    }
+
+    updatedBonds.push({"description": "New", "score": updatedData.statistics.cha.value});
+
+    updatedData.bonds = updatedBonds;
+
+    this.actor.update({"data": updatedData});
+  }
+
+  _removeBond(pos){
+    let updatedData = duplicate(this.actor.data.data);
+    let updatedBonds = [];
+    let x;
+
+    for(x in updatedData.bonds){
+      if(Number.isNumeric(x) && x != pos){
+        updatedBonds.push(updatedData.bonds[x]);
+      }
+    }
+
+    updatedData.bonds = updatedBonds;
+
+    this.actor.update({"data": updatedData});
+  }
+
   /**
    * Handle creating a new Owned Item for the actor using initial data defined in the HTML dataset
    * @param {Event} event   The originating click event

template.json

@@ -341,6 +341,12 @@
                 "disorder":"",
                 "crossedOut": false
               }
+            ],
+            "bonds":[
+              {
+                "description":"",
+                "score": 10
+              }
             ]
         }
     },

templates/actor/actor-sheet.html

@@ -86,7 +86,8 @@
         <a class="item" data-tab="skills">Skills</a>
         <a class="item" data-tab="gear">Gear</a>
         <a class="item" data-tab="bio">Biography</a>
-        <a class="item" data-tab="bonds">Bonds</a>
+        <a class="item" data-tab="bonds">Bonds</a> 
+        <a class="item" data-tab="motivations">Motivations</a>
     </nav>
 
     {{!-- Sheet Body --}}
@@ -120,7 +121,7 @@
                       {{!-- Subtyped Skills take the form: data.type_skills.art.types[0].proficiency where 'types' is an array of object. --}}
                       <a class="btn-tiny btn-remove-typed-skill" title="Add another skill." data-typeskill="{{key}}" data-index="{{@index}}">-</a>
                       <span class="rollable" data-roll="d100" data-target="{{this.proficiency}}" data-label="{{this.specialization}}" title="Click to roll a skill check." name="data.type_skills.{{key}}.subskills.{{@index}}.specialization" >{{this.specialization}}</span>
-                      <input class="percentile-skill-input" type="text" name="data.type_skills.{{key}}.subskills.{{@index}}.proficiency" value="{{this.proficiency}}" data-dtype="Number"/>
+                      <input class="percentile-skill-input" type="number" name="data.type_skills.{{key}}.subskills.{{@index}}.proficiency" value="{{this.proficiency}}" data-dtype="Number"/>
                       <input type="checkbox" name="data.type_skills.{{key}}.subskills.{{@index}}.failure" {{checked this.failure}} data-dtype="Boolean" />
                       
                     </div>
@@ -182,9 +183,25 @@
             {{editor content=data.physicalDescription target="data.physicalDescription" button=true owner=owner editable=editable}}
         </div>
 
-        {{!-- bonds Tab --}}
+        {{!-- Bonds Tab --}}
         <div class="tab bonds" data-group="primary" data-tab="bonds">
-          <p>test</p>
+          
+            <a class="btn-tiny btn-add-bond" title="Add another bond." data-typeskill="{{key}}" data-index="{{@index}}">+</a>
+          
+          {{#each data.bonds as |bond index|}}
+            <div class="bonds-grid-3col">
+              
+              <input  type="text" name="data.bonds.{{@index}}.description" value="{{this.description}}" data-dtype="String" placeholder="Bond name and description" />
+              <input  type="text" name="data.bonds.{{@index}}.score" value="{{this.score}}" data-dtype="Number" title="The starting value of a bond is the agents CHA value."/>
+              <a class="btn-tiny btn-remove-bond" title="Add another bond." data-index="{{@index}}">-</a>
+            </div>
+          {{/each}}
+        </div>
+
+        {{!-- Motivations Tab --}}
+        <div class="tab motivations" data-group="primary" data-tab="motivations">
+          
+            <p>Under Construction</p>
         </div>
 
     </section>