From 1737f6de6cb36efd4726211b32b485475c9396c4 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 30 Sep 2019 13:28:33 +1000
Subject: [PATCH] show skill colour components during combat

---
 client/src/components/targeting.arrows.jsx | 23 ++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index 6ea195f1..ae7e4001 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/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 (
-                <h1 class="resolving-skill">{animTarget.skill}</h1>
+                <div>
+                    <h1 class="resolving-skill">{animTarget.skill}</h1>
+                    <div class="resolving-skill"> {itemSourceDescription} </div>
+                </div>
             );
         }