From f8e5b94b777306f3d673671bed9d89b2c6a00016 Mon Sep 17 00:00:00 2001 From: macniel Date: Mon, 29 Sep 2025 13:42:19 +0200 Subject: [PATCH] Adds Sidebar and also adds more styling via scss --- src/main.mjs | 3 +- src/module/sheets/characterSheet.mjs | 21 +- src/style/_assets.scss | 3 + src/style/_attributes.scss | 73 +++++-- src/style/_character-sheet.scss | 16 +- src/style/_colours.scss | 24 +++ src/style/_numbers.scss | 13 +- src/style/_rollable.scss | 38 +++- src/style/_sidebar-elements.scss | 70 +++++++ src/style/_tabs.scss | 46 +++++ src/style/styles.scss | 4 +- src/templates/actor/actor-character-sheet.hbs | 187 +++++++++++------- src/templates/ui/partial-attribute-button.hbs | 54 +---- src/templates/ui/partial-die.hbs | 43 ++++ src/templates/ui/partial-rollable-button.hbs | 46 +---- src/templates/ui/partial-talent-editable.hbs | 44 +---- 16 files changed, 451 insertions(+), 234 deletions(-) create mode 100644 src/style/_assets.scss create mode 100644 src/style/_sidebar-elements.scss create mode 100644 src/style/_tabs.scss create mode 100644 src/templates/ui/partial-die.hbs diff --git a/src/main.mjs b/src/main.mjs index 00a06367..3a95f0b2 100644 --- a/src/main.mjs +++ b/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' ]); } diff --git a/src/module/sheets/characterSheet.mjs b/src/module/sheets/characterSheet.mjs index 8c38b014..48e449d5 100644 --- a/src/module/sheets/characterSheet.mjs +++ b/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; diff --git a/src/style/_assets.scss b/src/style/_assets.scss new file mode 100644 index 00000000..e8aa7d05 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/style/_attributes.scss b/src/style/_attributes.scss index e085c5ce..63eba671 100644 --- a/src/style/_attributes.scss +++ b/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; - flex-direction: row; + display: flex; - .attribut.rollable { + .attribute.rollable { width: 48px; height: 48px; position: relative; - svg { - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - opacity: 0.5; + box-shadow: inset numbers.$dice-box-inset numbers.$dice-box-inset numbers.$dice-box-blur-radius colours.$dice-box-shadow; + background: assets.$dice-box-background; + margin-left: 2px; + border: numbers.$dice-box-border-width inset colours.$dice-box-border-color; + + .die { + 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; } } } diff --git a/src/style/_character-sheet.scss b/src/style/_character-sheet.scss index 85d3c48e..e57c691c 100644 --- a/src/style/_character-sheet.scss +++ b/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; - bottom: 0; + right: 4px; + bottom: 4px; padding: 8px; + overflow: auto; } } diff --git a/src/style/_colours.scss b/src/style/_colours.scss index aa6ca69b..fcf39887 100644 --- a/src/style/_colours.scss +++ b/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; + diff --git a/src/style/_numbers.scss b/src/style/_numbers.scss index 58b691f5..9ede7a57 100644 --- a/src/style/_numbers.scss +++ b/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; \ No newline at end of file +$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; \ No newline at end of file diff --git a/src/style/_rollable.scss b/src/style/_rollable.scss index aa2d0cb0..66cc25fc 100644 --- a/src/style/_rollable.scss +++ b/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; } } @@ -176,4 +199,11 @@ $rollable_colours: ( @include coloring("liturgie"); @include coloring("zauber"); @include coloring("talent"); -@include coloring("kampftalent"); \ No newline at end of file +@include coloring("kampftalent"); + +@include coloring("Körperlich"); +@include coloring("Natur"); +@include coloring("Gesellschaft"); +@include coloring("Wissen"); +@include coloring("Sprachen"); +@include coloring("Handwerk"); \ No newline at end of file diff --git a/src/style/_sidebar-elements.scss b/src/style/_sidebar-elements.scss new file mode 100644 index 00000000..a0f7b05b --- /dev/null +++ b/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%); + } + + } + + } + + } + +} \ No newline at end of file diff --git a/src/style/_tabs.scss b/src/style/_tabs.scss new file mode 100644 index 00000000..10fd0d37 --- /dev/null +++ b/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; + + } + + } + +} \ No newline at end of file diff --git a/src/style/styles.scss b/src/style/styles.scss index 71048dc3..f6b2c084 100644 --- a/src/style/styles.scss +++ b/src/style/styles.scss @@ -1,4 +1,6 @@ @use "_rollable"; @use "_lists"; @use "_attributes"; -@use "_character-sheet"; \ No newline at end of file +@use "_sidebar-elements"; +@use "_character-sheet"; +@use "_tabs"; diff --git a/src/templates/actor/actor-character-sheet.hbs b/src/templates/actor/actor-character-sheet.hbs index ff1d94f6..9f30bbf2 100644 --- a/src/templates/actor/actor-character-sheet.hbs +++ b/src/templates/actor/actor-character-sheet.hbs @@ -4,13 +4,7 @@
{{!-- Header stuff goes here --}}
-
- -
-
+
{{#each attributes}} {{> "systems/DSA_4-1/templates/ui/partial-attribute-button.hbs" this}} {{/each}} @@ -21,99 +15,152 @@

+

Kampf Daten

+ +
+
+
+
+ +
1W20+23
+
: -
+
1W6+2
+
1W6+6
+ +

Favouriten

+
{{!-- Sheet Tab Navigation --}} {{!-- Sheet Body --}}
-
+
-
+
-
+
-
+
+
+
+ +
+ +
+
{{#if this.isEditable}}

Talentwerte

    - {{#each flatSkills}} -
  • {{> "systems/DSA_4-1/templates/ui/partial-talent-editable.hbs" this}}
    • - {{/each}} + {{#each flatSkills}} +
  • {{> "systems/DSA_4-1/templates/ui/partial-talent-editable.hbs" this}}
    • + {{/each}}
{{else}} -

Körperliche Talente

-
    -
  • - {{#each skills.Körperlich}} +
    +

    Körperliche Talente

    +
    • - {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} -
      • - {{/each}} -
    -

    Gesellschaftliche Talente

    -
      -
    • - {{#each skills.Gesellschaft}} + {{#each skills.Körperlich}} +
    • + {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} +
      • + {{/each}} +
    +
    +
    +

    Gesellschaftliche Talente

    +
    • - {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} -
      • - {{/each}} -
    -

    Natur Talente

    -
      -
    • - {{#each skills.Natur}} + {{#each skills.Gesellschaft}} +
    • + {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} +
      • + {{/each}} +
    +
    +
    +

    Natur Talente

    +
    • - {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} -
      • - {{/each}} -
    -

    Wissenstalente

    -
      -
    • - {{#each skills.Wissen}} + {{#each skills.Natur}} +
    • + {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} +
      • + {{/each}} +
    +
    +
    +

    Wissenstalente

    +
    • - {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} -
      • - {{/each}} -
    -

    Schriften & Sprachen

    -
      -
    • - {{#each skills.Schriften}} + {{#each skills.Wissen}} +
    • + {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} +
      • + {{/each}} +
    +
    +
    +

    Schriften & Sprachen

    +
    • - {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} -
      • - {{/each}} - {{#each skills.Schriften}} + {{#each skills.Schriften}} +
    • + {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} +
      • + {{/each}} + {{#each skills.Schriften}} +
    • + {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} +
      • + {{/each}} +
    +
    +
    +

    Handwerkliche Talente

    +
    • - {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} -
      • - {{/each}} -
    -

    Handwerkliche Talente

    -
      -
    • - {{#each skills.Handwerk}} -
    • - {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} -
      • - {{/each}} -
    + {{#each skills.Handwerk}} +
  • + {{> "systems/DSA_4-1/templates/ui/partial-rollable-button.hbs" this}} +
    • + {{/each}} +
+
{{/if}}
+
+ +
+
+ +
+
+ +
+
+ +
+
\ No newline at end of file diff --git a/src/templates/ui/partial-attribute-button.hbs b/src/templates/ui/partial-attribute-button.hbs index 3ae6a397..fb305279 100644 --- a/src/templates/ui/partial-attribute-button.hbs +++ b/src/templates/ui/partial-attribute-button.hbs @@ -1,52 +1,12 @@ - \ No newline at end of file +
\ No newline at end of file diff --git a/src/templates/ui/partial-die.hbs b/src/templates/ui/partial-die.hbs new file mode 100644 index 00000000..966dc7d9 --- /dev/null +++ b/src/templates/ui/partial-die.hbs @@ -0,0 +1,43 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/templates/ui/partial-rollable-button.hbs b/src/templates/ui/partial-rollable-button.hbs index 675ab0cc..92bc7e45 100644 --- a/src/templates/ui/partial-rollable-button.hbs +++ b/src/templates/ui/partial-rollable-button.hbs @@ -1,49 +1,7 @@ -
+
- - - - - - - - - - - + {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }} {{#if this.taw}} {{this.taw}} {{else}} diff --git a/src/templates/ui/partial-talent-editable.hbs b/src/templates/ui/partial-talent-editable.hbs index 6db394ab..8e8a26ef 100644 --- a/src/templates/ui/partial-talent-editable.hbs +++ b/src/templates/ui/partial-talent-editable.hbs @@ -1,49 +1,7 @@
- - - - - - - - - - - + {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}