75 lines
2.5 KiB
JavaScript
75 lines
2.5 KiB
JavaScript
const preact = require('preact');
|
|
const { Component } = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
const anime = require('animejs').default;
|
|
|
|
const banish = require('./anims/banish');
|
|
const idleAnimation = require('./anims/idle');
|
|
const invert = require('./anims/invert');
|
|
const sourceCast = require('./anims/source.cast');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const { avatarAnimation } = state;
|
|
return { avatarAnimation };
|
|
}
|
|
);
|
|
|
|
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.animId = 0;
|
|
this.source = false;
|
|
this.animations = [];
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div
|
|
class="avatar"
|
|
id={this.props.construct.id}
|
|
style={{ 'background-image': `url(/imgs/32809d3b-60e6-4d37-a183-e5d33374613b.svg)` }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.idle = idleAnimation(this.props.construct.id);
|
|
this.animations.push(this.idle);
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.avatarAnimation.id === -1) this.animId = 0; // The current set of resolutions ended reset to 0
|
|
if (nextProps.avatarAnimation.id !== this.animId && nextProps.avatarAnimation.animTargetId === this.props.construct.id) {
|
|
this.animId = nextProps.avatarAnimation.id;
|
|
const selectAnim = () => {
|
|
switch (nextProps.avatarAnimation.type) {
|
|
case 'banish': return banish(this.props.construct.id);
|
|
case 'invert': return invert(this.props.construct.id);
|
|
case 'sourceCast': return sourceCast(this.props.construct.id, nextProps.avatarAnimation.params);
|
|
default: return null;
|
|
}
|
|
};
|
|
const anim = selectAnim();
|
|
if (anim) {
|
|
this.idle.pause();
|
|
this.animations.push(anim);
|
|
anim.finished.then(this.idle.play);
|
|
}
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
for (let i = this.animations.length - 1; i >= 0; i--) {
|
|
this.animations[i].reset();
|
|
}
|
|
}
|
|
}
|
|
|
|
module.exports = {
|
|
ConstructAvatar: addState(ConstructAvatar),
|
|
};
|