From d55e1fecf312fdca69f61a37630731113f635019 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 4 Jul 2019 18:30:16 +1000 Subject: [PATCH] added clutch --- client/assets/styles/game.css | 2 +- client/src/components/animations.jsx | 19 ++-- client/src/components/anims/clutch.jsx | 140 +++++++++++++++++++++++++ client/src/components/anims/purify.jsx | 3 - 4 files changed, 151 insertions(+), 13 deletions(-) create mode 100644 client/src/components/anims/clutch.jsx diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index c64ad48b..f0935718 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -206,7 +206,7 @@ font-size: 2em; font-family: 'Jura'; position: absolute; - top: 15%; + top: 5%; } .combat-text svg { diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx index 4ecfc4a4..5190461f 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -9,30 +9,31 @@ const Banish = require('./anims/banish'); const Bash = require('./anims/bash'); const Block = require('./anims/block'); const Buff = require('./anims/buff'); +const Chaos = require('./anims/chaos'); +const Clutch = require('./anims/clutch'); +const Curse = require('./anims/curse'); const Debuff = require('./anims/debuff'); const Decay = require('./anims/decay'); -const Curse = require('./anims/curse'); const Electrify = require('./anims/electrify'); const Electrocute = require('./anims/electrocute'); const Haste = require('./anims/haste'); -const Stun = require('./anims/stun'); const Heal = require('./anims/heal'); const Hex = require('./anims/hex'); const Hybrid = require('./anims/hybrid'); -const Strike = require('./anims/strike'); +const Intercept = require('./anims/intercept'); +const Invert = require('./anims/invert'); const Parry = require('./anims/parry'); const Purify = require('./anims/purify'); const Recharge = require('./anims/recharge'); const Refl = require('./anims/reflect'); -const Chaos = require('./anims/chaos'); -const Invert = require('./anims/invert'); const Slay = require('./anims/slay'); -const Intercept = require('./anims/intercept'); const Sleep = require('./anims/sleep'); -const Triage = require('./anims/triage'); -const TriageTick = require('./anims/triage.tick'); const Siphon = require('./anims/siphon'); const SiphonTick = require('./anims/siphon.tick'); +const Strike = require('./anims/strike'); +const Stun = require('./anims/stun'); +const Triage = require('./anims/triage'); +const TriageTick = require('./anims/triage.tick'); // const Test = require('./anims/test'); @@ -145,7 +146,7 @@ function animations(props) { // Block Base case 'Block': return ; - case 'Clutch': return false; + case 'Clutch': return ; case 'Electrify': return ; case 'Electrocute': return ; case 'ElectrocuteTick': return ; diff --git a/client/src/components/anims/clutch.jsx b/client/src/components/anims/clutch.jsx new file mode 100644 index 00000000..c23a3947 --- /dev/null +++ b/client/src/components/anims/clutch.jsx @@ -0,0 +1,140 @@ +const preact = require('preact'); +const { Component } = require('preact'); +const anime = require('animejs').default; + +const { TIMES, COLOURS } = require('../../constants'); + +class Clutch extends Component { + constructor() { + super(); + this.animations = []; + } + + render({ team }) { + return ( + + + + + + + + + + ); + } + + componentDidMount() { + this.animations.push(anime({ + targets: ['#clutch'], + opacity: [ + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 }, + { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.8, duration: TIMES.TARGET_DURATION_MS * 0.2 }, + ], + easing: 'easeInOutSine', + })); + + this.animations.push(anime({ + targets: ['#stageOne'], + points: '128,168 80,240 176,240 128,168', + keyframes: [ + { + stroke: [COLOURS.GREEN, COLOURS.RED], + fill: [null, COLOURS.RED], + delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.2, + duration: TIMES.TARGET_DURATION_MS * 0.6, + easing: 'easeInOutSine', + }, + ], + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, + })); + + this.animations.push(anime({ + targets: ['#stageTwo'], + keyframes: [ + { + stroke: [COLOURS.GREEN, COLOURS.RED], + fill: [null, COLOURS.RED], + delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.5, + duration: TIMES.TARGET_DURATION_MS * 0.6, + easing: 'easeInOutSine', + }, + ], + points: '176,240 212,216 128,96 44,216 80,240', + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, + })); + + this.animations.push(anime({ + targets: ['#stageThree'], + keyframes: [ + { + stroke: [COLOURS.GREEN, COLOURS.RED], + fill: [null, COLOURS.RED], + delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.8, + duration: TIMES.TARGET_DURATION_MS * 0.4, + easing: 'easeInOutSine', + }, + ], + points: '212,216 248,192 128,24 8,192 44,216', + delay: TIMES.TARGET_DELAY_MS, + duration: TIMES.TARGET_DURATION_MS, + })); + + this.animations.push(anime({ + targets: ['#clutchFilter feTurbulence', '#clutchFilter feDisplacementMap'], + baseFrequency: 2, + scale: 10, + numOctaves: 5, + easing: 'easeOutSine', + delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.4, + duration: TIMES.TARGET_DURATION_MS * 0.3 + TIMES.POST_SKILL_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 = Clutch; + + +/* + + +*/ \ No newline at end of file diff --git a/client/src/components/anims/purify.jsx b/client/src/components/anims/purify.jsx index 578224b1..fb3c02fe 100644 --- a/client/src/components/anims/purify.jsx +++ b/client/src/components/anims/purify.jsx @@ -23,15 +23,12 @@ class Purify extends Component { super(); this.animations = []; const points = [ - [128, 168], [80, 240], [176, 240], [212, 216], - [128, 96], [44, 216], [80, 240], [248, 192], - [128, 24], [8, 192], ]; this.charges = points.map(coord => projectile(coord[0], coord[1], 12, COLOURS.GREEN));