From 172e98f663315962226158f3351f9715a59de7b6 Mon Sep 17 00:00:00 2001
From: Sven Balzer <4653051+Kyuusokuna@users.noreply.github.com>
Date: Fri, 18 Oct 2024 21:12:17 +0200
Subject: [PATCH] change d20 display

---
 src/ActorSheet.html |  6 +++++-
 src/Assets/d20.svg  |  2 +-
 src/main.css        | 43 +++++++++++++++++++++++++------------------
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/ActorSheet.html b/src/ActorSheet.html
index 4ee9f65..ac93c9e 100644
--- a/src/ActorSheet.html
+++ b/src/ActorSheet.html
@@ -39,7 +39,10 @@
 {{#*inline "die-value"}}
     <div class="col noflex">
         {{#if header}}<div class="center">{{header}}</div>{{/if}}
-        <div class="die die-{{type}} roll" data-roll-type="{{type}}" {{#if value}}data-success-value="{{value}}"{{/if}} {{#if data-roll}}data-roll="{{data-roll}}"{{/if}}>{{value}}</div>
+        <div class="die die-{{type}} roll" data-roll-type="{{type}}" {{#if value}}data-success-value="{{value}}"{{/if}} {{#if data-roll}}data-roll="{{data-roll}}"{{/if}}>
+            <div><svg viewbox="0 0 64 64"><use href="/systems/dsa-4th-edition/src/Assets/d20.svg#d20"></use></svg></div>
+            <div>{{value}}</div>
+        </div>
     </div>
 {{/inline}}
 
@@ -265,6 +268,7 @@
                                     <span>{{item.name}}</span>
                                 </div>
                             </div>
+                            <div class="row"></div>
                             <div class="center">{{>die-value type="attacke"       data-roll="1d20" value=attacke}}</div>
                             <div class="center">{{>die-value type="parade"        data-roll="1d20" value=parade}}</div>
                             <div class="center">{{>die-value type="trefferpunkte" data-roll=trefferpunkte}}</div>
diff --git a/src/Assets/d20.svg b/src/Assets/d20.svg
index bf4af44..b881360 100644
--- a/src/Assets/d20.svg
+++ b/src/Assets/d20.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="64" height="64" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
- <g>
+ <g id="d20">
   <path d="m11.906 20.4h40.188l-20.094 34.801z"/>
   <path d="m52.635 21.059 6.5977 26.664-26.391 7.6172z"/>
   <path d="m32 .55664 19.791 19.043h-39.582z"/>
diff --git a/src/main.css b/src/main.css
index 4b54ee4..3c2a985 100644
--- a/src/main.css
+++ b/src/main.css
@@ -24,6 +24,10 @@
     align-content: center;
 }
 
+.none {
+    display: none;
+}
+
 
 
 .editable-input {
@@ -50,30 +54,33 @@
 
 
 .sheet .die {
-    width:  48px;
-    height: 48px;
-    line-height: 48px;
+    display: inline-grid;
 
-    background-color: #000;
-    mask-image: url("../src/Assets/d20.svg");
-    mask-size: contain;
-    
     text-align: center;
     color: #fff;
 }
 
-.sheet .die-courage      { background-color: #b22319; }
-.sheet .die-cleverness   { background-color: #8158a3; }
-.sheet .die-intuition    { background-color: #388834; }
-.sheet .die-charisma     { background-color: #0c0c0c; }
-.sheet .die-dexterity    { background-color: #d4b366; }
-.sheet .die-agility      { background-color: #678ec3; }
-.sheet .die-constitution { background-color: #a3a3a3; }
-.sheet .die-strength     { background-color: #d5a877; }
+.sheet .die > * {
+    grid-row:    1;
+    grid-column: 1;
 
-.sheet .die-attacke       { background-color: #b22319; }
-.sheet .die-parade        { background-color: #388834; }
-.sheet .die-trefferpunkte { background-color: #0c0c0c; }
+    width:  48px;
+    height: 48px;
+    line-height: 48px;
+}
+
+.sheet .die-courage      { fill: #b22319; }
+.sheet .die-cleverness   { fill: #8158a3; }
+.sheet .die-intuition    { fill: #388834; }
+.sheet .die-charisma     { fill: #0c0c0c; }
+.sheet .die-dexterity    { fill: #d4b366; }
+.sheet .die-agility      { fill: #678ec3; }
+.sheet .die-constitution { fill: #a3a3a3; }
+.sheet .die-strength     { fill: #d5a877; }
+
+.sheet .die-attacke       { fill: #b22319; }
+.sheet .die-parade        { fill: #388834; }
+.sheet .die-trefferpunkte { fill: #0c0c0c; }
 
 .sheet .item-open,
 .sheet .item-delete,