From 51edec11fd97b9d0bdf1e59d2111409c9743f44f Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Thu, 28 Nov 2019 14:54:35 +1000
Subject: [PATCH] fixed recharge event

---
 WORKLOG.md                               |  1 -
 client/src/animations.utils.jsx          |  6 ++--
 client/src/components/game.construct.jsx | 41 +++++++++++++++++-------
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/WORKLOG.md b/WORKLOG.md
index 39803600..d254b298 100644
--- a/WORKLOG.md
+++ b/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
diff --git a/client/src/animations.utils.jsx b/client/src/animations.utils.jsx
index 1e0dd81b..461abe84 100644
--- a/client/src/animations.utils.jsx
+++ b/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;
         }
 
diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx
index 58579c6a..2f1c0617 100644
--- a/client/src/components/game.construct.jsx
+++ b/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 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]());
+            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)/;
+                return reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
+            };
 
-            return (
-                <div class="combat-text">
-                    <h2>
-                        <span>{animText.skill}</span>
-                    </h2>
-                    <span>{itemSourceDescription}</span>
+            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 (
                     <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>
             );
         }