cha0s/silphius
1
1
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: damage scaling

Browse Source
This commit is contained in:
cha0s 2024-07-30 17:21:18 -05:00
parent 83d8924517
commit d168b9b580
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/react/components/dom/damage.jsx
View File

@ -39,11 +39,18 @@ function Damage({
'--randomnessX': randomness.x, '--randomnessX': randomness.x,
'--randomnessY': randomness.y, '--randomnessY': randomness.y,
'--shimmer': damageTypeMap[damage.type], '--shimmer': damageTypeMap[damage.type],
'--uiScale': scale,
rotate: `${randomness.radians}rad`, rotate: `${randomness.radians}rad`,
zIndex, zIndex,
}} }}
> >
<p>{Math.abs(amount)}</p> <p
style={{
scale: `${scale}`,
}}
>
{Math.abs(amount)}
</p>
</div> </div>
); );
} }

11
app/react/components/dom/damage.module.css
View File

@ -13,6 +13,11 @@
inherits: false; inherits: false;
syntax: '<number>'; syntax: '<number>';
} }
@property --uiScale {
initial-value: 0;
inherits: false;
syntax: '<number>';
}
@property --shimmer { @property --shimmer {
initial-value: ''; initial-value: '';
inherits: false; inherits: false;
@ -54,7 +59,7 @@
var(--shimmer) 300ms infinite cubic-bezier(0.87, 0, 0.13, 1) var(--shimmer) 300ms infinite cubic-bezier(0.87, 0, 0.13, 1)
; ;
color: var(--foreground); color: var(--foreground);
font-size: calc(10px + (var(--magnitude) * 12px)); font-size: calc(5px + (var(--magnitude) * 6px));
opacity: var(--opacity); opacity: var(--opacity);
overflow-wrap: break-word; overflow-wrap: break-word;
position: absolute; position: absolute;
@ -86,8 +91,8 @@
--offsetY: 0; --offsetY: 0;
} }
33%, 91.6% { 33%, 91.6% {
--offsetX: calc(80 * var(--randomnessX)); --offsetX: calc(20 * var(--uiScale) * var(--randomnessX));
--offsetY: calc(-1 * (10 + var(--randomnessY) * 90)); --offsetY: calc(-1 * (10 + var(--randomnessY) * 22.5 * var(--uiScale)));
} }
} }