Class sheet for arrays

2025-01-16 10:52:50 +01:00
parent 8c98553b98
commit b5cb6d671a
3 changed files with 272 additions and 259 deletions
@@ -1,6 +1,8 @@
 {
   "Mosh.Add": "Add",
   "Mosh.AddOr":"Add Or",
+   "Mosh.AddOption":"Add Option",
+   "Mosh.AddGroup":"Add Group",
   "Mosh.Advantage": "Advantage",
   "Mosh.Ammo": "Ammo",
   "Mosh.Ammunition": "Ammunition",
@@ -33,7 +35,9 @@
   "Mosh.CharacterGenerator.SkillOption.PopupTrainedDescription": "Choose 1 Trained skill",
   "Mosh.CharacterGenerator.SkillOption.PopupExpertDescription": "Choose 1 Expert skill",
   "Mosh.CharacterGenerator.SkillOption.PopupMasterDescription": "Choose 1 Master skill",
+   "Mosh.CharacterGenerator.SkillOption.PopupFullMasterName": "Master Set",
   "Mosh.CharacterGenerator.SkillOption.PopupFullMasterDescription": "Choose 1 Master skill, and an Expert and Trained Skill prerequisite.",
+   "Mosh.CharacterGenerator.SkillOption.PopupFullExpertName": "Expert Set",
   "Mosh.CharacterGenerator.SkillOption.PopupFullExperDescription": "Choose 1 Expert skill, and Trained Skill prerequisite.",
   "Mosh.CharacterGenerator.SkillOption.ChoiceWord": "Option",
   "Mosh.CharacterGenerator.SkillOption.ChoiceText":"Choose 1 from these skill bonus options",
@@ -43,6 +47,8 @@
   "Mosh.CharacterGenerator.Table.Trinket": "Trinket Table",
   "Mosh.CharacterGenerator.Error.NoClass": "You need to select a class first.",
   "Mosh.CLASS": "CLASS",
+   "Mosh.classNewStatOptionEmptyError":"You must select at least two stat or saves",
+   "Mosh.classNewSkillOptionSkillTip":"Save first.",
   "Mosh.Combat": "Combat",
   "Mosh.Condition": "Condition",
   "Mosh.Cost": "Cost",
@@ -64,6 +70,8 @@
   "Mosh.DeleteItem": "Delete Item",
   "Mosh.DeleteSkill": "Delete Skill",
   "Mosh.DeleteWeapon": "Delete Weapon",
+   "Mosh.DeleteGroup": "Delete Group",
+   "Mosh.DeleteOption": "Delete Option",
   "Mosh.Description": "Description",
   "Mosh.Disabled": "Disabled",
   "Mosh.Disadvantage": "Disadvantage",
@@ -142,7 +150,8 @@
   "Mosh.Skills": "Skills",
   "Mosh.SkillsFixed": "Fixed Skills",
   "Mosh.SkillsPrerequisite": "Prerequisite Skills",
-   "Mosh.SkillsOptional": "Optional Skills",
+   "Mosh.SkillsOptionalAnd": "Selected Skills",
+   "Mosh.SkillsOptionalOr": "Optional Skills",
   "Mosh.SkillTraining": "Skill Training",
   "Mosh.SpecialAbilities": "Special Abilities",
   "Mosh.Speed": "Speed",
@@ -29,28 +29,36 @@ export class MothershipClassSheet extends MothershipItemSheet {
    if (typeof data.system.base_adjustment.skills_granted == 'undefined'){
      data.system.base_adjustment.skills_granted=[];
    }
+
+    //Create placeholder for the skills object, to get the info of the skill
    data.system.base_adjustment.skills_granted_object = [];
    for (const skill of data.system.base_adjustment.skills_granted){ 
-      if(Array.isArray(skill)){
-        let option_skills = [];
-        for (const option of skill){
-          option_skills.push(await fromUuid(option));
-        }
-        data.system.base_adjustment.skills_granted_object.push(option_skills);
-      }else{
        data.system.base_adjustment.skills_granted_object.push(await fromUuid(skill));
-      }
    };

-    
+    console.log(data.system.selected_adjustment.choose_skill_or);
+    let choose_skill_or = data.system.selected_adjustment.choose_skill_or;
+    for (const [ig, group] of choose_skill_or.entries()){
+      for (const [io, option] of group.entries()){
+        let names = [];
+        data.system.selected_adjustment.choose_skill_or[ig][io].from_list_names = [];
+        for(const [is,  skill] of option.from_list.entries()){
+          names.push((await fromUuid(skill)).name);
+        }
+        data.system.selected_adjustment.choose_skill_or[ig][io].from_list_names = names;
+      }
+      console.log(data.system.selected_adjustment.choose_skill_or);
+    }
+
    data.system.common_skills_object = [];
    for (const skill of data.system.common_skills){ 
      data.system.common_skills_object.push(await fromUuid(skill));
    };

+    /*
    if (typeof data.system.selected_adjustment.choose_stat.stats == 'undefined'){
      data.system.selected_adjustment.choose_stat.stats=[];
-    }
+    }*/

    data.enriched=[];
    data.enriched.description = await TextEditor.enrichHTML(data.system.description, {async: true});
@@ -64,13 +72,11 @@ export class MothershipClassSheet extends MothershipItemSheet {
    if (droppedUuid.type != "Item"){
       return;
    }
-    console.log(event);
-    console.log(event.currentTarget);
-    console.log(event.target);
-    console.log(event.target.parentNode);
+
    const droppedObject = await fromUuid(droppedUuid.uuid);
    if (droppedObject.type == "skill"){
      //todo: add a check if the skill already exist in the list and dont add it, (by id or by name?)
+      console.log(event.currentTarget.id);
      if(event.currentTarget.id == "skills.fixed"){
        let parent_fixed_or = event.target.closest('div[id="skills.fixed.or"]');

@@ -94,6 +100,20 @@ export class MothershipClassSheet extends MothershipItemSheet {
        this.object.update({"system.common_skills":skills});
        return this.render(false);
      }
+      else if(event.currentTarget.id =="choose_skill_or_li"){
+        const li = $(ev.currentTarget);
+        let index = li.data("itemId");
+        const parent = $(ev.currentTarget).parents(".items-list");
+        let parent_index = parent.data("itemId");
+
+        let options = this.object.system.selected_adjustment.choose_skill_or;
+        
+        options[parent_index][index].from_list.push(droppedObject.uuid);
+
+        this.object.update({"system.selected_adjustment.choose_skill_or":options});
+        return this.render(false);
+
+      }
    }
  }

@@ -107,18 +127,7 @@ export class MothershipClassSheet extends MothershipItemSheet {
      const li = $(ev.currentTarget).parents(".item");
      
      let skills = this.object.system.base_adjustment.skills_granted.filter(function( obj ) {
-        
-      if(Array.isArray(obj)){
-        let found = false;
-        for (const option of obj){
-            if (option === li.data("itemId")){
-                found = true;
-            }
-        }
-          return !found;
-      }else{
          return obj !== li.data("itemId");
-      }
      });
      this.object.update({"system.base_adjustment.skills_granted":skills});
      return this.render(false);
@@ -135,24 +144,95 @@ export class MothershipClassSheet extends MothershipItemSheet {
      return this.render(false);
    });

-    html.find('.stat-delete').click(ev => {
+    html.find('.stat-option-delete').click(ev => {
      const li = $(ev.currentTarget).parents(".item");
      
-      let stats = this.object.system.selected_adjustment.choose_stat.stats.filter(function( obj ) {
-          return obj !== li.data("itemId");
-      });
-      this.object.update({"system.selected_adjustment.choose_stat.stats":stats});
+      let stats = this.object.system.selected_adjustment.choose_stat;
+      stats.splice(li.data("itemId"),1);
+
+      this.object.update({"system.selected_adjustment.choose_stat":stats});
      return this.render(false);
    });

-    html.find('.stat-create').click(this._onStatCreate.bind(this));
-    html.find('div[id="skill-create-or-option"]').click(ev => {
-        let skills = this.object.system.base_adjustment.skills_granted;
-        //add new empty or option
-        skills.push([]);
-        this.object.update({"system.base_adjustment.skills_granted":skills});
-        return this.render(false);
-      });
+
+    html.find('.stat-option-add').click(this._onStatCreate.bind(this));
+
+
+    html.find('.skills-group-add').click(ev => {
+      let skills = this.object.system.selected_adjustment.choose_skill_or;
+      let new_group = []
+      skills.push(new_group);
+      this.object.update({"system.selected_adjustment.choose_skill_or":skills});
+      return this.render(false);
+    });
+    html.find('.skills-group-delete').click(ev => {
+      const li = $(ev.currentTarget).parents(".items-list");
+    
+      let options = this.object.system.selected_adjustment.choose_skill_or;
+      options.splice(li.data("itemId"),1);
+
+      this.object.update({"system.selected_adjustment.choose_skill_or":options});
+      return this.render(false);
+    });
+
+    html.find('.skills-group-option-delete').click(ev => {
+      const li = $(ev.currentTarget).parents(".item");
+      const liparent = li.parents(".items-list");
+    
+      let options = this.object.system.selected_adjustment.choose_skill_or;
+      options[liparent.data("itemId")].splice(li.data("itemId"),1);
+
+      this.object.update({"system.selected_adjustment.choose_skill_or":options});
+      return this.render(false);
+    });
+
+    html.find('.skills-group-option-createnew').click(ev => {
+      const li = $(ev.currentTarget).parents(".item");
+    
+      let new_data = {
+        "name":li.find('input[name="choose_skill_or_name"]').prop("value"),
+        "trained": li.find('input[name="choose_skill_or_trained"]').prop("value"),
+        "expert": li.find('input[name="choose_skill_or_expert"]').prop("value"),
+        "expert_full_set": li.find('input[name="choose_skill_or_expert_full_set"]').prop("value"),
+        "master": li.find('input[name="choose_skill_or_master"]').prop("value"),
+        "master_full_set": li.find('input[name="choose_skill_or_master_full_set"]').prop("value"),
+        "from_list": [],
+    }
+      if(new_data.name ==""){
+        new_data.name = `Option: ${(this.object.system.selected_adjustment.choose_skill_or[li.data("itemId")].length)+1}`
+      }
+      if(new_data.trained ==""){
+        new_data.trained = 0;
+      }
+      if(new_data.expert ==""){
+        new_data.expert = 0;
+      }
+      if(new_data.expert_full_set ==""){
+        new_data.expert_full_set = 0;
+      }
+      if(new_data.master ==""){
+        new_data.master = 0;
+      }
+      if(new_data.master_full_set ==""){
+        new_data.master_full_set = 0;
+      }
+      //console.log(new_data);
+      let options = this.object.system.selected_adjustment.choose_skill_or;
+      options[li.data("itemId")].push(new_data);
+
+      //save data
+      this.object.update({"system.selected_adjustment.choose_skill_or":options});
+
+      //clear form and hide it
+      li.find('input[name="choose_skill_or_name"]').prop("value","");
+      li.find('input[name="choose_skill_or_trained"]').prop("value","");
+      li.find('input[name="choose_skill_or_expert"]').prop("value","");
+      li.find('input[name="choose_skill_or_expert_full_set"]').prop("value","");
+      li.find('input[name="choose_skill_or_master"]').prop("value","");
+      li.find('input[name="choose_skill_or_master_full_set"]').prop("value","");
+
+      return this.render(false);
+    });

  }

@@ -164,47 +244,59 @@ export class MothershipClassSheet extends MothershipItemSheet {
   */
    _onStatCreate(event) {
      event.preventDefault();
-      let stats = this.object.system.selected_adjustment.choose_stat.stats;
+      let choose_stat = this.object.system.selected_adjustment.choose_stat;

-      let DialogContent = `<h2>Stat</h2>\
-                  <select style='margin-bottom:10px;'name='system.selected_adjustment.choose_stat.stats' id='system.selected_adjustment.choose_stat.stats'>`
-      
-      if ( ! stats.includes("strength")){
-        DialogContent+=`<option value='strength'>${game.i18n.localize("Mosh.Strength")}</option>`
-      }
-      if ( ! stats.includes("speed")){
-        DialogContent+=`<option value='speed'>${game.i18n.localize("Mosh.Speed")}</option>`
-      }
-      if ( ! stats.includes("intellect")){
-        DialogContent+=`<option value='intellect'>${game.i18n.localize("Mosh.Intellect")}</option>`
-      }
-      if ( ! stats.includes("combat")){
-        DialogContent+=`<option value='combat'>${game.i18n.localize("Mosh.Combat")}</option>`
-      }
-      if ( ! stats.includes("sanity")){
-        DialogContent+=`<option value='sanity'>${game.i18n.localize("Mosh.Sanity")}</option>`
-      }
-      if ( ! stats.includes("fear")){
-        DialogContent+=`<option value='fear'>${game.i18n.localize("Mosh.Fear")}</option>`
-      }
-      if ( ! stats.includes("body")){
-        DialogContent+=`<option value='body'>${game.i18n.localize("Mosh.Body")}</option>`
-      }        
-      DialogContent+=`</select> <br/>`
+      let DialogContent = `<h2>${game.i18n.localize("Mosh.CharacterGenerator.StatOption")}</h2>\
+      <div> <input type="number" id='modification' placeholder="${game.i18n.localize("Mosh.Value")}" /></label></div>\
+                 <div> <input type="checkbox" id='strength' />${game.i18n.localize("Mosh.Strength")}</label></div>\
+      <div> <input type="checkbox" id='speed' />${game.i18n.localize("Mosh.Speed")}</label></div>\
+     <div> <input type="checkbox" id='intellect' />${game.i18n.localize("Mosh.Intellect")}</label></div>\
+     <div> <input type="checkbox" id='combat' />${game.i18n.localize("Mosh.Combat")}</label></div>\
+      <div> <input type="checkbox" id='sanity' />${game.i18n.localize("Mosh.Sanity")}</label></div>\
+      <div> <input type="checkbox" id='fear' />${game.i18n.localize("Mosh.Fear")}</label></div>\
+     <div> <input type="checkbox" id='body' />${game.i18n.localize("Mosh.Body")}</label></div>`

      let d = new Dialog({
        title: "Select Stat",
        content: DialogContent,
        buttons: {
-          roll: {
+          create: {
            icon: '<i class="fas fa-check"></i>',
            label: "Create",
            callback: (html) => {
-  
-            let statname = html.find('[id=\"system.selected_adjustment.choose_stat.stats\"]')[0].value
+              
+            let new_stat_option = {
+              modification: html.find('[id=\"modification\"]').prop("value"),
+              stats: [],
+            }
+            if (html.find('[id=\"strength\"]')[0].checked){
+              new_stat_option.stats.push("strength");
+            }
+            if (html.find('[id=\"speed\"]')[0].checked){
+              new_stat_option.stats.push("speed");
+            }
+            if (html.find('[id=\"intellect\"]')[0].checked){
+              new_stat_option.stats.push("intellect");
+            }
+            if (html.find('[id=\"combat\"]')[0].checked){
+              new_stat_option.stats.push("combat");
+            }
+            if (html.find('[id=\"sanity\"]')[0].checked){
+              new_stat_option.stats.push("sanity");
+            }
+            if (html.find('[id=\"fear\"]')[0].checked){
+              new_stat_option.stats.push("fear");
+            }
+            if (html.find('[id=\"body\"]')[0].checked){
+              new_stat_option.stats.push("body");
+            }
+            if(new_stat_option.stats.length < 2){
+              ui.notifications.error(game.i18n.localize("Mosh.classNewStatOptionEmptyError"));
+              return;
+            }

-            stats.push(statname);
-            this.object.update({"system.selected_adjustment.choose_stat.stats":stats});
+            choose_stat.push(new_stat_option);
+            this.object.update({"system.selected_adjustment.choose_stat":choose_stat});

            }
          },
@@ -214,7 +306,7 @@ export class MothershipClassSheet extends MothershipItemSheet {
            callback: () => { }
          }
        },
-        default: "roll",
+        default: "create",
        close: () => { }
      });
      d.render(true);
@@ -159,7 +159,8 @@
    <a class="tab-select" data-tab="description">{{ localize 'Mosh.Description' }}</a>
    <a class="tab-select" data-tab="stats&saves">{{ localize 'Mosh.CharacterGenerator.StatOption' }}</a>
    <a class="tab-select" data-tab="skills.fixed">{{ localize 'Mosh.SkillsFixed' }}</a>
-    <a class="tab-select" data-tab="skills.optional">{{ localize 'Mosh.SkillsOptional' }}</a>
+    <a class="tab-select" data-tab="skills.selected.and">{{ localize 'Mosh.SkillsOptionalAnd' }}</a>
+    <a class="tab-select" data-tab="skills.selected.or">{{ localize 'Mosh.SkillsOptionalOr' }}</a>
    <a class="tab-select" data-tab="tables">{{ localize 'Mosh.CharacterGenerator.Tables' }}</a>
    <a class="tab-select" data-tab="skills.common">{{ localize 'Mosh.CharacterGenerator.CommonSkills' }}</a>
  </nav>
@@ -173,35 +174,28 @@
    </div>
    {{!-- stats&saves Tab --}}
    <div class="tab" data-group="primary" data-tab="stats&saves">
-      <div class="resource mainstat">
-        <div class="mainstatlabel">
-          <span class=" mainstattext" data-key="stat.modification" data-label="{{ localize 'Mosh.Value' }}">{{ localize
-            'Mosh.Value' }}</span>
+      
+      <ol class="items-list" style="margin-bottom : 10px;">
+        <li class="item flexrow item-header">
+          <div class="skill-stat">{{ localize 'Mosh.Value' }}</div>
+          <div class="skill-stat">{{ localize 'Mosh.StatsAndSaves' }}</div>
+          <div class="item-controls" id="skill-create-or-option" >
+            <a class="item-control stat-option-add" title="{{ localize 'Mosh.AddOption' }}" data-type="skill"><i
+                class="fas fa-plus"></i> {{ localize 'Mosh.AddOption' }}</a>
+          </div>
+        </li>
+      {{#each system.selected_adjustment.choose_stat as |group id|}}
+      <li class="item flexrow" data-item-id="{{@index}}">
+        <div class="skill-name skill-roll list-roll">{{group.modification}}</div>
+        <div class="skill-stat">{{#each group.stats as |stat id|}}{{stat}}{{#if @last}}{{else}}, {{/if}}{{/each}}
        </div>
-        <input id="system.selected_adjustment.choose_stat.modification" class="circle-input" type="text"
-          name="system.selected_adjustment.choose_stat.modification"
-          value="{{system.selected_adjustment.choose_stat.modification}}" data-dtype="Number" />
-      </div>
-      <div>
-        <ol class="items-list" style="margin-bottom : 10px;">
-          <li class="item flexrow item-header">
-            <div class="stat-stat">{{ localize 'Mosh.Name' }}</div>
-            <div class="item-controls">
-              <a class="item-control stat-create" title="{{ localize 'Mosh.CreateSkill' }}" data-type="stat"><i
-                  class="fas fa-plus"></i> {{ localize 'Mosh.Add' }}</a>
-            </div>
-          </li>
-          {{#each system.selected_adjustment.choose_stat.stats as |stat id|}}
-          <li class="item flexrow dropitem" data-item-id="{{stat}}">
-            <div class="stat-name">{{stat}}</div>
-            <div class="item-controls">
-              <a class="item-control stat-delete" title="{{ localize 'Mosh.DeleteSkill' }}"><i
-                  class="fas fa-trash"></i></a>
-            </div>
-          </li>
-          {{/each}}
-        </ol>
-      </div>
+          <div class="item-controls">
+            <a class="item-control stat-option-delete" title="{{ localize 'Mosh.DeleteGroup' }}"><i
+                class="fas fa-trash"></i></a>
+          </div>
+        </li>
+      {{/each}}
+      </ol> 
    </div>
    {{!-- skills Tab --}}
    <div class="tab dropitem items" id="skills.fixed" data-group="primary" data-tab="skills.fixed">
@@ -213,13 +207,12 @@
          <div class="skill-stat">{{ localize 'Mosh.SkillRank' }}</div>
          <div class="skill-stat">{{ localize 'Mosh.SkillBonus' }}</div>
          <div class="item-controls" id="skill-create-or-option" >
-            <a class="item-control" title="{{ localize 'Mosh.CreateSkill' }}" data-type="skill"><i
-                class="fas fa-plus"></i> {{ localize 'Mosh.AddOr' }}</a>
+            <!--a class="item-control" title="{{ localize 'Mosh.CreateSkill' }}" data-type="skill"><i
+                class="fas fa-plus"></i> {{ localize 'Mosh.AddOr' }}</a-->
          </div>
        </li>
        
        {{#each system.base_adjustment.skills_granted_object as |skill id|}}
-          {{#if skill.name}}
            <li class="item flexrow" data-item-id="{{skill.uuid}}">
              <div class="item-image"><img src="{{skill.img}}" title="{{skill.name}}" width="24" height="24" /></div>
              <div class="skill-name skill-roll list-roll">{{skill.name}}</div>
@@ -230,48 +223,16 @@
                    class="fas fa-trash"></i></a>
              </div>
            </li>
-          {{else}}
-          <li class="{{#if skill.[1]}}{{else}}item flexrow{{/if}}">
-            <div id = "skills.fixed.or" index="{{@index}}" >
-              <div class="resource-label" style="float: left;">OR</div>
-              <ol style="border-left: 1px solid #111;">
-              {{#each skill as |subskill subid|}}
-                  <li class="item flexrow" data-item-id="{{subskill.uuid}}">
-                    <div class="item-image"><img src="{{subskill.img}}" title="{{subskill.name}}" width="24" height="24" /></div>
-                    <div class="skill-name skill-roll list-roll">{{subskill.name}}</div>
-                    <div class="skill-stat">{{subskill.system.rank}}</div>
-                    <div class="skill-stat">{{subskill.system.bonus}}</div>
-                    <div class="item-controls">
-                      <a class="item-control skills-granted-delete" title="{{ localize 'Mosh.DeleteSkill' }}"><i
-                          class="fas fa-trash"></i></a>
-                    </div>
-                  </li>
-              {{/each}}
-              </ol>
-            </div>
-            {{#if skill.[1]}}{{else}}
-            <div class="item-controls">
-              <a class="item-control skills-granted-delete" title="{{ localize 'Mosh.DeleteSkill' }}"><i
-                  class="fas fa-trash"></i></a>
-            </div>
-            {{/if}}
-          </li>
-          {{/if}}
        {{/each}}
      </ol>
    </div>

-    <div class="tab grid" data-group="primary" data-tab="skills.optional">
+    {{!-- skills Tab --}}
+    <div class="tab grid"  id="skills.selected.and" data-group="primary" data-tab="skills.selected.and">
      <div class="grid grid-3col widegap">
-        <div>
          <div>
            <label for="system.selected_adjustment.choose_skill_and.trained"
-              class="resource-label minmaxtext">Skill options AND</label><br/>
-
-          </div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_and.trained"
-              class="resource-label minmaxtext">Trained</label>
+              class="resource-label minmaxtext">{{ localize 'Mosh.SkillRankTrained' }}</label>

            <div class="textvaluewrapper" style="background: white;">
              <input class="textvaluewrapper-input darkGreyText" type="text"
@@ -281,7 +242,7 @@
          </div>
          <div>
            <label for="system.selected_adjustment.choose_skill_and.expert"
-              class="resource-label minmaxtext">expert</label>
+              class="resource-label minmaxtext">{{ localize 'Mosh.SkillRankExpert' }}</label>

            <div class="textvaluewrapper" style="background: white;">
              <input class="textvaluewrapper-input darkGreyText" type="text"
@@ -291,7 +252,7 @@
          </div>
          <div>
            <label for="system.selected_adjustment.choose_skill_and.master"
-              class="resource-label minmaxtext">master</label>
+              class="resource-label minmaxtext">{{ localize 'Mosh.SkillRankMaster' }}</label>

            <div class="textvaluewrapper" style="background: white;">
              <input class="textvaluewrapper-input darkGreyText" type="text"
@@ -300,8 +261,8 @@
            </div>
          </div>
          <div>
-            <label for="system.selected_adjustment.choose_skill_and.master"
-              class="resource-label minmaxtext">expert_full_set</label>
+            <label for="system.selected_adjustment.choose_skill_and.expert_full_set"
+              class="resource-label minmaxtext">{{ localize 'Mosh.CharacterGenerator.SkillOption.PopupFullExpertName' }}</label>

            <div class="textvaluewrapper" style="background: white;">
              <input class="textvaluewrapper-input darkGreyText" type="text"
@@ -311,7 +272,7 @@
          </div>
          <div>
            <label for="system.selected_adjustment.choose_skill_and.master_full_set"
-              class="resource-label minmaxtext">master_full_set</label>
+              class="resource-label minmaxtext">{{ localize 'Mosh.CharacterGenerator.SkillOption.PopupFullMasterName' }}</label>

            <div class="textvaluewrapper" style="background: white;">
              <input class="textvaluewrapper-input darkGreyText" type="text"
@@ -320,123 +281,65 @@
            </div>
          </div>
        </div>
-        <div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_and.trained"
-              class="resource-label minmaxtext">Skill options OR 1</label><br/>
-
-          </div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_or.option_1.trained"
-              class="resource-label minmaxtext">Trained</label>
-
-            <div class="textvaluewrapper" style="background: white;">
-              <input class="textvaluewrapper-input darkGreyText" type="text"
-                name="system.selected_adjustment.choose_skill_or.option_1.trained"
-                value="{{system.selected_adjustment.choose_skill_or.option_1.trained}}" data-dtype="Number" />
-            </div>
-          </div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_or.option_1.expert"
-              class="resource-label minmaxtext">expert</label>
-
-            <div class="textvaluewrapper" style="background: white;">
-              <input class="textvaluewrapper-input darkGreyText" type="text"
-                name="system.selected_adjustment.choose_skill_or.option_1.expert"
-                value="{{system.selected_adjustment.choose_skill_or.option_1.expert}}" data-dtype="Number" />
-            </div>
-          </div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_or.option_1.master"
-              class="resource-label minmaxtext">master</label>
-
-            <div class="textvaluewrapper" style="background: white;">
-              <input class="textvaluewrapper-input darkGreyText" type="text"
-                name="system.selected_adjustment.choose_skill_or.option_1.master"
-                value="{{system.selected_adjustment.choose_skill_or.option_1.master}}" data-dtype="Number" />
-            </div>
-          </div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_or.option_1.master"
-              class="resource-label minmaxtext">expert_full_set</label>
-
-            <div class="textvaluewrapper" style="background: white;">
-              <input class="textvaluewrapper-input darkGreyText" type="text"
-                name="system.selected_adjustment.choose_skill_or.option_1.expert_full_set"
-                value="{{system.selected_adjustment.choose_skill_or.option_1.expert_full_set}}" data-dtype="Number" />
-            </div>
-          </div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_or.option_1.master_full_set"
-              class="resource-label minmaxtext">master_full_set</label>
-
-            <div class="textvaluewrapper" style="background: white;">
-              <input class="textvaluewrapper-input darkGreyText" type="text"
-                name="system.selected_adjustment.choose_skill_or.option_1.master_full_set"
-                value="{{system.selected_adjustment.choose_skill_or.option_1.master_full_set}}" data-dtype="Number" />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_and.trained"
-              class="resource-label minmaxtext">Skill options OR 2</label><br/>
-
-          </div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_or.option_2.trained"
-              class="resource-label minmaxtext">Trained</label>
-
-            <div class="textvaluewrapper" style="background: white;">
-              <input class="textvaluewrapper-input darkGreyText" type="text"
-                name="system.selected_adjustment.choose_skill_or.option_2.trained"
-                value="{{system.selected_adjustment.choose_skill_or.option_2.trained}}" data-dtype="Number" />
-            </div>
-          </div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_or.option_2.expert"
-              class="resource-label minmaxtext">expert</label>
-
-            <div class="textvaluewrapper" style="background: white;">
-              <input class="textvaluewrapper-input darkGreyText" type="text"
-                name="system.selected_adjustment.choose_skill_or.option_2.expert"
-                value="{{system.selected_adjustment.choose_skill_or.option_2.expert}}" data-dtype="Number" />
-            </div>
-          </div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_or.option_2.master"
-              class="resource-label minmaxtext">master</label>
-
-            <div class="textvaluewrapper" style="background: white;">
-              <input class="textvaluewrapper-input darkGreyText" type="text"
-                name="system.selected_adjustment.choose_skill_or.option_2.master"
-                value="{{system.selected_adjustment.choose_skill_or.option_2.master}}" data-dtype="Number" />
-            </div>
-          </div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_or.option_2.master"
-              class="resource-label minmaxtext">expert_full_set</label>
-
-            <div class="textvaluewrapper" style="background: white;">
-              <input class="textvaluewrapper-input darkGreyText" type="text"
-                name="system.selected_adjustment.choose_skill_or.option_2.expert_full_set"
-                value="{{system.selected_adjustment.choose_skill_or.option_2.expert_full_set}}" data-dtype="Number" />
-            </div>
-          </div>
-          <div>
-            <label for="system.selected_adjustment.choose_skill_or.option_2.master_full_set"
-              class="resource-label minmaxtext">master_full_set</label>
-
-            <div class="textvaluewrapper" style="background: white;">
-              <input class="textvaluewrapper-input darkGreyText" type="text"
-                name="system.selected_adjustment.choose_skill_or.option_2.master_full_set"
-                value="{{system.selected_adjustment.choose_skill_or.option_2.master_full_set}}" data-dtype="Number" />
-            </div>
-          </div>
-
-        </div>
+    </div>
+        
+    {{!-- skills Tab --}}
+    <div class="tab grid"  id="skills.selected.or" data-group="primary" data-tab="skills.selected.or">
+      <div class="skill-name">
+        <a class="item-control skills-group-add" title="{{ localize 'Mosh.AddGroup' }}" data-type="skill"><i
+            class="fas fa-plus"></i> {{ localize 'Mosh.AddGroup' }}</a>
      </div>
+      {{#each system.selected_adjustment.choose_skill_or as |group id|}}

+        <ol class="items-list" style="margin-bottom : 10px;" data-item-id="{{@index}}">
+          <li class="item flexrow item-header">
+            <div>
+              <!--a class="item-control skills-group-option-add" title="{{ localize 'Mosh.AddOption' }}" data-type="skill"><i
+                  class="fas fa-plus"></i> {{ localize 'Mosh.AddOption' }}</a--></div>
+            <div class="skill-stat">{{ localize 'Mosh.SkillRankTrained' }}</div>
+            <div class="skill-stat">{{ localize 'Mosh.SkillRankExpert' }}</div>
+            <div class="skill-stat">{{ localize 'Mosh.SkillRankMaster' }}</div>
+            <div class="skill-stat">{{ localize 'Mosh.CharacterGenerator.SkillOption.PopupFullExpertName' }}</div>
+            <div class="skill-stat">{{ localize 'Mosh.CharacterGenerator.SkillOption.PopupFullMasterName' }}</div>
+            <div class="skill-stat">{{ localize 'Mosh.Skills' }}</div>
+            <div class="item-controls" id="skill-create-or-option" >
+              <a class="item-control skills-group-delete" title="{{ localize 'Mosh.DeleteGroup' }}" data-type="skill"><i
+                  class="fas fa-trash"></i></a>
+            </div>
+          </li>
+          {{#each group}}
+            <li id="choose_skill_or_li" class="item flexrow dropitem" data-item-id="{{@index}}">
+              <div class="skill-name">{{this.name}}</div>
+              <!-- IDEA TO HAVE A EDITABLE TABLE, but this is not working, the value is empty and when edited it gets saved in a object instead of array destroying the previous structure.-->
+              <!--div class="skill-stat"><input id="system.selected_adjustment.choose_skill_or.{{@../index}}.{{@index}}.trained" type="text"
+                name="system.selected_adjustment.choose_skill_or.{{@../index}}.{{@index}}.trained" value='{{lookup (lookup (lookup system.selected_adjustment.choose_skill_or @../index) @index) "trained"}}' data-dtype="Number" /></div-->
+              <div class="skill-stat">{{this.trained}}</div>
+              <div class="skill-stat">{{this.expert}}</div>
+              <div class="skill-stat">{{this.master}}</div>
+              <div class="skill-stat">{{this.expert_full_set}}</div>
+              <div class="skill-stat">{{this.master_full_set}}</div>
+              <div class="skill-stat">{{this.from_list.length}} <a title="{{#each this.from_list_names as |skill id|}}{{skill}}{{#if @last}}{{else}}&#013;&#010;{{/if}}{{/each}}"><i class="fas fa-info"></i></a></div>
+              <div class="item-controls">
+                <a class="item-control skills-group-option-delete" title="{{ localize 'Mosh.DeleteOption' }}"><i
+                    class="fas fa-trash"></i></a>
+              </div>
+            </li>
+          {{/each}}
+            <li hidden id="choose_skill_or_form" class="item flexrow" data-item-id="{{@index}}">
+              <div class="skill-name"><input name="choose_skill_or_name" value="" data-dtype="text" oninput="handleInputChange(event)" /> </div>
+              <div class="skill-stat"><input type="text" name="choose_skill_or_trained" value="" data-dtype="Number" oninput="handleInputChange(event)" /> </div>
+              <div class="skill-stat"><input type="text" name="choose_skill_or_expert" value="" data-dtype="Number" oninput="handleInputChange(event)" /> </div>
+              <div class="skill-stat"><input type="text" name="choose_skill_or_master" value="" data-dtype="Number" oninput="handleInputChange(event)" /> </div>
+              <div class="skill-stat"><input type="text" name="choose_skill_or_expert_full_set" value="" data-dtype="Number" oninput="handleInputChange(event)" /> </div>
+              <div class="skill-stat"><input type="text" name="choose_skill_or_master_full_set" value="" data-dtype="Number" oninput="handleInputChange(event)" /> </div>
+              <div class="skill-stat">{{ localize 'Mosh.classNewSkillOptionSkillTip'}}</div>
+              <div class="item-controls">
+                <a class="item-control skills-group-option-createnew" title="SAVE"><i
+                    class="fas fa-save"></i></a>
+              </div>
+            </li>
+          </ol> 
+        {{/each}}
    </div>

    <!-- Tables -->
@@ -508,4 +411,13 @@
      </ol>
    </div>
  </section>
-</form>
+</form>
+<script>
+  function handleInputChange(event) {
+  event.preventDefault(); // Prevent the form from submitting
+  const input = event.target;
+  const value = input.value;
+  // Handle the input change as needed
+  console.log('Input changed:', value);
+}
+</script>