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.css');
require('./assets/styles/styles.mobile.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/instance.mobile.css');
require('./assets/styles/game.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; if (animating) return false;
store.dispatch(actions.setAnimating(true)); store.dispatch(actions.setAnimating(true));
return eachSeries(newRes, (r, cb) => { return eachSeries(newRes, (r, cb) => {
if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
store.dispatch(actions.setResolution(r));
// convert server enum into anims keywords // convert server enum into anims keywords
// todo make serersideonly // todo make serersideonly
const sequence = animations.getSequence(r); const sequence = animations.getSequence(r);
@ -41,13 +38,15 @@ function createSocket(store) {
const anims = animations.getObjects(r, sequence, game, account); const anims = animations.getObjects(r, sequence, game, account);
const text = animations.getText(r, sequence); 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('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource));
if (sequence.includes('END_SKILL')) store.dispatch(actions.setAnimTarget(anims.animTarget)); if (sequence.includes('END_SKILL')) store.dispatch(actions.setAnimTarget(anims.animTarget));
if (sequence.includes('POST_SKILL')) { if (sequence.includes('POST_SKILL')) {
// timeout to prevent text classes from being added too soon // timeout to prevent text classes from being added too soon
setTimeout( setTimeout(
() => store.dispatch(actions.setAnimText(text)), () => 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.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null)); store.dispatch(actions.setAnimTarget(null));
store.dispatch(actions.setAnimText(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); }, timeout);
}, err => { }, err => {
if (err) return console.error(err); if (err) return console.error(err);
// clear animation state // clear animation state

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

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

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

@ -3,6 +3,7 @@ const { Component } = require('preact');
const { connect } = require('preact-redux'); const { connect } = require('preact-redux');
const Amplify = require('./anims/amplify'); const Amplify = require('./anims/amplify');
const Attack = require('./anims/attack');
const Absorb = require('./anims/absorb'); const Absorb = require('./anims/absorb');
const Bash = require('./anims/bash'); const Bash = require('./anims/bash');
const Blast = require('./anims/blast'); const Blast = require('./anims/blast');
@ -69,7 +70,7 @@ class ConstructAnimation extends Component {
const chooseAnim = (skill) => { const chooseAnim = (skill) => {
switch (skill) { switch (skill) {
// Attack base // Attack base
case 'Attack': return <Strike colour={'#f5f5f5'} direction={direction}/>; case 'Attack': return <Attack direction={direction}/>;
case 'Blast': return <Blast direction={direction}/>; case 'Blast': return <Blast direction={direction}/>;
case 'Siphon': return <Siphon />; case 'Siphon': return <Siphon />;
case 'SiphonTick': return <SiphonTick />; 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 { Component } = require('preact');
const anime = require('animejs').default; const anime = require('animejs').default;
const dagger = require('../svgs/dagger'); const { TIMES, COLOURS } = require('../../constants');
const { TIMES } = require('../../constants');
const duration = TIMES.TARGET_DURATION_MS;
class Attack extends Component { class Attack extends Component {
constructor(props) { constructor(props) {
super(); super();
this.props = props; this.props = props;
this.animations = [];
} }
render() { render() {
return ( return (
<svg <svg
class={'attack-anim'} class='attack-anim'
version="1.1" version="1.1"
id="Layer_1" id="attack"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400"> viewBox="0 0 400 400">
{dagger(10, 250, 40, 150)} <g>
{dagger(50, 250, 40, 150)} <rect x="0" y="400" transform="skewX(45)"
{dagger(90, 250, 40, 150)} width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
{dagger(130, 250, 40, 150)} <rect x="200" y="400"
{dagger(170, 250, 40, 150)} width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
{dagger(210, 250, 40, 150)} <rect x="400" y="400" transform="skewX(-45)"
{dagger(250, 250, 40, 150)} width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
</g>
</svg> </svg>
); );
} }
componentDidMount() { componentDidMount() {
let y = 0; this.animations.push(anime({
const daggers = document.querySelectorAll('.attack-anim .dagger'); targets: ['#attack rect'],
anime.set(daggers, { easing: 'easeOutExpo',
y: 250, y: [400, 200],
}); height: [100, 10, 0],
y = -150; width: [12, 5, 0],
if (!this.props.team) { delay: () => anime.random(TIMES.TARGET_DELAY_MS, TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS / 2),
anime.set('.attack-anim', { duration: TIMES.TARGET_DURATION_MS,
rotate: 180, }));
});
} else {
anime.set('.attack-anim', {
rotate: 0,
});
} }
// if (this.props.stage === 'END_SKILL') { // this is necessary because
// anime.set(daggers, { // skipping / timing / unmounting race conditions
// y: 400, // can cause the animations to cut short, this will ensure the values are reset
// }); // because preact will recycle all these components
// y = -150; componentWillUnmount() {
// if (!this.props.team) { for (let i = this.animations.length - 1; i >= 0; i--) {
// anime.set('.attack-anim', { this.animations[i].reset();
// 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,
});
} }
}
} }
module.exports = Attack; module.exports = Attack;