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

wip set avatar animation in construct class

Browse Source
This commit is contained in:
Mashy 2019-07-08 20:43:31 +10:00
parent 2acb4d276f
commit 538e0a9c31
4 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/animations.jsx
View File

@ -90,17 +90,8 @@ function animations(props) {
: otherTeamIds.findIndex(c => c === resolution.target.id); : otherTeamIds.findIndex(c => c === resolution.target.id);
const x = j - i; const x = j - i;
if (avatarAnimation !== resolution.id) { if (avatarAnimation.id !== resolution.id) {
console.log(avatarAnimation); setAvatarAnimation({ id: resolution.id, animTargetId: construct.id, x, y });
setAvatarAnimation(resolution.id);
anime({
targets: [document.getElementById(construct.id)],
translateY: y * 200,
translateX: x * 200,
easing: 'easeInOutElastic',
direction: 'alternate',
duration: TIMES.SOURCE_DURATION_MS,
});
} }
} }
const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds; const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;

20
client/src/components/construct.jsx
View File

@ -1,9 +1,10 @@
const preact = require('preact'); 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 { TIMES } = require('../constants');
const genAvatar = name => { const genAvatar = name => {
let hash = 0; let hash = 0;
if (name.length === 0) return hash; if (name.length === 0) return hash;
@ -47,6 +48,12 @@ const addState = connect(
); );
class ConstructAvatar extends Component { class ConstructAvatar extends Component {
constructor() {
super();
this.animId = 0;
this.animations = [];
}
render() { render() {
return ( return (
<div <div
@ -62,6 +69,17 @@ class ConstructAvatar extends Component {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.avatarAnimation.id !== this.animId && nextProps.avatarAnimation.animTargetId === this.props.id) {
this.animId = nextProps.avatarAnimation.id;
anime({
targets: [document.getElementById(this.props.id)],
translateY: nextProps.avatarAnimation.y * 200,
translateX: nextProps.avatarAnimation.x * 200,
easing: 'easeInOutElastic',
direction: 'alternate',
duration: TIMES.SOURCE_DURATION_MS,
});
}
// console.log(this.props); // console.log(this.props);
// console.log(nextProps); // console.log(nextProps);
} }

1
client/src/events.jsx
View File

@ -89,6 +89,7 @@ function registerEvents(store) {
}); });
}, err => { }, err => {
if (err) return console.error(err); if (err) return console.error(err);
store.dispatch(actions.setAvatarAnimation({ id: -1 }));
store.dispatch(actions.setResolution(null)); store.dispatch(actions.setResolution(null));
// stop skipping resolutions // stop skipping resolutions
store.dispatch(actions.setSkip(false)); store.dispatch(actions.setSkip(false));

2
client/src/reducers.jsx
View File

@ -15,7 +15,7 @@ module.exports = {
activeConstruct: createReducer(null, 'SET_ACTIVE_CONSTRUCT'), activeConstruct: createReducer(null, 'SET_ACTIVE_CONSTRUCT'),
activeItem: createReducer(null, 'SET_ACTIVE_VAR'), activeItem: createReducer(null, 'SET_ACTIVE_VAR'),
activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'), activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'),
avatarAnimation: createReducer(null, 'SET_AVATAR_ANIMATION'), avatarAnimation: createReducer({ id: -1 }, 'SET_AVATAR_ANIMATION'),
combiner: createReducer([null, null, null], 'SET_COMBINER'), combiner: createReducer([null, null, null], 'SET_COMBINER'),
constructs: createReducer([], 'SET_CONSTRUCTS'), constructs: createReducer([], 'SET_CONSTRUCTS'),
constructDeleteId: createReducer(null, 'SET_CONSTRUCT_DELETE_ID'), constructDeleteId: createReducer(null, 'SET_CONSTRUCT_DELETE_ID'),