126 lines
3.7 KiB
JavaScript
126 lines
3.7 KiB
JavaScript
const preact = require('preact');
|
|
const { Component } = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
// const { match } = require('./../utils');
|
|
|
|
const banish = require('./anims/banish');
|
|
const idleAnimation = require('./anims/idle');
|
|
const invert = require('./anims/invert');
|
|
const wiggle = require('./anims/wiggle');
|
|
const sourceCast = require('./anims/source.cast');
|
|
const { ConstructAnimation } = require('./animations');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const { animSource, animTarget, animText } = state;
|
|
return { animSource, animTarget, animText };
|
|
}
|
|
);
|
|
|
|
class ConstructAvatar extends Component {
|
|
constructor(props) {
|
|
super();
|
|
// The animation ids are a check to ensure that animations are not repeated
|
|
// When a new construct animation is communicated with state it will have a corresponding Id
|
|
// which is a count of how many resoluttions have passed
|
|
this.animations = [];
|
|
this.resetAnimations = this.resetAnimations.bind(this);
|
|
}
|
|
|
|
render() {
|
|
const { construct } = this.props;
|
|
return (
|
|
<div
|
|
class="avatar"
|
|
id={construct.id}
|
|
onMouseDown={this.onClick.bind(this)}
|
|
style={{ 'background-image': `url(/imgs/${construct.img}.svg)` }}>
|
|
<ConstructAnimation construct={construct} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
onClick() {
|
|
return this.animations.push(wiggle(this.props.construct.id, this.idle));
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.idle = idleAnimation(this.props.construct.id);
|
|
return this.animations.push(this.idle);
|
|
}
|
|
|
|
resetAnimations() {
|
|
for (let i = this.animations.length - 1; i >= 0; i--) {
|
|
this.animations[i].reset();
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.resetAnimations();
|
|
}
|
|
|
|
shouldComponentUpdate(newProps) {
|
|
const { animSource, animTarget, animText, construct } = newProps;
|
|
|
|
if (construct !== this.props.construct) {
|
|
return true;
|
|
}
|
|
|
|
if (animText && animText !== this.props.animText && animText.constructId === construct.id) {
|
|
return wiggle(construct.id, this.idle);
|
|
}
|
|
|
|
if (animSource === this.props.animSource && animTarget === this.props.animTarget) {
|
|
// console.warn(construct.name, 'thinks its same props')
|
|
return false;
|
|
}
|
|
|
|
// something has changed
|
|
// what do?
|
|
|
|
// this is the source
|
|
if (animSource && animSource.constructId === construct.id) {
|
|
// console.warn(construct.name, 'should update')
|
|
return sourceCast(animSource.constructId, animSource.direction, this.idle);
|
|
}
|
|
|
|
|
|
// this is the target
|
|
if (animTarget && animTarget.constructId.includes(construct.id)) {
|
|
// console.warn(construct.name, 'should update')
|
|
switch (animTarget.skill) {
|
|
case 'Banish': return banish(construct.id, this.idle);
|
|
case 'Invert': return invert(construct.id, this.idle);
|
|
default: return null;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}
|
|
|
|
|
|
const addStateText = connect(
|
|
function receiveState(state) {
|
|
const { animText } = state;
|
|
return { animText };
|
|
}
|
|
);
|
|
|
|
function constructText(props) {
|
|
const { construct, animText } = props;
|
|
if (!construct) return false;
|
|
|
|
const text = animText && animText.constructId === construct.id
|
|
? animText.text
|
|
: construct.name;
|
|
|
|
return <h3 class={'name'}>{text}</h3>;
|
|
}
|
|
|
|
module.exports = {
|
|
ConstructAvatar: addState(ConstructAvatar),
|
|
ConstructText: addStateText(constructText),
|
|
};
|