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

Merge branch 'anims-change' of ssh://mnml.gg:40022/~/mnml into anims-change

Browse Source
This commit is contained in:
ntr
2019-07-05 17:37:42 +10:00
parent cbda6bc196 1bc73694ce
commit 020ca2445b
5 changed files with 128 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/animations.jsx
+14 -13
View File
@@ -24,11 +24,12 @@ 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 Recharge = require('./anims/recharge');
const Refl = require('./anims/reflect');
const Restrict = require('./anims/restrict');
const Link = require('./anims/link');
const Ruin = require('./anims/ruin');
const Siphon = require('./anims/siphon');
const SiphonTick = require('./anims/siphon.tick');
const Slay = require('./anims/slay');
@@ -62,17 +63,16 @@ function animations(props) {
if (!resolution.target) return false;
// source animation
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
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 targetIsPlayer = playerTeamIds.includes(resolution.target.id);
if (resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
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 targetIsPlayer = playerTeamIds.includes(resolution.target.id);
const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer);
const y = sameTeam
? 0
: targetIsPlayer
@@ -98,8 +98,9 @@ function animations(props) {
});
}
if (resolution.target.id !== construct.id) return false;
const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
if (!((resolution.target.id === construct.id)
|| (resolution.event[0] === 'AoeSkill' && targetTeam.includes(construct.id)))) return false;
// target animation
const anim = text => {
@@ -145,7 +146,7 @@ function animations(props) {
case 'Absorb': return <Absorb />;
case 'Sleep': return <Sleep />;
case 'Break': return <Break />;
case 'Ruin': return false;
case 'Ruin': return <Ruin />;
// Block Base
case 'Block': return <Block />;
client/src/components/anims/ruin.jsx
+85
View File
@@ -0,0 +1,85 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
// logarithmic spiral lifted from
// https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
class Ruin extends Component {
constructor() {
super();
this.animations = [];
}
render() {
const path = 'M0,100 C100,100 100,100 200,100';
return (
<svg
class='skill-animation blue'
version="1.1"
id="ruin"
xmlns="http://www.w3.org/2000/svg"
viewBox="-291 -291 582 582">
<defs>
<filter id="ruinFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g filter="url(#ruinFilter)" class="blue" >
<path
d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
/>
<path
d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
transform="rotate(120)"
style="opacity: 0.75"
/>
<path
d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
transform="rotate(240)"
style="opacity: 0.5"
/>
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#ruin'],
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
easing: 'easeInOutSine',
}));
this.animations.push(anime({
targets: ['#ruin'],
rotate: 180,
easing: 'linear',
loop: true,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
}
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
}
}
}
module.exports = Ruin;
client/src/components/game.construct.jsx
+1 -1
View File
@@ -58,7 +58,7 @@ function GameConstruct(props) {
const ko = construct.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, construct);
const classes = eventClasses(game, account, resolution, construct);
const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
<div key={j} alt={STATS[s].stat}>