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

fix animations with stroke issues

Browse Source
This commit is contained in:
ntr 2019-11-09 13:32:25 +11:00
parent b268c2997e
commit 0d727813d5
4 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/animations.test.js
View File

@ -1,14 +1,3 @@
require('./assets/styles/styles.less'); require('./assets/styles/styles.less');
require('./assets/styles/menu.less');
require('./assets/styles/nav.less');
require('./assets/styles/footer.less');
require('./assets/styles/account.less');
require('./assets/styles/controls.less');
require('./assets/styles/instance.less');
require('./assets/styles/vbox.less');
require('./assets/styles/game.less');
require('./assets/styles/player.less');
require('./assets/styles/styles.mobile.less');
require('./assets/styles/instance.mobile.less');
require('./src/animations.test.jsx'); require('./src/animations.test.jsx');

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

@ -30,46 +30,54 @@ function createSocket(store) {
if (animating) return false; if (animating) return false;
store.dispatch(actions.setAnimating(true)); store.dispatch(actions.setAnimating(true));
// stop fetching the game state til animations are done // stop fetching the game state til animations are done
return eachSeries(newRes, (r, cb) => { return eachSeries(newRes, (r, cb) => {
if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); if (!r.event) return cb();
const timeout = animations.getTime(r.stages);
// convert server enum into anims keywords const anims = animations.getObjects(r, game, account);
// todo make serersideonly const text = animations.getText(r);
const sequence = animations.getSequence(r);
const timeout = animations.getTime(sequence);
const anims = animations.getObjects(r, sequence, game, account);
const text = animations.getText(r, sequence);
store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game))); store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game)));
if (anims.animSkill) store.dispatch(actions.setAnimSkill(anims.animSkill));
if (sequence.includes('START_SKILL') && anims.animSource) store.dispatch(actions.setAnimSource(anims.animSource)); if (r.stages.includes('START_SKILL') && anims.animSource) {
if (sequence.includes('END_SKILL') && anims.animTarget) { store.dispatch(actions.setAnimSource(anims.animSource));
}
if (r.stages.includes('END_SKILL') && anims.animTarget) {
store.dispatch(actions.setAnimTarget(anims.animTarget)); store.dispatch(actions.setAnimTarget(anims.animTarget));
if (!['Banish', 'Invert'].includes(removeTier(anims.animTarget.skill))) store.dispatch(actions.setAnimCb(cb)); if (animations.isCbAnim(anims.animSkill)) store.dispatch(actions.setAnimCb(cb));
} }
if (sequence.includes('POST_SKILL' && text)) {
if (r.stages.includes('POST_SKILL') && text) {
// timeout to prevent text classes from being added too soon // timeout to prevent text classes from being added too soon
setTimeout( if (timeout === TIMES.POST_SKILL_DURATION_MS) {
() => store.dispatch(actions.setAnimText(text)), store.dispatch(actions.setAnimText(text));
timeout - TIMES.POST_SKILL_DURATION_MS } else {
); setTimeout(
() => store.dispatch(actions.setAnimText(text)),
timeout - TIMES.POST_SKILL_DURATION_MS
);
}
} }
return setTimeout(() => { return setTimeout(() => {
store.dispatch(actions.setAnimSkill(null));
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));
store.dispatch(actions.setAnimFocus([])); store.dispatch(actions.setAnimFocus([]));
if (!sequence.includes('END_SKILL') if (r.stages.includes('END_SKILL') && animations.isCbAnim(anims.animSkill)) return true;
|| ['Banish', 'Invert'].includes(removeTier(anims.animTarget.skill))) return cb(); return cb();
return true;
}, timeout); }, timeout);
}, err => { }, err => {
if (err) return console.error(err); if (err) return console.error(err);
// clear animation state // clear animation state
store.dispatch(actions.setAnimSkill(null));
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));
store.dispatch(actions.setAnimating(false)); store.dispatch(actions.setAnimating(false));
store.dispatch(actions.setGameEffectInfo(null));
store.dispatch(actions.setSkip(false)); store.dispatch(actions.setSkip(false));
// set the game state so resolutions don't fire twice // set the game state so resolutions don't fire twice

1
client/src/components/anims/chaos.jsx
View File

@ -20,6 +20,7 @@ function projectile(x, y, radius, colour) {
cy={y} cy={y}
r={radius} r={radius}
fill={colour} fill={colour}
stroke="none"
filter={colour === '#a52a2a' ? 'url(#chaosRedFilter)' : 'url(#chaosBlueFilter)'} filter={colour === '#a52a2a' ? 'url(#chaosRedFilter)' : 'url(#chaosBlueFilter)'}
/> />
); );

3
client/src/components/anims/slay.jsx
View File

@ -20,6 +20,7 @@ function projectile(x, y, radius, colour) {
<circle <circle
cx={x} cx={x}
cy={y} cy={y}
stroke="none"
r={radius} r={radius}
fill={colour} fill={colour}
/> />
@ -28,7 +29,7 @@ function projectile(x, y, radius, colour) {
function sword(colour) { function sword(colour) {
return ( return (
<polygon points='150,150 100,75, 150,300, 200,75' fill={colour} id="sword" filter="url(#slayFilter)"></polygon> <polygon points='150,150 100,75, 150,300, 200,75' stroke="none" fill={colour} id="sword" filter="url(#slayFilter)"></polygon>
); );
} }