122 lines
3.8 KiB
JavaScript
122 lines
3.8 KiB
JavaScript
const { connect } = require('preact-redux');
|
|
const { Component } = require('preact');
|
|
const preact = require('preact');
|
|
const range = require('lodash/range');
|
|
|
|
const { STATS } = require('../utils');
|
|
const { ConstructAvatar, ConstructText } = require('./construct');
|
|
const { ConstructAnimation } = require('./animations');
|
|
const shapes = require('./shapes');
|
|
|
|
const SkillBtn = require('./skill.btn');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const {
|
|
ws,
|
|
game,
|
|
account,
|
|
activeSkill,
|
|
animFocus,
|
|
animating,
|
|
animText,
|
|
} = state;
|
|
|
|
function selectSkillTarget(targetConstructId) {
|
|
if (activeSkill) {
|
|
return ws.sendGameSkill(game.id, activeSkill.constructId, targetConstructId, activeSkill.skill);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// intercept self casting skills
|
|
if (activeSkill && activeSkill.skill.self_targeting) {
|
|
ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
|
|
}
|
|
return {
|
|
game,
|
|
account,
|
|
animating,
|
|
animFocus,
|
|
animText,
|
|
activeSkill,
|
|
selectSkillTarget,
|
|
};
|
|
}
|
|
);
|
|
|
|
const eventClasses = (animating, animFocus, construct, postSkill) => {
|
|
if (!animating) return '';
|
|
if (!postSkill) {
|
|
if (animFocus.includes(construct.id)) return '';
|
|
return 'unfocus';
|
|
}
|
|
if (postSkill.constructId !== construct.id) {
|
|
if (animFocus.includes(construct.id)) return '';
|
|
return 'unfocus';
|
|
}
|
|
if (postSkill.effects) construct.effects = postSkill.effects;
|
|
construct.green_life.value = postSkill.life.green;
|
|
construct.red_life.value = postSkill.life.red;
|
|
construct.blue_life.value = postSkill.life.blue;
|
|
return postSkill.css;
|
|
};
|
|
|
|
class GameConstruct extends Component {
|
|
constructor() {
|
|
super();
|
|
this.resolvedLength = 0;
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
i,
|
|
animating,
|
|
construct,
|
|
player,
|
|
activeSkill,
|
|
selectSkillTarget,
|
|
animFocus,
|
|
animText,
|
|
} = this.props;
|
|
|
|
const ko = construct.green_life.value === 0 ? 'ko' : '';
|
|
const classes = eventClasses(animating, animFocus, construct, animText);
|
|
|
|
const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
|
|
<div key={j} alt={STATS[s].stat}>
|
|
{shapes[s]()}
|
|
<div class="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
|
|
<div class="value" >{construct[STATS[s].stat].value}</div>
|
|
</div>
|
|
));
|
|
|
|
const skills = range(0, 3)
|
|
.map(j => <SkillBtn key={j} construct={construct} i={j} j={i} animating={animating} />);
|
|
|
|
let crypSkills = <div> </div>;
|
|
if (player && !animating) crypSkills = (<div class="skills"> {skills} </div>);
|
|
|
|
const effects = construct.effects.length
|
|
? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
|
|
: <div> </div>;
|
|
|
|
return (
|
|
<div
|
|
onClick={() => selectSkillTarget(construct.id)}
|
|
style={ activeSkill ? { cursor: 'pointer' } : {}}
|
|
class={`game-construct ${ko} ${classes}`} >
|
|
<h3 class="name"> {construct.name} </h3>
|
|
{crypSkills}
|
|
<div class="stats"> {stats} </div>
|
|
<ConstructAvatar construct={construct} />
|
|
<ConstructAnimation construct={construct} />
|
|
<ConstructText construct={construct} />
|
|
<div class="effects"> {effects} </div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = addState(GameConstruct);
|