From d168b9b5802f6da158200969598880816d6bcfd2 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Tue, 30 Jul 2024 17:21:18 -0500
Subject: [PATCH] refactor: damage scaling

---
 app/react/components/dom/damage.jsx        |  9 ++++++++-
 app/react/components/dom/damage.module.css | 11 ++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/react/components/dom/damage.jsx b/app/react/components/dom/damage.jsx
index 10ee786..920d29b 100644
--- a/app/react/components/dom/damage.jsx
+++ b/app/react/components/dom/damage.jsx
@@ -39,11 +39,18 @@ function Damage({
         '--randomnessX': randomness.x,
         '--randomnessY': randomness.y,
         '--shimmer': damageTypeMap[damage.type],
+        '--uiScale': scale,
         rotate: `${randomness.radians}rad`,
         zIndex,
       }}
     >
-      <p>{Math.abs(amount)}</p>
+      <p
+        style={{
+          scale: `${scale}`,
+        }}
+      >
+        {Math.abs(amount)}
+      </p>
     </div>
   );
 }
diff --git a/app/react/components/dom/damage.module.css b/app/react/components/dom/damage.module.css
index c37b271..5dc575c 100644
--- a/app/react/components/dom/damage.module.css
+++ b/app/react/components/dom/damage.module.css
@@ -13,6 +13,11 @@
   inherits: false;
   syntax: '<number>';
 }
+@property --uiScale {
+  initial-value: 0;
+  inherits: false;
+  syntax: '<number>';
+}
 @property --shimmer {
   initial-value: '';
   inherits: false;
@@ -54,7 +59,7 @@
     var(--shimmer) 300ms infinite cubic-bezier(0.87, 0, 0.13, 1)
   ;
   color: var(--foreground);
-  font-size: calc(10px + (var(--magnitude) * 12px));
+  font-size: calc(5px + (var(--magnitude) * 6px));
   opacity: var(--opacity);
   overflow-wrap: break-word;
   position: absolute;
@@ -86,8 +91,8 @@
     --offsetY: 0;
   }
   33%, 91.6% {
-    --offsetX: calc(80 * var(--randomnessX));
-    --offsetY: calc(-1 * (10 + var(--randomnessY) * 90));
+    --offsetX: calc(20 * var(--uiScale) * var(--randomnessX));
+    --offsetY: calc(-1 * (10 + var(--randomnessY) * 22.5 * var(--uiScale)));
   }
 }