fixed recharge event

WORKLOG.md

@@ -30,7 +30,6 @@ Hexagon Set
 - Increase intensity for each visit
 
 _mashy_
-* add back combo preview
 * floating combat text combat (start opposite hp and float towards it) to speed up animations
 * represent construct colours during game phase (try %bar or dots)
 * buy from preview if you have the required bases in vbox / inventory

client/src/animations.utils.jsx

@@ -160,9 +160,9 @@ function getText(resolution) {
 
         if (type === 'Recharge') {
             const { red, blue } = event;
-            if (red > 0 && blue > 0) return { text: [`+${red}R +${blue}B`, ''], css: 'rb' };
-            if (red > 0) return { text: [`+${red}R`, ''], css: 'red' };
-            if (blue > 0) return { text: [`+${blue}B`, ''], css: 'blue' };
+            if (red > 0 && blue > 0) return { text: `+${red}R +${blue}B`, css: 'rb' };
+            if (red > 0) return { text: `+${red}R`, css: 'red' };
+            if (blue > 0) return { text: `+${blue}B`, css: 'blue' };
             return nullText;
         }
 

client/src/components/game.construct.jsx

@@ -23,22 +23,39 @@ class combatText extends preact.Component {
     render(props) {
         const { construct, animText, itemInfo } = props;
         if (animText && animText.constructId === construct.id) {
+            const itemSourceDescription = () => {
                 const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animText.skill));
                 const itemSourceInfo = itemSource.length
                     ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
                     : false;
                 const itemRegEx = /(Red|Blue|Green)/;
-            const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
+                return reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
+            };
 
+            const animationTextHtml = () => {
+                // monkaW hack to make red / blue recharge work nicely
+                if (animText.css === 'rb') {
+                    const text = animText.text.split(' ');
+                    return (
+                        <h1>
+                            <span class="red">{text[0]}</span>&nbsp;
+                            <span class="blue">{text[1]}</span>
+                        </h1>
+                    );
+                }
                 return (
-                <div class="combat-text">
-                    <h2>
-                        <span>{animText.skill}</span>
-                    </h2>
-                    <span>{itemSourceDescription}</span>
                     <h1 class={animText.css}>
                         <span>{animText.text}</span>
                     </h1>
+                );
+            };
+
+
+            return (
+                <div class="combat-text">
+                    <h2><span>{animText.skill}</span></h2>
+                    <span>{itemSourceDescription()}</span>
+                    {animationTextHtml()}
                 </div>
             );
         }