show skill colour components during combat

This commit is contained in:
Mashy 2019-09-30 13:28:33 +10:00
parent 765d82bc62
commit 1737f6de6c

View File

@ -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>
);
}