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

wip

Browse Source
This commit is contained in:
Mashy 2019-07-10 18:27:20 +10:00
parent 6f83f57bd4
commit 9ffd0f868e
5 changed files with 47 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,7 +53,7 @@ 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 getDirection = () => {
@ -62,13 +62,12 @@ function animations(props) {
if (!sameTeam) y = 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 };
};
@ -79,32 +78,32 @@ function animations(props) {
// Play Source Animation
if (!skipSource && resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
if (!avatarAnimation.source) {
setAvatarAnimation(true, avatarAnimation.target, resolution.id, construct.id, 'sourceCast', getDirection());
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;
// 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={'#f5f5f5'} direction={getDirection()}/>;
case 'Blast': return <Blast />;
case 'Blast': return <Blast direction={getDirection()}/>;
case 'Siphon': return <Siphon />;
case 'SiphonTick': return <SiphonTick />;
case 'Strike': return <Strike colour={'#a52a2a'} direction={getDirection()}/>;
case 'Chaos': return <Chaos />;
case 'Slay': return <Slay />;
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 />;
@ -120,7 +119,7 @@ function animations(props) {
case 'Invert': {
if (!avatarAnimation.target) {
setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'invert', null);
} break;
} return false;
}
case 'Purge': return <Purge />;
case 'Silence': return <Silence />;
@ -131,7 +130,7 @@ function animations(props) {
case 'Banish': {
if (!avatarAnimation.target) {
setAvatarAnimation(avatarAnimation.source, true, resolution.id, construct.id, 'banish', null);
} break;
} return false;
}
case 'Bash': return <Bash />;
case 'Absorb': return <Absorb />;
@ -152,7 +151,6 @@ function animations(props) {
default: return false;
}
return false;
};
const combatAnim = anim(event.skill);

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({