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

Merge branch 'anims-change' into develop

Browse Source
This commit is contained in:
Mashy 2019-07-10 18:49:03 +10:00
commit 05af89f8b3
6 changed files with 63 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,7 @@
const preact = require('preact');
const anime = require('animejs').default;
const AttackCharge = require('./anims/attack.charge');
const Amplify = require('./anims/amplify');
const Absorb = require('./anims/absorb');
const Banish = require('./anims/banish');
const Bash = require('./anims/bash');
const Blast = require('./anims/blast');
const Block = require('./anims/block');
@ -23,7 +19,6 @@ const Haste = require('./anims/haste');
const Heal = require('./anims/heal');
const Hybrid = require('./anims/hybrid');
const Intercept = require('./anims/intercept');
const Invert = require('./anims/invert');
const Link = require('./anims/link');
const Purify = require('./anims/purify');
const Purge = require('./anims/purge');
@ -45,18 +40,6 @@ const TriageTick = require('./anims/triage.tick');
const { removeTier } = require('../utils');
const colours = {
red: '#a52a2a',
green: '#1FF01F',
blue: '#3498db',
purple: '#A25AC1',
yellow: '#d1c86a',
cyan: '#6AD1BF',
white: '#FFFFFF',
};
const { TIMES } = require('../constants');
function animations(props) {
const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props;
if (!resolution || resolution === 'clear') return false;
@ -70,67 +53,57 @@ function animations(props) {
const otherTeam = game.players.find(t => t.id !== account.id);
const otherTeamIds = otherTeam.constructs.map(c => c.id);
const sourceIsPlayer = playerTeamIds.includes(construct.id);
const sourceIsPlayer = playerTeamIds.includes(resolution.source.id);
const targetIsPlayer = playerTeamIds.includes(resolution.target.id);
const skipSource = (resolution.source.id === resolution.target.id
&& ['Invert', 'Banish'].includes(removeTier(event.skill)));
if (!skipSource && resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
const getDirection = () => {
const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer);
let y = 0;
if (!sameTeam) y = targetIsPlayer ? 1 : -1;
// const y = sameTeam
// ? 0
// : targetIsPlayer
// ? 1
// : -1;
const i = sourceIsPlayer
? playerTeamIds.findIndex(c => c === construct.id)
: otherTeamIds.findIndex(c => c === construct.id);
? playerTeamIds.findIndex(c => c === resolution.source.id)
: otherTeamIds.findIndex(c => c === resolution.source.id);
const j = targetIsPlayer
? playerTeamIds.findIndex(c => c === resolution.target.id)
: otherTeamIds.findIndex(c => c === resolution.target.id);
const x = j - i;
return { x, y };
};
const skipSource = (resolution.source.id === resolution.target.id
&& ['Invert', 'Banish'].includes(removeTier(event.skill)));
// Play Source Animation
if (!skipSource && resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
if (!avatarAnimation.source) {
setAvatarAnimation({
source: true,
target: avatarAnimation.target,
id: resolution.id,
animTargetId: construct.id,
type: 'sourceCast',
params: { x, y },
});
setAvatarAnimation(true, avatarAnimation.target, resolution.id,
construct.id, 'sourceCast', getDirection());
}
}
const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
if (!((resolution.target.id === construct.id)
|| (resolution.event[0] === 'AoeSkill' && targetTeam.includes(construct.id)))) return false;
if (!(resolution.target.id === construct.id)
&& !(resolution.event[0] === 'AoeSkill' && targetTeam.includes(construct.id))) return false;
// target animation
// Play Target animation
const anim = text => {
if (!text || !resolution.sequence[0].includes('END_SKILL')) return false;
const skill = removeTier(text);
switch (skill) {
// Attack base
case 'Attack': return <Strike colour={colours.white}/>;
case 'Blast': return <Blast />;
case 'Attack': return <Strike colour={'#f5f5f5'} direction={getDirection()}/>;
case 'Blast': return <Blast direction={getDirection()}/>;
case 'Siphon': return <Siphon />;
case 'SiphonTick': return <SiphonTick />;
case 'Strike': return <Strike colour={colours.red} id={resolution.id}/>;
case 'Chaos': return <Chaos />;
case 'Slay': return <Slay />;
case 'Strike': return <Strike colour={'#a52a2a'} direction={getDirection()}/>;
case 'Chaos': return <Chaos direction={getDirection()}/>;
case 'Slay': return <Slay direction={getDirection()}/>;
case 'Heal': return <Heal />;
// Buff Base
case 'Buff': return <Buff />;
case 'Amplify': return <Amplify/>;
case 'Amplify': return <Amplify />;
case 'Haste': return <Haste />;
case 'Triage': return <Triage />;
case 'TriageTick': return <TriageTick />;
@ -145,14 +118,8 @@ function animations(props) {
case 'DecayTick': return <Decay />;
case 'Invert': {
if (!avatarAnimation.target) {
setAvatarAnimation({
source: avatarAnimation.source,
target: true,
id: resolution.id,
animTargetId: construct.id,
type: 'invert',
});
} break;
setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'invert', null);
} return false;
}
case 'Purge': return <Purge />;
case 'Silence': return <Silence />;
@ -162,14 +129,8 @@ function animations(props) {
case 'Stun': return <Stun />;
case 'Banish': {
if (!avatarAnimation.target) {
setAvatarAnimation({
source: avatarAnimation.source,
target: true,
id: resolution.id,
animTargetId: construct.id,
type: 'banish',
});
} break;
setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'banish', null);
} return false;
}
case 'Bash': return <Bash />;
case 'Absorb': return <Absorb />;

13
client/src/components/anims/blast.jsx
View File

@ -59,17 +59,9 @@ class AttackCharge extends Component {
}
componentDidMount() {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 90,
});
} else {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 270,
});
}
anime.set('.skill-anim', {
translateY: -200,
translateY: -300 * this.props.direction.y,
translateX: -200 * this.props.direction.x,
opacity: 0,
});
@ -88,6 +80,7 @@ class AttackCharge extends Component {
anime({
targets: '.skill-anim',
translateY: 0,
translateX: 0,
loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2),

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

@ -16,7 +16,6 @@ function projectile(x, y, radius, colour) {
fill="url(#grad1)"
stroke-width="2"
stroke={colour}
id="projectile"
filter="url(#explosion)"
/>
);
@ -42,7 +41,7 @@ class AttackCharge extends Component {
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
<stop offset="100%" style={`stop-color:#A25AC1;stop-opacity:1`} />
<stop offset="100%" style={'stop-color:#A25AC1;stop-opacity:1'} />
</radialGradient>
</defs>
<filter id="explosion">
@ -57,16 +56,7 @@ class AttackCharge extends Component {
}
componentDidMount() {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 90,
});
} else {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 270,
});
}
const projectiles = document.querySelectorAll('#projectile');
const projectiles = document.querySelectorAll('.skill-anim circle');
projectiles.forEach(proj => {
const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3498db';
anime.set(proj, {
@ -75,8 +65,8 @@ class AttackCharge extends Component {
});
anime.set('.skill-anim', {
translateY: -200,
translateX: 0,
translateY: -300 * this.props.direction.y,
translateX: -200 * this.props.direction.x,
opacity: 0,
});
anime.set('#explosion feDisplacementMap', {

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

@ -17,7 +17,6 @@ function projectile(x, y, radius, colour) {
fill="url(#grad1)"
stroke-width="2"
stroke={colour}
id="projectile"
/>
);
}
@ -68,7 +67,18 @@ class AttackCharge extends Component {
}
componentDidMount() {
if (!this.props.team) {
if (this.props.direction.y) {
anime.set('#strike', {
rotate: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI,
});
console.log(Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI);
} else {
anime.set('#strike', {
rotate: 90,
});
}
/* if (!this.props.team) {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 90,
});
@ -77,7 +87,7 @@ class AttackCharge extends Component {
rotate: Math.random() * 180 + 270,
});
}
anime.set('.skill-anim', {
*/ anime.set('.skill-anim', {
translateY: -400,
translateX: 0,
opacity: 0,
@ -123,7 +133,7 @@ class AttackCharge extends Component {
delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
}));
const projectiles = document.querySelectorAll('#projectile');
const projectiles = document.querySelectorAll('.skill-anim circle');
projectiles.forEach(proj => {
this.animations.push(anime({
targets: proj,

20
client/src/components/anims/strike.jsx
View File

@ -44,7 +44,6 @@ class Strike extends Component {
id="strike"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
// {this.charges}
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
@ -62,19 +61,26 @@ class Strike extends Component {
}
componentDidMount() {
if (!this.props.team) {
console.log(this.props.direction);
/* if (this.props.direction.y) {
anime.set('#strike', {
rotate: Math.random() * 180 + 90,
rotate: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI,
});
console.log(Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI);
} else {
anime.set('#strike', {
rotate: Math.random() * 180 + 270,
rotate: 90,
});
}
*/
let rotate = 90;
if (this.props.direction.y) {
if (!this.props.direction.x) rotate = 0;
}
anime.set('#strike', {
translateY: -200,
translateX: 0,
translateY: -300 * this.props.direction.y,
translateX: -150 * this.props.direction.x,
rotate,
});
this.animations.push(anime({

4
client/src/components/game.construct.jsx
View File

@ -46,8 +46,8 @@ const addState = connect(
},
function receiveDispatch(dispatch) {
function setAvatarAnimation(c) {
return dispatch(actions.setAvatarAnimation(c));
function setAvatarAnimation(source, target, id, animTargetId, type, params) {
return dispatch(actions.setAvatarAnimation({ source, target, id, animTargetId, type, params }));
}
return {