From c40b80f60af98ee002e0d9c3e1ad1b2fd53448e0 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 10 Dec 2022 02:24:14 -0600
Subject: [PATCH] Update modifier displays

---
 src/components/common/modifiers.css |  2 ++
 src/data/common.tsx                 | 17 +++++++++++-----
 src/game/modifiers.tsx              | 31 +++++++++++++++++------------
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/components/common/modifiers.css b/src/components/common/modifiers.css
index fe8071e..6842e0c 100644
--- a/src/components/common/modifiers.css
+++ b/src/components/common/modifiers.css
@@ -1,5 +1,6 @@
 .modifier-container {
     display: flex;
+    padding: 1px 8px;
 }
 
 .modifier-container:nth-child(2n) {
@@ -9,6 +10,7 @@
 .modifier-amount {
     flex-basis: 100px;
     flex-shrink: 0;
+    text-align: right;
 }
 
 .modifier-description {
diff --git a/src/data/common.tsx b/src/data/common.tsx
index 12f8ade..f23e745 100644
--- a/src/data/common.tsx
+++ b/src/data/common.tsx
@@ -305,13 +305,13 @@ export function createCollapsibleModifierSections(
             const modifiers = unref(collapsed.value[i]) ? null : (
                 <>
                     <div class="modifier-container">
+                        <span class="modifier-description">
+                            {renderJSX(unref(processed.baseText[i]) ?? "Base")}
+                        </span>
                         <span class="modifier-amount">
                             {format(unref(processed.base[i]) ?? 1)}
                             {s.unit}
                         </span>
-                        <span class="modifier-description">
-                            {renderJSX(unref(processed.baseText[i]) ?? "Base")}
-                        </span>
                     </div>
                     {renderJSX(unref(s.modifier.description))}
                 </>
@@ -328,8 +328,15 @@ export function createCollapsibleModifierSections(
                         <br />
                         {modifiers}
                         <hr />
-                        Total: {format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
-                        {s.unit}
+                        <div class="modifier-container">
+                            <span class="modifier-description">
+                                Total
+                            </span>
+                            <span class="modifier-amount">
+                                {format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
+                                {s.unit}
+                            </span>
+                        </div>
                     </div>
                 </>
             );
diff --git a/src/game/modifiers.tsx b/src/game/modifiers.tsx
index e6e5f66..dcd7e38 100644
--- a/src/game/modifiers.tsx
+++ b/src/game/modifiers.tsx
@@ -77,16 +77,16 @@ export function createAdditiveModifier<T extends AdditiveModifierOptions>(
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              <span class="modifier-amount">
-                                  {Decimal.gte(unref(processedAddend), 0) ? "+" : ""}
-                                  {format(unref(processedAddend))}
-                              </span>
                               {unref(processedDescription) ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
                                       {renderJSX(unref(processedDescription)!)}
                                   </span>
                               ) : null}
+                              <span class="modifier-amount">
+                                  {Decimal.gte(unref(processedAddend), 0) ? "+" : ""}
+                                  {format(unref(processedAddend))}
+                              </span>
                           </div>
                       ))
         };
@@ -125,15 +125,15 @@ export function createMultiplicativeModifier<T extends MultiplicativeModifierOpt
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              <span class="modifier-amount">
-                                  x{format(unref(processedMultiplier))}
-                              </span>
                               {unref(processedDescription) ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
                                       {renderJSX(unref(processedDescription)!)}
                                   </span>
                               ) : null}
+                              <span class="modifier-amount">
+                                  ×{format(unref(processedMultiplier))}
+                              </span>
                           </div>
                       ))
         };
@@ -194,9 +194,6 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              <span class="modifier-amount">
-                                  ^{format(unref(processedExponent))}
-                              </span>
                               {unref(processedDescription) ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
@@ -204,6 +201,9 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
                                       {supportLowNumbers ? " (+1 effective)" : null}
                                   </span>
                               ) : null}
+                              <span class="modifier-amount">
+                                  ^{format(unref(processedExponent))}
+                              </span>
                           </div>
                       ))
         };
@@ -279,16 +279,21 @@ export function createModifierSection(
             </h3>
             <br />
             <div class="modifier-container">
+                <span class="modifier-description">{renderJSX(baseText)}</span>
                 <span class="modifier-amount">
                     {format(base)}
                     {unit}
                 </span>
-                <span class="modifier-description">{renderJSX(baseText)}</span>
             </div>
             {renderJSX(unref(modifier.description))}
             <hr />
-            Total: {format(modifier.apply(base))}
-            {unit}
+            <div class="modifier-container">
+                <span class="modifier-description">Total</span>
+                <span class="modifier-amount">
+                    {format(modifier.apply(base))}
+                    {unit}
+                </span>
+            </div>
         </div>
     );
 }