Updates Rollables (Attributes, Skills) to include a ContextMenu to delete or adjust their values. Also added the capability to open SkillsSheets.

src/module/sheets/characterSheet.mjs

@@ -69,7 +69,8 @@ export class CharacterSheet extends ActorSheet {
                             eigenschaft1: werte[0].name,
                             eigenschaft2: werte[1].name,
                             eigenschaft3: werte[2].name,
-                            probe: `(${eigenschaften.join("/")})`
+                            probe: `(${eigenschaften.join("/")})`,
+                            id: item._id,
                         };
                         context.skills[talentGruppe].push(obj);
                         context.flatSkills.push(obj);
@@ -123,7 +124,7 @@ export class CharacterSheet extends ActorSheet {
             },
             {
                 eigenschaft: "ch",
-                name: "IN",
+                name: "CH",
                 tooltip: "Charisma",
                 wert: actorData.system.attribute.ch.aktuell ?? 0,
             },
@@ -147,7 +148,7 @@ export class CharacterSheet extends ActorSheet {
             },
             {
                 eigenschaft: "kk",
-                name: "KO",
+                name: "KK",
                 tooltip: "Körperkraft",
                 wert: actorData.system.attribute.kk.aktuell ?? 0,
             },
@@ -261,6 +262,43 @@ export class CharacterSheet extends ActorSheet {
         }
     }
 
+    _onOpenSkill(documentId) {
+        console.log(this.object.items.get(documentId).sheet);
+        this.object.items.get(documentId).sheet.render(true)
+    }
+
+    showAdjustAttributeDialog(attributeName, attributeField, previousValue) {
+        const thisActor = this;
+        const myContent = `
+            Value:
+          <input id="attributeValue" type="number" value="${previousValue}" />
+        `;
+
+        function updateAttribute(html) {
+            const value = html.find("input#attributeValue").val();
+            const attribute = {}
+            attribute[attributeField.toLowerCase()] = {
+                aktuell: value
+            }
+            thisActor.object.update({ system: { attribute }})
+        }
+
+                new Dialog({
+                    title: `${attributeName} ändern auf`,
+                    content: myContent,
+                    buttons: {
+                        button1: {
+                            label: "Ändern",
+                            callback: (html) => {
+                                updateAttribute(html)
+                            },
+                            icon: `<i class="fas fa-check"></i>`
+                        }
+                    }
+                }).render(true);
+
+    }
+
     activateListeners(html) {
         super.activateListeners(html);
 
@@ -276,6 +314,34 @@ export class CharacterSheet extends ActorSheet {
             this._onRoll(evt);
         });
 
+        html.on('click', '.talent .name', (evt) => {
+            this._onOpenSkill(evt.target.dataset.id);
+            evt.stopPropagation();
+        })
+
+        new ContextMenu(html, '.talent.rollable', [
+            {
+                name: "Entfernen",
+                icon: '<i class="fa-solid fa-trash"></i>',
+                callback: (event) => {
+                    this.object.deleteEmbeddedDocuments('Item', [event[0].dataset.id])
+                },
+                condition: () => true
+            }
+        ]);
+
+
+        new ContextMenu(html, '.attribute.rollable', [
+            {
+                name: "Anpassen",
+                icon: '<i class="fa-solid fa-pen"></i>',
+                callback: (event) => {
+                    this.showAdjustAttributeDialog(event[0].dataset.name, event[0].dataset.label, event[0].dataset.value)
+                },
+                condition: () => true
+            }
+        ]);
+
 
             let handler = ev => this._onDragStart(ev);
             // Find all items on the character sheet.

src/style/_rollable.scss

@@ -24,13 +24,13 @@ $rollable_colours: (
     height: 32px;
     position: relative;
     margin: 4px;
-    z-index: 2;
 
     .die {
       width: 32px;
       height: 32px;
       display: inline-block;
       position: relative;
+      z-index: 1;
 
       .border {
         fill: #0000;
@@ -64,7 +64,6 @@ $rollable_colours: (
       left: 16px;
       top: 0;
       height: 32px;
-      z-index: -1;
       padding-left: 24px;
 
       span.name {
@@ -205,4 +204,4 @@ $rollable_colours: (
 @include coloring("Gesellschaft");
 @include coloring("Wissen");
 @include coloring("Sprachen");
-@include coloring("Handwerk");
+@include coloring("Handwerk");

src/templates/item/item-skill-sheet.hbs

@@ -17,6 +17,12 @@
                     </select>
                 </label>
             </div>
+            <div>
+                <label>TAW:
+                    <input type="text" name="system.taw"
+                           value="{{system.taw}}" />
+                </label>
+            </div>
             <div>
                 <label>Erstes Attribut
                     <input type="text" name="system.probe.0"
@@ -66,4 +72,4 @@
 
         </div>
     </section>
-</form>
+</form>

src/templates/ui/partial-attribute-button.hbs

@@ -1,4 +1,4 @@
-<div class="attribute rollable" data-label="{{this.name}}" data-roll="1d20cs<=@{{this.eigenschaft}}.aktuell">
+<div class="attribute rollable" data-name="{{this.tooltip}}" alt="{{this.tooltip}}" data-value="{{this.wert}}"  data-label="{{this.name}}" data-roll="1d20cs<=@{{this.eigenschaft}}.aktuell">
     <div class="die">
         {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}
     </div>
@@ -9,4 +9,4 @@
     <span class="name">
         {{this.name}}
     </span>
-</div>
+</div>

src/templates/ui/partial-rollable-button.hbs

@@ -1,4 +1,4 @@
-<div class="block rollable {{this.type}} {{this.gruppe}}" data-taw="{{this.taw}}'data-name="{{this.name}}" data-eigenschaft1="{{this.eigenschaft1}}" data-eigenschaft2="{{this.eigenschaft2}}" data-eigenschaft3="{{this.eigenschaft3}}" data-taw="{{this.taw}}"  data-rollEigenschaft1="{{this.rollEigenschaft1}}" data-rollEigenschaft2="{{this.rollEigenschaft2}}" data-rollEigenschaft3="{{this.rollEigenschaft3}}">
+<div class="block rollable {{this.type}} {{this.gruppe}}" data-id="{{this.id}}" data-taw="{{this.taw}}'data-name="{{this.name}}" data-eigenschaft1="{{this.eigenschaft1}}" data-eigenschaft2="{{this.eigenschaft2}}" data-eigenschaft3="{{this.eigenschaft3}}" data-taw="{{this.taw}}"  data-rollEigenschaft1="{{this.rollEigenschaft1}}" data-rollEigenschaft2="{{this.rollEigenschaft2}}" data-rollEigenschaft3="{{this.rollEigenschaft3}}">
 
     <div class="die">
         {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}
@@ -12,11 +12,11 @@
     </span>
     </div>
     <div class="container">
-        <span class="name">{{this.name}}</span>
+        <span class="name" data-id="{{this.id}}">{{this.name}}</span>
         <div class="werte">
             {{#each this.werte}}
                 <div class="eigenschaft"><span class="name">{{this.name}}</span><span class="value">{{this.value}}</span></div>
             {{/each}}
         </div>
     </div>
-</div>
+</div>