Fixed trait counting in CharacterCreation. Fixed description layout and labels in CharacterCreation. Fixed drag/drop images from Compendium Browser

lang/en.json

@@ -2332,6 +2332,7 @@
             "next": "Next",
             "none": "None",
             "noTarget": "No current target",
+            "optionalThing": "Optional {thing}",
             "partner": "Partner",
             "player": {
                 "single": "Player",

module/applications/characterCreation/characterCreation.mjs

@@ -11,7 +11,10 @@ export default class DhCharacterCreation extends HandlebarsApplicationMixin(Appl
         this.character = character;
 
         this.setup = {
-            traits: this.character.system.traits,
+            traits: Object.keys(this.character.system.traits).reduce((acc, key) => {
+                acc[key] = { value: null };
+                return acc;
+            }, {}),
             ancestryName: {
                 primary: '',
                 secondary: ''
@@ -377,8 +380,10 @@ export default class DhCharacterCreation extends HandlebarsApplicationMixin(Appl
         ];
         return Object.values(this.setup.traits).reduce((acc, x) => {
             const index = traitCompareArray.indexOf(x.value);
+            if (index === -1) return acc;
+
             traitCompareArray.splice(index, 1);
-            acc += index !== -1;
+            acc += 1;
             return acc;
         }, 0);
     }

module/applications/ui/itemBrowser.mjs

@@ -583,7 +583,9 @@ export class ItemBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
         const { itemUuid } = event.target.closest('[data-item-uuid]').dataset,
             item = await foundry.utils.fromUuid(itemUuid),
             dragData = item.toDragData();
+
         event.dataTransfer.setData('text/plain', JSON.stringify(dragData));
+        event.dataTransfer.setDragImage(event.target.querySelector('img'), 0, 0);
     }
 
     _canDragStart() {

styles/less/dialog/character-creation/selections-container.less

@@ -175,6 +175,11 @@
                 opacity: 0.2;
             }
 
+            &.no-horizontal-padding {
+                padding-left: 0;
+                padding-right: 0;
+            }
+
             legend {
                 margin-left: auto;
                 margin-right: auto;
@@ -274,6 +279,15 @@
                 flex-direction: column;
                 gap: 5px;
 
+                &.separated {
+                    border-bottom: 2px solid;
+                    padding-bottom: 8px;
+                }
+
+                .form-group {
+                    padding: 0 0.75rem;
+                }
+
                 .experience-inner-container {
                     position: relative;
                     display: flex;

templates/characterCreation/tabs/experience.hbs

@@ -4,17 +4,25 @@
     data-group='{{tabs.experience.group}}'
 >
     <div class="main-selections-container">
-        <fieldset class="section-container">
+        <fieldset class="section-container no-horizontal-padding">
             <legend>{{localize "DAGGERHEART.APPLICATIONS.CharacterCreation.initialExperiences"}} {{experience.nrSelected}}/{{experience.nrTotal}}</legend>
             <div class="experiences-inner-container">
                 {{#each experience.values as |experience id|}}
-                    <div class="experience-container">
+                    <div class="experience-container {{#unless @last}}separated{{/unless}}">
-                        <div class="experience-inner-container">
+                        <div class="form-group">
-                            <input class="experience-description" type="text" name="{{concat "experiences." id ".name" }}" value="{{experience.name}}" placeholder="{{localize "DAGGERHEART.APPLICATIONS.CharacterCreation.newExperience"}}" />
+                            <label>{{localize "DAGGERHEART.GENERAL.label"}}</label>
-                            <span class="experience-value">{{numberFormat this.value sign=true}}</span>
+                            <div class="experience-inner-container">
+                                <input class="experience-description" type="text" name="{{concat "experiences." id ".name" }}" value="{{experience.name}}" placeholder="{{localize "DAGGERHEART.APPLICATIONS.CharacterCreation.newExperience"}}" />
+                                <span class="experience-value">{{numberFormat this.value sign=true}}</span>
+                            </div>
                         </div>
 
-                        <textarea name="{{concat "experiences." id ".description"}}">{{experience.description}}</textarea>
+                        <div class="form-group">
+                            <label>{{localize "DAGGERHEART.GENERAL.optionalThing" thing=(localize "DAGGERHEART.GENERAL.description")}}</label>
+                            <div class="form-fields">
+                                <textarea name="{{concat "experiences." id ".description"}}">{{experience.description}}</textarea>
+                            </div>
+                        </div>
                     </div>
                 {{/each}}
             </div>