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

add aoe events cleanup client anim code

Browse Source
This commit is contained in:
Mashy
2019-12-10 20:57:19 +10:00
parent 89fb27d858
commit 5ea22ec4b3
8 changed files with 81 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/animations.utils.jsx
+16 -25
View File
@@ -1,40 +1,31 @@
const actions = require('./actions');
const { TIMES } = require('./constants');
function setAnimations(r, store, account) {
const { skill, focus, event: [type, variant] } = r;
function setAnimations(r, store) {
const { focus, event: [type, variant] } = r;
if (type === 'HitAoe') {
const { construct } = variant;
const aoeFocus = focus.concat(construct);
store.dispatch(actions.setResolution(null));
store.dispatch(actions.setAnimFocus(aoeFocus));
store.dispatch(actions.setAnimTarget(r));
return setTimeout(() => store.dispatch(actions.setAnimSource(null)), TIMES.SOURCE_DURATION_MS);
}
store.dispatch(actions.setAnimFocus(focus));
if (type === 'Cast') {
store.dispatch(actions.setResolution(null));
const { construct, player, direction: [x, y] } = variant;
const animY = y && player === account.id ? -1 : y;
const animSource = {
animation: 'sourceCast',
constructId: construct,
direction: { x, y: animY },
};
store.dispatch(actions.setAnimSource(animSource));
store.dispatch(actions.setAnimSource(r));
return setTimeout(() => store.dispatch(actions.setAnimSource(null)), TIMES.SOURCE_DURATION_MS);
}
if (type.includes('Hit')) {
if (type === 'Hit') {
store.dispatch(actions.setResolution(null));
const { construct, player, direction: [x, y] } = variant;
const animY = y && player === account.id ? -1 : y;
const isPlayer = player === account.id;
const animTarget = {
constructId: construct,
player: isPlayer,
skill,
direction: { x, y: animY },
};
store.dispatch(actions.setAnimTarget(animTarget));
store.dispatch(actions.setAnimTarget(r));
return setTimeout(() => store.dispatch(actions.setAnimTarget(null)), TIMES.TARGET_DURATION_MS);
}
client/src/components/animations.jsx
+17 -15
View File
@@ -44,8 +44,8 @@ const { removeTier } = require('../utils');
const addState = connect(
function receiveState(state) {
const { animTarget } = state;
return { animTarget };
const { animTarget, account } = state;
return { animTarget, account };
}
);
@@ -60,16 +60,18 @@ class ConstructAnimation extends Component {
const {
animTarget,
construct,
account,
} = props;
if (!animTarget) return false;
const {
skill,
player,
direction,
constructId,
} = animTarget;
const { skill, event: [, variant] } = animTarget;
const { construct: constructId, player, direction: [x, y] } = variant;
const animY = y && player === account.id ? -1 : y;
const isPlayer = player === account.id;
const direction = { x, y: animY };
const animSkill = removeTier(skill);
if (!constructId.includes(construct.id)) return false;
@@ -93,9 +95,9 @@ class ConstructAnimation extends Component {
case 'Haste': return <Haste />;
case 'Triage': return <Triage />;
case 'TriageTick': return <TriageTick />;
case 'Link': return <Link player={player} />;
case 'Link': return <Link player={isPlayer} />;
case 'Hybrid': return <Hybrid />;
case 'Intercept': return <Intercept player={player} />;
case 'Intercept': return <Intercept player={isPlayer} />;
// Debuff base
case 'Debuff': return <Debuff />;
@@ -118,15 +120,15 @@ class ConstructAnimation extends Component {
// Block Base
case 'Block': return <Block />;
case 'Sustain': return <Sustain player={player} />;
case 'Sustain': return <Sustain player={isPlayer} />;
case 'Electrify': return <Electrify />;
case 'Electrocute': return <Electrocute />;
case 'ElectrocuteTick': return <Electrocute />;
case 'Counter': return <Counter player={player} />;
case 'Counter': return <Counter player={isPlayer} />;
case 'CounterAttack': return <Attack direction={direction} />;
case 'Purify': return <Purify player={player} />;
case 'Recharge': return <Recharge player={player} />;
case 'Reflect': return <Refl player={player} />;
case 'Purify': return <Purify player={isPlayer} />;
case 'Recharge': return <Recharge player={isPlayer} />;
case 'Reflect': return <Refl player={isPlayer} />;
default: return false;
}
client/src/components/anims/triage.tick.jsx
-1
View File
@@ -20,7 +20,6 @@ function projectile(x, y, radius, colour) {
class TriageTick extends Component {
constructor(props) {
super();
this.team = props.team;
this.animations = [];
const points = randomPoints(15, 10, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 15, COLOURS.GREEN));
client/src/components/construct.jsx
+9 -7
View File
@@ -13,8 +13,8 @@ const { ConstructAnimation } = require('./animations');
const addState = connect(
function receiveState(state) {
const { animSource, animTarget, resolution } = state;
return { animSource, animTarget, resolution };
const { animSource, animTarget, resolution, account } = state;
return { animSource, animTarget, resolution, account };
}
);
@@ -62,19 +62,21 @@ class ConstructAvatar extends Component {
}
componentDidUpdate(prevProps) {
const { animSource, animTarget, resolution, construct } = this.props;
const { animSource, animTarget, resolution, construct, account } = this.props;
// a different text object and text construct
if (resolution && resolution !== prevProps.resolution && resolution.constructId === construct.id) {
if (resolution && resolution !== prevProps.resolution && resolution.event[1].construct === construct.id) {
return wiggle(construct.id, this.idle);
}
// different source object and source construct
if (animSource && animSource !== prevProps.animSource && animSource.constructId === construct.id) {
return sourceCast(animSource.constructId, animSource.direction, this.idle);
if (animSource && animSource !== prevProps.animSource && animSource.event[1].construct === construct.id) {
const { construct: constructId, player, direction: [x, y] } = animSource.event[1];
const animY = y && player === account.id ? -1 : y;
return sourceCast(constructId, { x, y: animY }, this.idle);
}
// different target object and target construct
if (animTarget && animTarget !== prevProps.animTarget && animTarget.constructId.includes(construct.id)) {
if (animTarget && animTarget !== prevProps.animTarget && animTarget.event[1].construct.includes(construct.id)) {
switch (animTarget.skill) {
case 'Banish': return banish(construct.id, this.idle);
case 'Invert': return invert(construct.id, this.idle);
client/src/components/game.construct.anim.text.jsx
+2 -10
View File
@@ -55,8 +55,8 @@ class AnimText extends preact.Component {
return <h1><span class={colour.toLowerCase()}>{amount} {mitigationText} </span></h1>;
}
if (type === 'Healing') {
const { amount, overhealing } = event;
return <h1><span>{amount} ({overhealing}OH)</span></h1>;
const { amount, overhealing, colour } = event;
return <h1><span class={colour.toLowerCase()}>{amount} ({overhealing}OH)</span></h1>;
}
if (type === 'Inversion') return <h1><span>INVERT</span></h1>;
if (type === 'Reflection') return <h1><span>REFLECT</span></h1>;
@@ -64,14 +64,6 @@ class AnimText extends preact.Component {
const { effect, duration } = event;
return <h1><span>+{effect} {duration}T</span></h1>;
}
if (type === 'Recharge') {
const { red, blue } = event;
if (red > 0 && blue > 0) {
return <h1><span class="red">`+{red}R</span><span class="blue">+{blue}B</span></h1>;
}
if (red > 0) return <h1><span class="red">`+{red}R</span></h1>;
if (blue > 0) return <h1><span class="blue">`+{blue}R</span></h1>;
}
if (type === 'Removal') {
const { effect } = event;
if (!effect) return <h1><span>Effect Removal</span></h1>;
client/src/events.jsx
+2 -2
View File
@@ -77,7 +77,7 @@ function registerEvents(store) {
}
function setGame(game) {
const { game: currentGame, account, ws, animating } = store.getState();
const { game: currentGame, ws, animating } = store.getState();
if (animating) return false;
@@ -90,7 +90,7 @@ function registerEvents(store) {
console.log(newRes);
return eachSeries(newRes, (r, cb) => {
const timeout = r.delay;
setAnimations(r, store, account);
setAnimations(r, store);
return setTimeout(cb, timeout);
}, err => {
if (err) return console.error(err);