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

attak

Browse Source
This commit is contained in:
ntr 2019-07-23 16:01:07 +10:00
parent 4c6ee01b5d
commit eef880e052
5 changed files with 80 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/animations.test.js
View File

@ -1,6 +1,6 @@
require('./assets/styles/styles.css');
require('./assets/styles/styles.mobile.css');
require('./assets/styles/instance.css');
require('./assets/styles/instance.less');
require('./assets/styles/instance.mobile.css');
require('./assets/styles/game.css');

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

@ -28,12 +28,9 @@ function createSocket(store) {
if (animating) return false;
store.dispatch(actions.setAnimating(true));
return eachSeries(newRes, (r, cb) => {
if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
store.dispatch(actions.setResolution(r));
// convert server enum into anims keywords
// todo make serersideonly
const sequence = animations.getSequence(r);
@ -41,13 +38,15 @@ function createSocket(store) {
const anims = animations.getObjects(r, sequence, game, account);
const text = animations.getText(r, sequence);
store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r)));
if (sequence.includes('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource));
if (sequence.includes('END_SKILL')) store.dispatch(actions.setAnimTarget(anims.animTarget));
if (sequence.includes('POST_SKILL')) {
// timeout to prevent text classes from being added too soon
setTimeout(
() => store.dispatch(actions.setAnimText(text)),
timeout - 1000,
timeout - TIMES.POST_SKILL_DURATION_MS
);
}
@ -55,9 +54,11 @@ function createSocket(store) {
store.dispatch(actions.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null));
store.dispatch(actions.setAnimText(null));
return setTimeout(cb, 50);
store.dispatch(actions.setAnimFocus([]));
// We currently need another small timeout so that everything can properly dismount / unload
// Otherwise 3 x Attack on same target will only render the first time
return setTimeout(cb, 200);
}, timeout);
}, err => {
if (err) return console.error(err);
// clear animation state

74
client/src/animations.test.jsx
View File

@ -69,48 +69,48 @@ document.fonts.load('16pt "Jura"').then(() => {
});
const SKILLS = [
'AbsorbI',
'AbsorptionI',
'AmplifyI',
'Absorb',
'Absorption',
'Amplify',
'Attack',
'BanishI',
'BashI',
'BlastI',
'Banish',
'Bash',
'Blast',
'Block',
'BreakI',
'Break',
'Buff',
'ChaosI',
'CounterAttackI',
'CounterI',
'CurseI',
'Chaos',
'CounterAttack',
'Counter',
'Curse',
'Debuff',
'DecayI',
'DecayTickI',
'ElectrifyI',
'ElectrocuteI',
'ElectrocuteTickI',
'HasteI',
'Decay',
'DecayTick',
'Electrify',
'Electrocute',
'ElectrocuteTick',
'Haste',
'HasteStrike',
'HealI',
'Heal',
'HybridBlast',
'HybridI',
'InterceptI',
'InvertI',
'LinkI',
'PurgeI',
'PurifyI',
'RechargeI',
'ReflectI',
'RestrictI',
'RuinI',
'SilenceI',
'SiphonI',
'SiphonTickI',
'SlayI',
'SleepI',
'StrikeI',
'Hybrid',
'Intercept',
'Invert',
'Link',
'Purge',
'Purify',
'Recharge',
'Reflect',
'Restrict',
'Ruin',
'Silence',
'Siphon',
'SiphonTick',
'Slay',
'Sleep',
'Strike',
'Stun',
'SustainI',
'TriageI',
'TriageTickI',
'Sustain',
'Triage',
'TriageTick',
];

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

@ -3,6 +3,7 @@ const { Component } = require('preact');
const { connect } = require('preact-redux');
const Amplify = require('./anims/amplify');
const Attack = require('./anims/attack');
const Absorb = require('./anims/absorb');
const Bash = require('./anims/bash');
const Blast = require('./anims/blast');
@ -69,7 +70,7 @@ class ConstructAnimation extends Component {
const chooseAnim = (skill) => {
switch (skill) {
// Attack base
case 'Attack': return <Strike colour={'#f5f5f5'} direction={direction}/>;
case 'Attack': return <Attack direction={direction}/>;
case 'Blast': return <Blast direction={direction}/>;
case 'Siphon': return <Siphon />;
case 'SiphonTick': return <SiphonTick />;

86
client/src/components/anims/attack.jsx
View File

@ -2,81 +2,57 @@ const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const dagger = require('../svgs/dagger');
const { TIMES } = require('../../constants');
const duration = TIMES.TARGET_DURATION_MS;
const { TIMES, COLOURS } = require('../../constants');
class Attack extends Component {
constructor(props) {
super();
this.props = props;
this.animations = [];
}
render() {
return (
<svg
class={'attack-anim'}
class='attack-anim'
version="1.1"
id="Layer_1"
id="attack"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
{dagger(10, 250, 40, 150)}
{dagger(50, 250, 40, 150)}
{dagger(90, 250, 40, 150)}
{dagger(130, 250, 40, 150)}
{dagger(170, 250, 40, 150)}
{dagger(210, 250, 40, 150)}
{dagger(250, 250, 40, 150)}
viewBox="0 0 400 400">
<g>
<rect x="0" y="400" transform="skewX(45)"
width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
<rect x="200" y="400"
width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
<rect x="400" y="400" transform="skewX(-45)"
width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
</g>
</svg>
);
}
componentDidMount() {
let y = 0;
const daggers = document.querySelectorAll('.attack-anim .dagger');
anime.set(daggers, {
y: 250,
});
y = -150;
if (!this.props.team) {
anime.set('.attack-anim', {
rotate: 180,
});
} else {
anime.set('.attack-anim', {
rotate: 0,
});
this.animations.push(anime({
targets: ['#attack rect'],
easing: 'easeOutExpo',
y: [400, 200],
height: [100, 10, 0],
width: [12, 5, 0],
delay: () => anime.random(TIMES.TARGET_DELAY_MS, TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS / 2),
duration: TIMES.TARGET_DURATION_MS,
}));
}
// if (this.props.stage === 'END_SKILL') {
// anime.set(daggers, {
// y: 400,
// });
// y = -150;
// if (!this.props.team) {
// anime.set('.attack-anim', {
// rotate: 0,
// });
// } else {
// anime.set('.attack-anim', {
// rotate: 180,
// });
// }
// }
anime({
targets: daggers,
delay: anime.stagger(250, {
start: 250,
grid: [1, 7],
from: 'center',
easing: 'linear',
}),
y,
duration,
});
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
}
module.exports = Attack;