feat(chat cards): add accordian animation on damage rolls (#165)

the-metalworks · Nov 20, 2024 · 932f96b · 932f96b
1 parent 0e392fe
commit 932f96b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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>