ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

show skill colour components during combat

Browse Source
This commit is contained in:
Mashy 2019-09-30 13:28:33 +10:00
parent 765d82bc62
commit 1737f6de6c
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/components/targeting.arrows.jsx
View File

@ -2,12 +2,15 @@ const preact = require('preact');
const { Component } = require('preact'); const { Component } = require('preact');
const { connect } = require('preact-redux'); const { connect } = require('preact-redux');
// const anime = require('animejs').default; // const anime = require('animejs').default;
const reactStringReplace = require('react-string-replace');
const throttle = require('lodash/throttle'); const throttle = require('lodash/throttle');
const shapes = require('./shapes');
const { removeTier } = require('../utils');
const addState = connect( const addState = connect(
({ game, account, animTarget, animating }) => ({ game, account, animTarget, animating, itemInfo }) =>
({ game, account, animTarget, animating }) ({ game, account, animTarget, animating, itemInfo })
); );
class TargetSvg extends Component { class TargetSvg extends Component {
@ -25,7 +28,7 @@ class TargetSvg extends Component {
} }
render(props, state) { render(props, state) {
const { game, account, animating, animTarget } = props; const { game, account, animating, animTarget, itemInfo } = props;
const { width, height } = state; const { width, height } = state;
if (!game) return false; // game will be null when battle ends if (!game) return false; // game will be null when battle ends
@ -33,9 +36,17 @@ class TargetSvg extends Component {
// just put skill name up // just put skill name up
if (animating) { if (animating) {
if (!animTarget) return false; 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 ( return (
<h1 class="resolving-skill">{animTarget.skill}</h1> <div>
<h1 class="resolving-skill">{animTarget.skill}</h1>
<div class="resolving-skill"> {itemSourceDescription} </div>
</div>
); );
} }