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 ( -