show skill colour components during combat

client/src/components/targeting.arrows.jsx

@@ -2,12 +2,15 @@ const preact = require('preact');
 const { Component } = require('preact');
 const { connect } = require('preact-redux');
 // const anime = require('animejs').default;
-
+const reactStringReplace = require('react-string-replace');
 const throttle = require('lodash/throttle');
 
+const shapes = require('./shapes');
+const { removeTier } = require('../utils');
+
 const addState = connect(
-    ({ game, account, animTarget, animating }) =>
-        ({ game, account, animTarget, animating })
+    ({ game, account, animTarget, animating, itemInfo }) =>
+        ({ game, account, animTarget, animating, itemInfo })
 );
 
 class TargetSvg extends Component {
@@ -25,7 +28,7 @@ class TargetSvg extends Component {
     }
 
     render(props, state) {
-        const { game, account, animating, animTarget } = props;
+        const { game, account, animating, animTarget, itemInfo } = props;
         const { width, height } = state;
         if (!game) return false; // game will be null when battle ends
 
@@ -33,9 +36,17 @@ class TargetSvg extends Component {
         // just put skill name up
         if (animating) {
             if (!animTarget) return false;
-
+            const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animTarget.skill));
+            const itemSourceInfo = itemSource.length
+                ? `${itemSource[0].components[0]} ${itemSource[0].components[1]}`
+                : false;
+            const itemRegEx = /(Red|Blue|Green)/;
+            const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
             return (
+                <div>
                     <h1 class="resolving-skill">{animTarget.skill}</h1>
+                    <div class="resolving-skill"> {itemSourceDescription} </div>
+                </div>
             );
         }