From 932f96b004ca37902e0ee172e75d8aec91f693ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mang=C3=B3?= <110994627+MangoFVTT@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:14:51 +0100
Subject: [PATCH] feat(chat cards): add accordian animation on damage rolls
 (#165)

---
 src/style/chat/module.scss           | 36 ++++++++++++++++++++++++----
 src/system/documents/chat-message.ts | 11 +++------
 src/templates/chat/roll-damage.hbs   |  7 +++---
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/style/chat/module.scss b/src/style/chat/module.scss
index 2a009cd..8e8a528 100644
--- a/src/style/chat/module.scss
+++ b/src/style/chat/module.scss
@@ -418,8 +418,9 @@
                         .dice-total {
                             font-weight: bold;
                             font-size: var(--font-size-24);
-                            padding: 0;
                             font-family: var(--plotweaver-font-normal);
+                            color: var(--plotweaver-color-dark-1);
+                            padding: 0;
                             position: relative;
 
                             &.ignored {
@@ -446,6 +447,9 @@
                         }
 
                         .dice-subtotal {
+                            border-right: 1px solid var(--plotweaver-color-light-4);
+                            transition: all 200ms ease;
+
                             padding: 0 0.5rem;
                             font-weight: 600;
                             display: flex;
@@ -465,12 +469,34 @@
                                 text-transform: uppercase;
                             }
 
-                            &.right {
-                                border-left: 1px solid var(--plotweaver-color-light-4);
+                            &:last-child {
+                                border-right: 0;
                             }
 
-                            &.left {
-                                border-right: 1px solid var(--plotweaver-color-light-4);
+                            &.active {
+                                padding: 0;
+                                font-weight: bold;
+                                display: flex;
+                                flex-direction: column;
+                                width: 80%;
+
+                                &.pad-left {                                    
+                                    padding-left: 20%;
+                                }
+
+                                &.pad-right {
+                                    padding-right: 20%;
+                                }
+
+                                .value {
+                                    color: var(--plotweaver-color-dark-1);
+                                    font-size: var(--font-size-24);
+                                    font-family: var(--plotweaver-font-normal);
+                                }
+
+                                .label {
+                                    display: none;
+                                }
                             }
                         }
                     }
diff --git a/src/system/documents/chat-message.ts b/src/system/documents/chat-message.ts
index ecaf1ca..fa2ec16 100644
--- a/src/system/documents/chat-message.ts
+++ b/src/system/documents/chat-message.ts
@@ -580,19 +580,14 @@ export class CosmereChatMessage extends ChatMessage {
     private onSwitchDamageMode(event: JQuery.ClickEvent) {
         const toggle = $(event.currentTarget as HTMLElement);
 
-        if (toggle.css('opacity') === '0') return;
+        if (toggle.hasClass('active')) return;
 
         event.preventDefault();
         event.stopPropagation();
 
         this.useGraze = !this.useGraze;
-        toggle.attr('style', 'opacity: 0;');
-        toggle.siblings('.dice-subtotal').attr('style', '');
-        toggle
-            .siblings('p')
-            .text(
-                this.useGraze ? this.totalDamageGraze : this.totalDamageNormal,
-            );
+        toggle.addClass('active');
+        toggle.siblings('.dice-subtotal').removeClass('active');
     }
 
     /**
diff --git a/src/templates/chat/roll-damage.hbs b/src/templates/chat/roll-damage.hbs
index db135d7..96cd8c1 100644
--- a/src/templates/chat/roll-damage.hbs
+++ b/src/templates/chat/roll-damage.hbs
@@ -14,12 +14,11 @@
         </div>
         <div class="dice-roll-damage">            
             <h4 class="dice-total">
-                <div class="dice-subtotal left" style="opacity: 0">
+                <div class="dice-subtotal pad-left active">
                     <span class="label">{{localize "DICE.Damage.Full"}}</span>
-                    <span class="value">{{totalNormal}}</span>       
+                    <span class="value">{{totalNormal}}</span>
                 </div>
-                <p>{{totalNormal}}</p>
-                <div class="dice-subtotal right">
+                <div class="dice-subtotal pad-right ">
                     <span class="label">{{localize "DICE.Damage.Graze"}}</span>
                     <span class="value">{{totalGraze}}</span>
                 </div>