implemented modifier dialog

src/module/sheets/characterSheet.mjs

@@ -565,12 +565,33 @@ export class CharacterSheet extends ActorSheet {
         }
     }
 
-    _onAttributeRoll(event) {
+    async _onAttributeRoll(event) {
         event.preventDefault();
         let actor = this.actor
         let dataset = event.currentTarget.dataset
-        let attribute = this.getData().attributes.find(item => item.eigenschaft === dataset.shortForm)
+        let data = await this.getData()
-        rollAttributeForActor(actor, attribute, "+0")
+        let attribute = data.attributes.find(item => item.name === dataset.label)
+
+        let content = await foundry.applications.handlebars.renderTemplate("templates/dialog/attribute-roll.hbs", {
+            attribute: attribute.tooltip,
+            mod: 0,
+        })
+
+        let d = new Dialog({
+            title: `${attribute.tooltip}-Probe`,
+            content: content,
+            buttons: {
+                one: {
+                    label: "Würfeln",
+                    callback: (html) => {
+                        let mod = html.find('#mod-input').val()
+                        rollAttributeForActor(actor, attribute, mod > 0 ? `+${mod}` : mod)
+                    }
+                },
+            },
+            default: "two",
+        });
+        d.render(true);
     }
 
     openEmbeddedDocument(documentId) {

src/module/utils/rolls/rollEngine.mjs

@@ -8,17 +8,16 @@
 export async function rollAttributeForActor(actor, attribute, modifier, mode = foundry.CONFIG.Dice.rollModes.publicroll) {
     let result = await rollDice("1d20", mode)
     let resultRoll = result.results[0]
-    let success = attribute.wert >= resultRoll
+    let mod = parseInt(modifier)
+    let success = attribute.wert >= resultRoll + mod
 
-    let message = await foundry.applications.handlebars.renderTemplate("templates/chat-messages/attributeCheckMessage.hbs", {
+    let message = await foundry.applications.handlebars.renderTemplate("templates/chat-messages/attribute-check.hbs", {
-        attribute: {
+        attribute: attribute.name,
-            name: attribute.name,
+        target: attribute.wert - mod,
-            value: attribute.wert,
-        },
         mod: modifier,
         result: resultRoll,
         success: success,
-        rest: attribute.wert - resultRoll,
+        rest: attribute.wert - (resultRoll + mod),
     })
 
     let chatData = {

src/style/dialogs.scss

@@ -1 +1 @@
-@use "dialogs/attribute-roll-dialog";
+@use "dialogs/attribute-roll";

src/style/dialogs/attribute-roll.scss

@@ -0,0 +1,38 @@
+.attribute-roll-dialog-content {
+  display: grid;
+  grid-template-columns: 2fr 30px 1fr 30px 2fr;
+  grid-template-rows: auto auto 30px minmax(10px, 1fr);
+  align-items: center;
+
+  .headline {
+    grid-row: 1;
+    grid-column: 1 / span 5;
+    text-align: center;
+  }
+
+  #mod-type {
+    grid-row: 2;
+    grid-column: 1 / span 5;
+    text-align: center;
+  }
+
+  .subtract-button {
+    grid-row: 3;
+    grid-column: 2;
+  }
+
+  #mod-input {
+    display: none;
+  }
+
+  #mod-display {
+    grid-row: 3;
+    grid-column: 3;
+    text-align: center;
+  }
+
+  .add-button {
+    grid-row: 3;
+    grid-column: 4;
+  }
+}

src/templates/chat-messages/attribute-check.hbs

@@ -1,6 +1,6 @@
 <div class="attribute-check-message">
     <div class="headline">
-        <h2>{{attribute.name}}-Probe ({{mod}})</h2>
+        <h2>{{attribute}}-Probe ({{mod}})</h2>
     </div>
     <div class="result {{#if success}}success{{else}}failure{{/if}}">
         {{#if success}}
@@ -17,7 +17,10 @@
         {{/if}}
     </div>
     <div class="roll-result">
-        <div class="roll">{{result}}</div>
+        <div class="roll">
-        <div class="attribute-value">{{attribute.value}}</div>
+            {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}
+            <span class="center">{{result}}</span>
+        </div>
+        <div class="attribute-value">{{target}}</div>
     </div>
 </div>

src/templates/dialog/attribute-roll.hbs

@@ -0,0 +1,53 @@
+<script>
+    function raiseMod() {
+        let input = $('#mod-input')
+        let mod = parseInt(input.val())
+        mod++;
+        input.val(mod)
+        adaptModType()
+        adaptMod()
+    }
+
+    function lowerMod() {
+        let input = $('#mod-input')
+        let mod = parseInt(input.val())
+        mod--;
+        input.val(mod)
+        adaptModType()
+        adaptMod()
+    }
+
+    function adaptModType() {
+        let input = $('#mod-input')
+        let mod = parseInt(input.val())
+        if (mod > 0) {
+            document.getElementById('mod-type').innerHTML = "Erschwernis"
+        } else if (mod < 0) {
+            document.getElementById('mod-type').innerHTML = "Erleichterung"
+        } else {
+            document.getElementById('mod-type').innerHTML = "Keine Änderung"
+        }
+    }
+
+    function adaptMod() {
+        let input = $('#mod-input')
+        let mod = parseInt(input.val())
+        document.getElementById('mod-display').innerHTML = mod >= 0 ? `+${mod}` : mod
+    }
+</script>
+<div class="attribute-roll-dialog-content">
+    <h2 class="headline">{{attribute}}</h2>
+    <h3 id="mod-type">
+        {{#if (gt mod 0)}}
+            Erschwernis
+        {{else if (lt mod 0)}}
+            Erleichterung
+        {{else}}
+            Keine Anpassung
+        {{/if}}
+    </h3>
+    <button class="subtract-button" onclick="lowerMod()">-</button>
+    <span id="mod-display">{{mod}}</span>
+    <button class="add-button" onclick="raiseMod()">+</button>
+    <input type="number" id="mod-input" value="{{mod}}">
+</div>