Adds Sidebar and also adds more styling via scss

src/main.mjs

@@ -12,7 +12,8 @@ async function preloadHandlebarsTemplates() {
         // ui partials.
         'systems/DSA_4-1/templates/ui/partial-rollable-button.hbs',
         'systems/DSA_4-1/templates/ui/partial-attribute-button.hbs',
-        'systems/DSA_4-1/templates/ui/partial-talent-editable.hbs'
+        'systems/DSA_4-1/templates/ui/partial-talent-editable.hbs',
+        'systems/DSA_4-1/templates/ui/partial-die.hbs'
     ]);
 }
 

src/module/sheets/characterSheet.mjs

@@ -208,19 +208,36 @@ export class CharacterSheet extends ActorSheet {
         }
     }
 
+    _onRoll(event) {
+        event.preventDefault();
+        const dataset = event.currentTarget.dataset;
+        if (dataset.roll) {
+            let label = dataset.label ? `${dataset.label}` : '';
+            let roll = new Roll(dataset.roll, this.actor.getRollData());
+            roll.toMessage({
+                speaker: ChatMessage.getSpeaker({ actor: this.actor }),
+                flavor: label,
+                rollMode: game.settings.get('core', 'rollMode'),
+            });
+            return roll;
+        }
+    }
+
     activateListeners(html) {
         super.activateListeners(html);
 
         html.on('click', '.attribut.rollable', (evt) => {
-            console.log(evt);
             this._onAttributeRoll(evt);
         });
 
         html.on('click', '.talent.rollable', (evt) => {
-            console.log(evt);
             this._onTalentRoll(evt);
         });
 
+        html.on('click', '.sidebar-element.rollable', (evt) => {
+            this._onRoll(evt);
+        });
+
         // Everything below here is only needed if the sheet is editable
         if (!this.isEditable) return;
 

src/style/_assets.scss

@@ -0,0 +1,3 @@
+$dice-box-background: url('/ui/parchment.jpg') repeat;
+$tab-background: url('/ui/parchment-white.jpg') repeat;
+$tab-pane-background: url('/ui/parchment-white.jpg') repeat;

src/style/_attributes.scss

@@ -1,45 +1,90 @@
+@use "./_colours";
+@use "./_numbers";
+@use "./_assets";
+@use "sass:color";
+
 .dsa41.sheet.actor.character {
 
   .sheet-header {
     position: relative;
-    .attribute {
+
+    .attributes {
       position: absolute;
       top: 8px;
       right: 4px;
       height: 48px;
-      display: inline-flex;
+      display: flex;
-      flex-direction: row;
 
-      .attribut.rollable {
+      .attribute.rollable {
         width: 48px;
         height: 48px;
         position: relative;
-        svg {
+        box-shadow: inset numbers.$dice-box-inset numbers.$dice-box-inset numbers.$dice-box-blur-radius colours.$dice-box-shadow;
-          position: absolute;
+        background: assets.$dice-box-background;
-          left: 0;
+        margin-left: 2px;
-          top: 0;
+        border: numbers.$dice-box-border-width inset colours.$dice-box-border-color;
-          bottom: 0;
+
-          right: 0;
+        .die {
-          opacity: 0.5;
+          stroke-width: 0.5;
+
+          svg {
+            position: absolute;
+            left: 4px;
+            top: 4px;
+            bottom: 4px;
+            right: 4px;
+          }
+
+          .border {
+            fill: rgba(0,0,0,0);
+            stroke: colours.$attribute-die-border-color;
+          }
+
+          .center {
+            fill: colours.$attribute-die-color;
+            stroke: colours.$attribute-die-border-color;
+          }
+
+          .topleft {
+            fill: color.adjust(colours.$attribute-die-color, $lightness: numbers.$lighter_factor);
+            stroke: colours.$attribute-die-border-color;
+          }
+          .bottomleft {
+            fill: color.adjust(colours.$attribute-die-color, $lightness: numbers.$lightest_factor);
+            stroke: colours.$attribute-die-border-color;
+          }
+
+          .topright {
+            fill: color.adjust(colours.$attribute-die-color, $lightness: numbers.$darken_factor);
+            stroke: colours.$attribute-die-border-color;
+          }
+          .bottomright, .bottom {
+            fill: color.adjust(colours.$attribute-die-color, $lightness: numbers.$darkest_factor);
+            stroke: colours.$attribute-die-border-color;
+          }
         }
 
-        .attribut-wert {
+        .wert {
           font-weight: bold;
           position: absolute;
           left: 0;
           width: 48px;
           top: 0;
-          line-height: 36px;
+          line-height: 48px;
           vertical-align: middle;
           text-align: center;
+          color: colours.$attribute-die-label-color;
         }
-        .attribut-name {
+        .name {
           position: absolute;
           left: 0;
           right: 0;
+          bottom: 0;
           line-height: 12px;
           vertical-align: middle;
           text-align: center;
+          color: colours.$attribute-label-color;
+          background-color: colours.$attribute-label-background-color;
         }
       }
     }

src/style/_character-sheet.scss

@@ -3,9 +3,10 @@
   .window-header.flexrow.draggable.resizable {
   }
 
-  $sidebar-width: 240px;
+  $sidebar-width: 224px;
   $attribute-height: 60px;
-  $tabs-height: 48px;
+  $tabs-spacing: 14px;
+  $tabs-height: 26px;
 
   .window-content {
     display: unset; /* we are on our own */
@@ -25,7 +26,7 @@
       top: $attribute-height;
       width: $sidebar-width;
       bottom: 0;
-      margin: 8px;
+      padding: 8px;
 
 
       .profile-img {
@@ -36,18 +37,19 @@
     nav.sheet-tabs.tabs {
       position: absolute;
       left: $sidebar-width;
-      top: $attribute-height;
+      top: $attribute-height+$tabs-spacing;
       right: 0;
       height: $tabs-height;
     }
 
     section.sheet-body {
       position: absolute;
-      top: $attribute-height+$tabs-height+4px;
+      top: $attribute-height+$tabs-height+$tabs-spacing+4px;
       left: $sidebar-width;
-      right: 0;
+      right: 4px;
-      bottom: 0;
+      bottom: 4px;
       padding: 8px;
+      overflow: auto;
     }
 
   }

src/style/_colours.scss

@@ -4,3 +4,27 @@ $zauber-color: #3465a4ff;
 $talent-color: #f57900ff;
 $kampftalent-color: #cc0000ff;
 
+$talent-body-color: #16bd6c;
+$talent-nature-color: #46800d;
+$talent-social-color: #ae9809;
+$talent-knowledge-color: #d319ba;
+$talent-language-color: #573bbc;
+$talent-crafting-color: #ae6813;
+
+$tab-border-color: #333;
+$tab-color: #000;
+$tab-inactive-background-color: unset;
+$tab-background-color: #fff8;
+
+$dice-box-shadow: rgba(0, 0, 0, 0.25);
+
+$attribute-die-border-color: #000;
+$attribute-die-color: #F00;
+$attribute-die-label-color: #FFF;
+$attribute-label-color: #FFF;
+$attribute-label-background-color: #0008;
+
+$rollable-die-border-color: #000;
+
+$dice-box-border-color: #333;
+

src/style/_numbers.scss

@@ -1,5 +1,16 @@
+$lightest_factor: 40%;
 $lighter_factor: 15%;
 $darken_factor: -15%;
+$darkest_factor: -40%;
 $start_gradient: 0.8;
 $end_gradient: 0.2;
 $direction_gradient: 90deg;
+
+$tab-border-width: 1px;
+$tab-pane-margin: 4px;
+
+$die-border-width: 1px;
+
+$dice-box-inset: 4px;
+$dice-box-blur-radius: 4px;
+$dice-box-border-width: 1px;

src/style/_rollable.scss

@@ -7,6 +7,12 @@
 $rollable_colours: (
   "nachteil": colour.$nachteil-color,
         "talent": colour.$talent-color,
+        "Körperlich": colour.$talent-body-color,
+        "Natur": colour.$talent-nature-color,
+        "Gesellschaft": colour.$talent-social-color,
+        "Wissen": colour.$talent-knowledge-color,
+        "Sprachen": colour.$talent-language-color,
+        "Handwerk": colour.$talent-crafting-color,
         "kampftalent": colour.$kampftalent-color,
         "liturgie": colour.$liturgie-color,
         "zauber": colour.$zauber-color,
@@ -150,17 +156,34 @@ $rollable_colours: (
   $color: map.get($rollable_colours, $name);
   .#{$name}.rollable {
     .die {
+      stroke-width: 0.5;
+
+      .border {
+        fill: colour.$rollable-die-border-color;
+        stroke: colour.$rollable-die-border-color;
+      }
+
       .center {
         fill: $color;
+        stroke: colour.$rollable-die-border-color;
       }
 
-      .topleft, .bottomleft {
+      .topleft {
-
         fill: color.adjust($color, $lightness: numbers.$lighter_factor);
+        stroke: colour.$rollable-die-border-color;
+      }
+      .bottomleft {
+        fill: color.adjust($color, $lightness: numbers.$lightest_factor);
+        stroke: colour.$rollable-die-border-color;
       }
 
-      .topright, .bottomright, .bottom {
+      .topright {
         fill: color.adjust($color, $lightness: numbers.$darken_factor);
+        stroke: colour.$rollable-die-border-color;
+      }
+      .bottomright, .bottom {
+        fill: color.adjust($color, $lightness: numbers.$darkest_factor);
+        stroke: colour.$rollable-die-border-color;
       }
     }
 
@@ -177,3 +200,10 @@ $rollable_colours: (
 @include coloring("zauber");
 @include coloring("talent");
 @include coloring("kampftalent");
+
+@include coloring("Körperlich");
+@include coloring("Natur");
+@include coloring("Gesellschaft");
+@include coloring("Wissen");
+@include coloring("Sprachen");
+@include coloring("Handwerk");

src/style/_sidebar-elements.scss

@@ -0,0 +1,70 @@
+.dsa41.sheet.actor.character {
+
+  .head-data {
+
+    .sidebar-element {
+
+      height: 24px;
+      width: 100%;
+      margin-top: 4px;
+
+      &.rollable {
+
+        label {
+          display: inline-block;
+          line-height: 24px;
+          vertical-align: middle;
+        }
+
+        .formula {
+          display: inline-block;
+          line-height: 24px;
+          vertical-align: middle;
+        }
+
+        .die {
+
+        }
+
+
+        &:hover {
+          .formula {
+            text-shadow: 0 0 10px rgb(255 0 0);
+          }
+        }
+      }
+
+      &.resource-bar {
+
+        position: relative;
+        border: 1px inset #ccc;
+        background-color: rgba(0,0,0,0.2);
+
+        label {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 48px;
+          background-color: rgba(0, 0, 0, 0.1);
+          z-index: 3;
+          line-height: 24px;
+          vertical-align: middle;
+          text-indent: 8px;
+        }
+
+        span.resource-fill {
+          position:absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          background: linear-gradient(to bottom, #0bad29 0%,#11f128 50%,#0cde24 51%,#6ff77b 100%);
+        }
+
+      }
+
+    }
+
+  }
+
+}

src/style/_tabs.scss

@@ -0,0 +1,46 @@
+@use "./numbers";
+@use "./colours";
+@use "./assets";
+
+.dsa41.sheet.actor.character {
+
+  nav.sheet-tabs.tabs {
+
+    position: relative;
+    display: flow;
+    border-top: unset;
+
+    a.item[data-tab] {
+
+      background-color: colours.$tab-inactive-background-color;
+
+      &.active {
+        border-left: numbers.$tab-border-width solid colours.$tab-border-color;
+        border-top: numbers.$tab-border-width solid colours.$tab-border-color;
+        border-right: numbers.$tab-border-width solid colours.$tab-border-color;
+        border-bottom: 0;
+        top: numbers.$tab-border-width*2;
+        background: assets.$tab-background;
+        position: relative;
+        z-index: 2;
+
+      }
+
+    }
+
+  }
+
+  section.sheet-body {
+
+    border: numbers.$tab-border-width solid colours.$tab-border-color;
+    background: assets.$tab-pane-background;
+
+    div.tab {
+
+      overflow: auto;
+
+    }
+
+  }
+
+}

src/style/styles.scss

@@ -1,4 +1,6 @@
 @use "_rollable";
 @use "_lists";
 @use "_attributes";
+@use "_sidebar-elements";
 @use "_character-sheet";
+@use "_tabs";

src/templates/actor/actor-character-sheet.hbs

@@ -4,13 +4,7 @@
     <header class="sheet-header">
         {{!-- Header stuff goes here --}}
         <div class="header-fields">
-            <div class="editlock">
+            <div class="attributes">
-                <label>
-                <input type="checkbox" name="isEditable" {{checked isEditable}}/>
-                    <span>Editieren</span>
-                </label>
-            </div>
-            <div class="attribute">
                 {{#each attributes}}
                     {{> "systems/DSA_4-1/templates/ui/partial-attribute-button.hbs" this}}
                 {{/each}}
@@ -21,99 +15,152 @@
     <div class="head-data">
         <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name"/></h1>
         <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}"/>
+        <h2 class="sidebar-element header">Kampf Daten</h2>
+
+        <div class="sidebar-element resource-bar">
+            <label>LeP:</label><span class="resource-fill" style="width: 50%"></span></div>
+        <div class="sidebar-element resource-bar">
+            <label>AuP:</label><span class="resource-fill" style="width: 80%"></span></div>
+
+        <div class="sidebar-element rollable" data-roll="1d20+23" data-label="Attacke"><label>AT</label> <div class="formula">1W20+23</div></div>
+        <div class="sidebar-element"><label>PA</label>: -</div>
+        <div class="sidebar-element rollable" data-label="Ausweichen" data-roll="1d6+2"><label>Ausweichen</label> <div class="formula">1W6+2</div></div>
+        <div class="sidebar-element rollable" data-label="Initiative" data-roll="1d6+6"><label>Initiative</label> <div class="formula">1W6+6</div></div>
+
+        <h2 class="sidebar-element header">Favouriten</h2>
+
     </div>
 
     {{!-- Sheet Tab Navigation --}}
     <nav class="sheet-tabs tabs" data-group="primary">
         <a class="item" data-tab="overview">Übersicht</a>
+        <a class="item" data-tab="attributes">Eigenschaften</a>
+        <a class="item" data-tab="combat">Kampf</a>
         <a class="item" data-tab="skills">Talente</a>
+        <a class="item" data-tab="backpack">Inventar</a>
+        <a class="item" data-tab="spells">Zauber</a>
+        <a class="item" data-tab="miracles">Liturgien</a>
+        <a class="item" data-tab="pets">Begleiter</a>
     </nav>
 
     {{!-- Sheet Body --}}
     <section class="sheet-body">
-        <div class="tab description" data-group="primary" data-tab="description">
+        <div class="tab overview" data-group="primary" data-tab="overview">
             <div><label>Spezies
-                <input type="text" name="system.meta.spezies.value" value="{{system.meta.spezies}}"/>
+                <input type="text" name="system.meta.spezies" value="{{system.meta.spezies}}"/>
             </label>
             </div>
-            <div><label>Kultur<input type="text" name="system.meta.kultur.value" value="{{system.meta.kultur}}"/></label>
+            <div><label>Kultur<input type="text" name="system.meta.kultur"
+                                     value="{{system.meta.kultur}}"/></label>
             </div>
-            <div><label>Profession<input type="text" name="system.meta.profession.value"
+            <div><label>Profession<input type="text" name="system.meta.profession"
-                                      value="{{system.meta.profession}}"/></label>
+                                         value="{{system.meta.profession}}"/></label>
             </div>
-            <div><label>Geschlecht<input type="text" name="system.meta.geschlecht.value"
+            <div><label>Geschlecht<input type="text" name="system.meta.geschlecht"
-                                      value="{{system.meta.geschlecht}}"/></label>
+                                         value="{{system.meta.geschlecht}}"/></label>
             </div>
+        </div>
+        <div class="tab attributes" data-group="primary" data-tab="attributes">
+
+        </div>
+
+        <div class="tab combat" data-group="primary" data-tab="combat">
+
         </div>
         <div class="tab skills" data-group="primary" data-tab="skills">
             {{#if this.isEditable}}
                 <h2>Talentwerte</h2>
                 <ul>
-                {{#each flatSkills}}
+                    {{#each flatSkills}}
-                    <li>{{> "systems/DSA_4-1/templates/ui/partial-talent-editable.hbs" this}}</li>
+                        <li>{{> "systems/DSA_4-1/templates/ui/partial-talent-editable.hbs" this}}</li>
-                {{/each}}
+                    {{/each}}
                 </ul>
             {{else}}
-            <h2>Körperliche Talente</h2>
+                <div>
-            <ul>
+                    <h2>Körperliche Talente</h2>
-            <li>
+                    <ul>
-            {{#each skills.Körperlich}}
                     <li>
-                        {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
+                        {{#each skills.Körperlich}}
-                    </li>
+                            <li>
-            {{/each}}
+                                {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
-            </ul>
+                            </li>
-            <h2>Gesellschaftliche Talente</h2>
+                        {{/each}}
-            <ul>
+                    </ul>
-            <li>
+                </div>
-                {{#each skills.Gesellschaft}}
+                <div>
+                    <h2>Gesellschaftliche Talente</h2>
+                    <ul>
                     <li>
-                        {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
+                        {{#each skills.Gesellschaft}}
-                    </li>
+                            <li>
-                {{/each}}
+                                {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
-            </ul>
+                            </li>
-            <h2>Natur Talente</h2>
+                        {{/each}}
-            <ul>
+                    </ul>
-            <li>
+                </div>
-                {{#each skills.Natur}}
+                <div>
+                    <h2>Natur Talente</h2>
+                    <ul>
                     <li>
-                        {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
+                        {{#each skills.Natur}}
-                    </li>
+                            <li>
-                {{/each}}
+                                {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
-            </ul>
+                            </li>
-            <h2>Wissenstalente</h2>
+                        {{/each}}
-            <ul>
+                    </ul>
-            <li>
+                </div>
-                {{#each skills.Wissen}}
+                <div>
+                    <h2>Wissenstalente</h2>
+                    <ul>
                     <li>
-                        {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
+                        {{#each skills.Wissen}}
-                    </li>
+                            <li>
-                {{/each}}
+                                {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
-            </ul>
+                            </li>
-            <h2>Schriften & Sprachen</h2>
+                        {{/each}}
-            <ul>
+                    </ul>
-            <li>
+                </div>
-                {{#each skills.Schriften}}
+                <div>
+                    <h2>Schriften & Sprachen</h2>
+                    <ul>
                     <li>
-                        {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
+                        {{#each skills.Schriften}}
-                    </li>
+                            <li>
-                {{/each}}
+                                {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
-                {{#each skills.Schriften}}
+                            </li>
+                        {{/each}}
+                        {{#each skills.Schriften}}
+                            <li>
+                                {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
+                            </li>
+                        {{/each}}
+                    </ul>
+                </div>
+                <div>
+                    <h2>Handwerkliche Talente</h2>
+                    <ul>
                     <li>
-                        {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
+                        {{#each skills.Handwerk}}
-                    </li>
+                            <li>
-                {{/each}}
+                                {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
-            </ul>
+                            </li>
-            <h2>Handwerkliche Talente</h2>
+                        {{/each}}
-            <ul>
+                    </ul>
-            <li>
+                </div>
-                {{#each skills.Handwerk}}
-                    <li>
-                        {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}}
-                    </li>
-                {{/each}}
-            </ul>
             {{/if}}
         </div>
+        <div class="tab backpack" data-group="primary" data-tab="backpack">
+
+        </div>
+        <div class="tab spells" data-group="primary" data-tab="spells">
+
+        </div>
+        <div class="tab miracles" data-group="primary" data-tab="miracles">
+
+        </div>
+        <div class="tab pets" data-group="primary" data-tab="pets">
+
+        </div>
+
     </section>
 </form>

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

@@ -1,52 +1,12 @@
-<button class="attribut rollable" data-label="{{this.name}}" data-roll="1d20cs<=@{{this.eigenschaft}}">
+<div class="attribute rollable" data-label="{{this.name}}" data-roll="1d20cs<=@{{this.eigenschaft}}">
-    <svg viewBox="0 0 6.3499998 6.35">
+    <div class="die">
-        <g
+        {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}
-                id="g54292"
+    </div>
-                transform="matrix(0.18024007,0,0,0.18024007,-0.89816307,-0.85756211)"
-                style="stroke-width:1.05833;stroke-dasharray:none">
-            <path
-                    style="stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                    d="M 22.60018,5.4074448 15.210951,18.121927 7.821723,13.87057 Z"
-                    id="path54272"
-                    class="die topleft" />
-            <path
-                    style="stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                    d="M 22.60018,5.4074448 29.989407,18.121927 37.34771,13.890365 Z"
-                    id="path54274"
-                    class="die topright" />
-            <path
-                    style="stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                    d="m 29.989407,18.121927 7.389229,12.754072 -2e-6,-17.005429 z"
-                    id="path54276"
-                    class="die bottomright" />
-            <path
-                    style="display:inline;stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                    d="m 15.210951,18.121927 -7.3934235,12.756367 2e-6,-17.005429 z"
-                    id="path54278"
-                    class="die bottomleft" />
-            <path
-                    style="display:inline;stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                    d="M 7.8175275,30.878293 22.600179,39.378712 37.378634,30.875999 Z"
-                    id="path54280"
-                    class="die bottom" />
-            <path
-                    style="display:inline;stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                    d="M 7.821723,30.875999 22.600179,5.3678558 37.378634,30.875999 Z"
-                    id="path54282"
-                    class="die center" />
-            <path
-                    style="fill-opacity:1;stroke:#000000;stroke-width:0.896643;stroke-dasharray:none;paint-order:normal"
-                    id="path2181"
-                    class="die border"
-                    d="m 35.923409,110.09622 -12.498871,7.21622 -12.498871,-7.21622 V 95.663763 l 12.498871,-7.216227 12.498871,7.216227 z"
-                    transform="matrix(1.1823833,0,0,1.1782771,-5.0966027,-98.847851)" />
-        </g>
-    </svg>
 
-    <span class="attribut-wert">
+    <span class="wert">
                             {{this.wert}}
                         </span>
-    <span class="attribut-name">
+    <span class="name">
         {{this.name}}
     </span>
-</button>
+</div>

src/templates/ui/partial-die.hbs

@@ -0,0 +1,43 @@
+<svg viewBox="0 0 6.3499998 6.35">
+    <g
+            id="g54292"
+            transform="matrix(0.18024007,0,0,0.18024007,-0.89816307,-0.85756211)"
+            style="stroke-width:1.05833;stroke-dasharray:none">
+        <path
+                style="stroke-linejoin:bevel;stroke-dasharray:none"
+                d="M 22.60018,5.4074448 15.210951,18.121927 7.821723,13.87057 Z"
+                id="path54272"
+                class="die topleft" />
+        <path
+                style="stroke-linejoin:bevel;stroke-dasharray:none"
+                d="M 22.60018,5.4074448 29.989407,18.121927 37.34771,13.890365 Z"
+                id="path54274"
+                class="die topright" />
+        <path
+                style="stroke-linejoin:bevel;stroke-dasharray:none"
+                d="m 29.989407,18.121927 7.389229,12.754072 -2e-6,-17.005429 z"
+                id="path54276"
+                class="die bottomright" />
+        <path
+                style="display:inline;stroke-linejoin:bevel;stroke-dasharray:none"
+                d="m 15.210951,18.121927 -7.3934235,12.756367 2e-6,-17.005429 z"
+                id="path54278"
+                class="die bottomleft" />
+        <path
+                style="display:inline;stroke-linejoin:bevel;stroke-dasharray:none"
+                d="M 7.8175275,30.878293 22.600179,39.378712 37.378634,30.875999 Z"
+                id="path54280"
+                class="die bottom" />
+        <path
+                style="display:inline;stroke-linejoin:bevel;stroke-dasharray:none"
+                d="M 7.821723,30.875999 22.600179,5.3678558 37.378634,30.875999 Z"
+                id="path54282"
+                class="die center" />
+        <path
+                style="fill-opacity:1;stroke-dasharray:none;paint-order:normal"
+                id="path2181"
+                class="die border"
+                d="m 35.923409,110.09622 -12.498871,7.21622 -12.498871,-7.21622 V 95.663763 l 12.498871,-7.216227 12.498871,7.216227 z"
+                transform="matrix(1.1823833,0,0,1.1782771,-5.0966027,-98.847851)" />
+    </g>
+</svg>

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

@@ -1,49 +1,7 @@
-<div class="block rollable {{this.type}}" 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-taw="{{this.taw}}"  data-rollEigenschaft1="{{this.rollEigenschaft1}}" data-rollEigenschaft2="{{this.rollEigenschaft2}}" data-rollEigenschaft3="{{this.rollEigenschaft3}}">
 
     <div class="die">
-        <svg viewBox="0 0 6.3499998 6.35">
+        {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}
-            <g
-                    id="g54292"
-                    transform="matrix(0.18024007,0,0,0.18024007,-0.89816307,-0.85756211)"
-                    style="stroke-width:1.05833;stroke-dasharray:none">
-                <path
-                        style="stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="M 22.60018,5.4074448 15.210951,18.121927 7.821723,13.87057 Z"
-                        id="path54272"
-                        class="die topleft" />
-                <path
-                        style="stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="M 22.60018,5.4074448 29.989407,18.121927 37.34771,13.890365 Z"
-                        id="path54274"
-                        class="die topright" />
-                <path
-                        style="stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="m 29.989407,18.121927 7.389229,12.754072 -2e-6,-17.005429 z"
-                        id="path54276"
-                        class="die bottomright" />
-                <path
-                        style="display:inline;stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="m 15.210951,18.121927 -7.3934235,12.756367 2e-6,-17.005429 z"
-                        id="path54278"
-                        class="die bottomleft" />
-                <path
-                        style="display:inline;stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="M 7.8175275,30.878293 22.600179,39.378712 37.378634,30.875999 Z"
-                        id="path54280"
-                        class="die bottom" />
-                <path
-                        style="display:inline;stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="M 7.821723,30.875999 22.600179,5.3678558 37.378634,30.875999 Z"
-                        id="path54282"
-                        class="die center" />
-                <path
-                        style="fill-opacity:1;stroke:#000000;stroke-width:0.896643;stroke-dasharray:none;paint-order:normal"
-                        id="path2181"
-                        class="die border"
-                        d="m 35.923409,110.09622 -12.498871,7.21622 -12.498871,-7.21622 V 95.663763 l 12.498871,-7.216227 12.498871,7.216227 z"
-                        transform="matrix(1.1823833,0,0,1.1782771,-5.0966027,-98.847851)" />
-            </g>
-        </svg>
     <span class="value">{{#if this.taw}}
         {{this.taw}}
         {{else}}

src/templates/ui/partial-talent-editable.hbs

@@ -1,49 +1,7 @@
 <div class="block rollable {{this.type}}">
 
     <div class="die">
-        <svg viewBox="0 0 6.3499998 6.35">
+        {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}
-            <g
-                    id="g54292"
-                    transform="matrix(0.18024007,0,0,0.18024007,-0.89816307,-0.85756211)"
-                    style="stroke-width:1.05833;stroke-dasharray:none">
-                <path
-                        style="stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="M 22.60018,5.4074448 15.210951,18.121927 7.821723,13.87057 Z"
-                        id="path54272"
-                        class="die topleft" />
-                <path
-                        style="stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="M 22.60018,5.4074448 29.989407,18.121927 37.34771,13.890365 Z"
-                        id="path54274"
-                        class="die topright" />
-                <path
-                        style="stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="m 29.989407,18.121927 7.389229,12.754072 -2e-6,-17.005429 z"
-                        id="path54276"
-                        class="die bottomright" />
-                <path
-                        style="display:inline;stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="m 15.210951,18.121927 -7.3934235,12.756367 2e-6,-17.005429 z"
-                        id="path54278"
-                        class="die bottomleft" />
-                <path
-                        style="display:inline;stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="M 7.8175275,30.878293 22.600179,39.378712 37.378634,30.875999 Z"
-                        id="path54280"
-                        class="die bottom" />
-                <path
-                        style="display:inline;stroke:#000000;stroke-width:1.05833;stroke-linejoin:bevel;stroke-dasharray:none"
-                        d="M 7.821723,30.875999 22.600179,5.3678558 37.378634,30.875999 Z"
-                        id="path54282"
-                        class="die center" />
-                <path
-                        style="fill-opacity:1;stroke:#000000;stroke-width:0.896643;stroke-dasharray:none;paint-order:normal"
-                        id="path2181"
-                        class="die border"
-                        d="m 35.923409,110.09622 -12.498871,7.21622 -12.498871,-7.21622 V 95.663763 l 12.498871,-7.216227 12.498871,7.216227 z"
-                        transform="matrix(1.1823833,0,0,1.1782771,-5.0966027,-98.847851)" />
-            </g>
-        </svg>
     <span class="value">
     </span>
     </div>