recharge rb animation text

client/assets/styles/colours.less

@@ -169,3 +169,15 @@ button {
         color: @green;
     }
 }
+
+@keyframes rb-text {
+    0% {
+        color: @red;
+    }
+    50% {
+        color: @white;
+    }
+    100% {
+        color: @blue;
+    }
+}

client/assets/styles/game.less

@@ -275,14 +275,6 @@
     color: #a52a2a;
 }
 
-.red-damage text {
-    fill: #a52a2a;
-}
-
-.red-damage .stats {
-    /*border-top: 1px solid #a52a2a;*/
-}
-
 .game-construct.blue-damage {
     color: #3050f8;
     opacity: 1;
@@ -292,13 +284,6 @@
     color: #3050f8;
 }
 
-.blue-damage text {
-    fill: #3050f8;
-}
-
-.blue-damage .stats {
-}
-
 .game-construct.green-damage {
     color: #1FF01F;
     opacity: 1;
@@ -308,31 +293,8 @@
     color: #1FF01F;
 }
 
-.green-damage text {
-    fill: #1FF01F;
-}
-
-.green-damage .stats {
-    /*border-top: 1px solid #1FF01F;*/
-}
-
-.game-construct.purple-damage {
-/*    filter: drop-shadow(0 0 0.2em purple);
-*/    color: purple;
-    border-color: purple;
-}
-
-.purple-damage button {
-    border: 1px solid purple;
-    color: purple;
-}
-
-.purple-damage text {
-    fill: purple;
-}
-
-.purple-damage .stats {
-    border-top: 1px solid purple;
+.game-construct.rb-damage {
+    animation: rb-text 1s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite;
 }
 
 .game .img, .faceoff .img {

client/src/animations.utils.jsx

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