74 lines
2.6 KiB
JavaScript
74 lines
2.6 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
const reactStringReplace = require('react-string-replace');
|
|
|
|
const actions = require('../actions');
|
|
const shapes = require('./shapes');
|
|
const { INFO } = require('./../constants');
|
|
|
|
const addState = connect(
|
|
({ resolution, itemInfo, gameSkillInfo }) => ({ resolution, itemInfo, gameSkillInfo }),
|
|
|
|
function receiveDispatch(dispatch) {
|
|
function setGameEffectInfo(info) {
|
|
dispatch(actions.setGameEffectInfo(info));
|
|
}
|
|
|
|
return { setGameEffectInfo };
|
|
}
|
|
|
|
);
|
|
|
|
class GameConstructEffects extends preact.Component {
|
|
shouldComponentUpdate(newProps) {
|
|
if (newProps.resolution && newProps.resolution !== this.props.resolution) {
|
|
const [type, info] = newProps.resolution.event;
|
|
if (info.construct === this.props.construct.id
|
|
&& (type === 'Effect' || type === 'Removal')) return true;
|
|
}
|
|
if (newProps.construct !== this.props.construct) return true;
|
|
return false;
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
resolution,
|
|
construct,
|
|
gameSkillInfo,
|
|
setGameEffectInfo,
|
|
itemInfo,
|
|
} = this.props;
|
|
|
|
function hoverInfo(e, info) {
|
|
e.stopPropagation();
|
|
return setGameEffectInfo(info);
|
|
}
|
|
if (gameSkillInfo && gameSkillInfo.constructId === construct.id) {
|
|
const fullInfo = itemInfo.items.find(k => k.item === gameSkillInfo.skill) || INFO[gameSkillInfo.skill];
|
|
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
|
|
const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
|
|
const speed = <span> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </span>;
|
|
return (
|
|
<div class="skill-description">
|
|
<h2><span> {gameSkillInfo.skill} </span></h2>
|
|
<span>{infoDescription} </span> <br />
|
|
{speed}
|
|
</div>);
|
|
}
|
|
|
|
const effects = resolution ? resolution.event[1].display.effects : construct.effects;
|
|
|
|
const renderEffects = effects.length
|
|
? effects.map(c =>
|
|
<div key={c.effect}>
|
|
<span key={c.effect} onMouseOver={e => hoverInfo(e, c)}
|
|
onMouseOut={e => hoverInfo(e, null)}> {c.effect} - {c.duration}T
|
|
</span>
|
|
</div>)
|
|
: null;
|
|
return (<div class="effects"> {renderEffects} </div>);
|
|
}
|
|
}
|
|
|
|
module.exports = addState(GameConstructEffects);
|