From 1ba056c41b637e82c95814acac6390140260b2f5 Mon Sep 17 00:00:00 2001
From: macniel <yuna.baehr@proton.me>
Date: Wed, 8 Oct 2025 14:36:24 +0200
Subject: [PATCH] adds styling to quick-glance resource bars

---
 src/module/sheets/characterSheet.mjs          |  2 +
 src/module/sheets/liturgySheet.mjs            |  4 +-
 src/style/_sidebar-elements.scss              | 31 +++++++++++++-
 src/templates/actor/actor-character-sheet.hbs | 41 +++++++++++++++++--
 4 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/src/module/sheets/characterSheet.mjs b/src/module/sheets/characterSheet.mjs
index 4dd53336..b0d6aa32 100644
--- a/src/module/sheets/characterSheet.mjs
+++ b/src/module/sheets/characterSheet.mjs
@@ -267,6 +267,8 @@ export class CharacterSheet extends ActorSheet {
 
         context.aupper = Math.min((context.actor.system.aup.aktuell / context.actor.system.aup.max) * 100, 100);
         context.lepper = Math.min((context.actor.system.lep.aktuell / context.actor.system.lep.max) * 100, 100);
+        context.keper = Math.min((context.actor.system.kap.aktuell / context.actor.system.kap.max) * 100, 100);
+        context.aspper = Math.min((context.actor.system.asp.aktuell / context.actor.system.asp.max) * 100, 100);
         context.lepcurrent = context.actor.system.lep.aktuell ?? 0
 
         context.aupcurrent = context.actor.system.aup.aktuell ?? 0
diff --git a/src/module/sheets/liturgySheet.mjs b/src/module/sheets/liturgySheet.mjs
index ec850750..0a531f9a 100644
--- a/src/module/sheets/liturgySheet.mjs
+++ b/src/module/sheets/liturgySheet.mjs
@@ -42,7 +42,9 @@ export class LiturgySheet extends ItemSheet {
         super.activateListeners(html);
 
         // Everything below here is only needed if the sheet is editable
-        if (!this.isEditable)
+        if (this.isEditable) {
+
+        }
     }
 
 }
diff --git a/src/style/_sidebar-elements.scss b/src/style/_sidebar-elements.scss
index e48c6bcb..f774031b 100644
--- a/src/style/_sidebar-elements.scss
+++ b/src/style/_sidebar-elements.scss
@@ -51,6 +51,8 @@
           line-height: 24px;
           vertical-align: middle;
           text-indent: 8px;
+          color: white;
+          text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
         }
 
         span.resource-fill {
@@ -58,9 +60,36 @@
           left: 0;
           top: 0;
           bottom: 0;
-          background: linear-gradient(to bottom, #0bad29 0%, #11f128 50%, #0cde24 51%, #6ff77b 100%);
+          background: url('../assets/gradient.png');
+          background-size: 32px 100%;
+
+          &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+          }
+
+          &.lep::after {
+            background-color: rgba(0, 192, 96, 0.5);
+          }
+
+          &.aup::after {
+            background-color: rgba(192, 166, 0, 0.5);
+          }
+
+          &.asp::after {
+            background-color: rgba(0, 26, 192, 0.5);
+          }
+
+          &.kap::after {
+            background-color: rgba(128, 0, 192, 0.5);
+          }
         }
 
+
       }
 
     }
diff --git a/src/templates/actor/actor-character-sheet.hbs b/src/templates/actor/actor-character-sheet.hbs
index ac7bc9db..5e66e3fa 100644
--- a/src/templates/actor/actor-character-sheet.hbs
+++ b/src/templates/actor/actor-character-sheet.hbs
@@ -18,9 +18,24 @@
         <h2 class="sidebar-element header">Kampf Daten</h2>
 
         <div class="sidebar-element resource-bar">
-            <label>LeP: {{this.lep}}</label><span class="resource-fill" style="width: {{this.lepper}}%"></span></div>
+            <label>LeP: {{this.lep}}</label><span class="resource-fill lep" style="width: {{this.lepper}}%"></span>
+        </div>
+
         <div class="sidebar-element resource-bar">
-            <label>AuP: {{this.aup}}</label><span class="resource-fill" style="width: {{this.aupper}}%"></span></div>
+            <label>AuP: {{this.aup}}</label><span class="resource-fill aup" style="width: {{this.aupper}}%"></span>
+        </div>
+
+        {{#if this.hasLiturgies}}
+            <div class="sidebar-element resource-bar">
+                <label>KE: {{this.ke}}</label><span class="resource-fill kap" style="width: {{this.keper}}%"></span>
+            </div>
+        {{/if}}
+
+        {{#if this.hasSpells}}
+            <div class="sidebar-element resource-bar">
+                <label>AsP: {{this.asp}}</label><span class="resource-fill asp" style="width: {{this.aspper}}%"></span>
+            </div>
+        {{/if}}
 
         {{#each attacks}}
             <div>
@@ -334,9 +349,29 @@
                         </tr>
                         </thead>
                         <tbody>
-                        {{#if this.countI}}
+                        {{#if this.countO}}
                             <tr>
                                 <th rowspan="{{this.total}}" class="background"></th>
+                                <th class="banner-mid" rowspan="{{countO}}">
+                                    <div>
+                                        <div class="rank-label">0</div>
+                                    </div>
+                                </th>
+                            </tr>
+                            {{#each this.O}}
+                                <tr>
+                                    <td class="liturgy rollable" data-id="{{this.id}}" data-rank="{{this.rank}}"
+                                        data-lkp="{{../lkp}}" data-deity="{{this.deity}}">
+                                        {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}
+                                    </td>
+                                    <td class="clickable" data-id="{{this.id}}" data-operation="openActorSheet">
+                                        {{this.name}}</td>
+                                    <td></td>
+                                </tr>
+                            {{/each}}
+                        {{/if}}
+                        {{#if this.countI}}
+                            <tr>
                                 <th class="banner-mid" rowspan="{{countI}}">
                                     <div>
                                         <div class="rank-label">I</div>