change d20 display

This commit is contained in:
Sven Balzer 2024-10-18 21:12:17 +02:00
parent 00fb647f0f
commit 172e98f663
3 changed files with 31 additions and 20 deletions

View File

@ -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>

View File

@ -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"/>

Before

Width:  |  Height:  |  Size: 696 B

After

Width:  |  Height:  |  Size: 705 B

View File

@ -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,