feat(rdc): Unbuffed attribute switch

Author: marcustyphoon

react-discretize-components/src/character/Character/Character.module.css

@@ -4,7 +4,18 @@
   position: relative;
   z-index: 1;
 }
+.switches {
+  display: flex;
+  gap: 1em;
+}
+.unbuffedInfo {
+  position: absolute;
+  bottom: 1em;
+  right: 1em;
+  transform: scale(1.5);
+}
 .section {
+  position: relative;
   background-color: var(--rdc-character-background-color);
   padding: 16px;
   margin-top: 12px;

react-discretize-components/src/character/Character/Character.stories.tsx

@@ -23,24 +23,47 @@ export const Example: StoryObj<typeof Character> = {
       profession: 'Elementalist',
       specialization: 'Weaver',
       data: {
-        Armor: 2514,
-        Power: 3926,
-        Precision: 2384,
-        Toughness: 1243,
-        Vitality: 1235,
-        Ferocity: 1556,
+        Power: 3860.1800000000003,
+        Toughness: 1000,
+        Vitality: 1297,
+        Precision: 2122,
+        Ferocity: 1760.74,
         'Condition Damage': 750,
         Expertise: 0,
-        Concentration: 243,
+        Concentration: 0,
+        'Agony Resistance': 0,
+        Armor: 2015,
+        Health: 14615,
+        'Critical Chance': 1.0342857142857143,
+        'Critical Damage': 2.673826666666667,
         'Healing Power': 0,
-        'Agony Resistance': 162,
-        'Condition Duration': 0.456564,
-        'Boon Duration': 0.1628776,
-        'Critical Chance': 0.876767,
-        'Critical Damage': 2.5373333333333337,
-        Health: 13995,
+        'Condition Duration': 0,
+        'Boon Duration': 0,
       },
     },
+    unbuffedAttributes: {
+      profession: 'Elementalist',
+      specialization: 'Weaver',
+      data: {
+        Power: 3290,
+        Toughness: 1000,
+        Vitality: 1297,
+        Precision: 2122,
+        Ferocity: 1618,
+        'Condition Damage': 0,
+        Expertise: 0,
+        Concentration: 0,
+        'Agony Resistance': 0,
+        Armor: 2015,
+        Health: 14615,
+        'Critical Chance': 0.6342857142857142,
+        'Critical Damage': 2.578666666666667,
+        'Healing Power': 0,
+        'Condition Duration': 0,
+        'Boon Duration': 0,
+      },
+      info: 'Simulated unbuffed attributes are not exact and may not match ingame hero panel! For example, soulbeast\'s "with axe" and "with torch/dagger" buffs are both included, simulating a scenario which doesn\'t occur in either weapon set on some builds. Use with caution.',
+    },
     armor: {
       helmAffix: 'Berserker',
       helmRuneId: 24836,

react-discretize-components/src/character/Character/Character.tsx

@@ -18,6 +18,7 @@ import classes from './Character.module.css';
 
 export interface CharacterProps {
   attributes: AttributesProps;
+  unbuffedAttributes?: AttributesProps & { info?: string };
   assumedBuffs: AssumedBuffsProps;
   armor: ArmorProps;
   weapon: WeaponsProps;
@@ -37,6 +38,7 @@ export interface CharacterProps {
 }
 const Character = ({
   attributes,
+  unbuffedAttributes,
   assumedBuffs,
   armor,
   weapon,
@@ -49,6 +51,7 @@ const Character = ({
   disableSwitch = false,
 }: CharacterProps) => {
   const [showInfusions, setShowInfusions] = React.useState(false);
+  const [showUnbuffed, setShowUnbuffed] = React.useState(false);
 
   const Section = ({
     children,
@@ -66,13 +69,19 @@ const Character = ({
   return (
     <>
       <div className={classes.top}>
-        <div>
+        <div className={classes.switches}>
           {!disableSwitch && (
             <Switch
               onChange={(e) => setShowInfusions(e.target.checked)}
               label="Show Infusions"
             />
           )}
+          {unbuffedAttributes && (
+            <Switch
+              onChange={(e) => setShowUnbuffed(e.target.checked)}
+              label="Simulate Unbuffed"
+            />
+          )}
         </div>
 
         {assumedBuffs && (
@@ -106,7 +115,14 @@ const Character = ({
 
         <div className={classes.side}>
           <Section>
-            <Attributes {...attributes} />
+            <Attributes
+              {...((showUnbuffed && unbuffedAttributes) || attributes)}
+            />
+            {showUnbuffed && unbuffedAttributes && unbuffedAttributes.info && (
+              <div className={classes.unbuffedInfo}>
+                <HelperIcon text={unbuffedAttributes.info} />
+              </div>
+            )}
           </Section>
 
           <Section>