parry -> counter

client/src/components/animations.jsx

@@ -22,7 +22,7 @@ const Hex = require('./anims/hex');
 const Hybrid = require('./anims/hybrid');
 const Intercept = require('./anims/intercept');
 const Invert = require('./anims/invert');
-const Parry = require('./anims/parry');
+const Counter = require('./anims/counter');
 const Purify = require('./anims/purify');
 const Recharge = require('./anims/recharge');
 const Refl = require('./anims/reflect');
@@ -150,7 +150,7 @@ function animations(props) {
         case 'Electrify': return <Electrify />;
         case 'Electrocute': return <Electrocute />;
         case 'ElectrocuteTick': return <Electrocute />;
-        case 'Parry': return <Parry team={player} />;
+        case 'Counter': return <Counter team={player} />;
         case 'Purify': return <Purify team={player} />;
         case 'Recharge': return <Recharge team={player} />;
         case 'Reflect': return <Refl team={player} />;

client/src/components/anims/counter.jsx

@@ -4,7 +4,7 @@ const anime = require('animejs').default;
 
 const { TIMES } = require('../../constants');
 
-class Parry extends Component {
+class Counter extends Component {
     constructor() {
         super();
         this.animations = [];
@@ -15,25 +15,25 @@ class Parry extends Component {
             <svg
                 class='skill-animation red'
                 version="1.1"
-                id="parry"
+                id="counter"
                 xmlns="http://www.w3.org/2000/svg"
                 style={{ transform: team ? 'rotate3d(1, 0, 0, 180deg)' : '' }}
                 viewBox="0 0 256 256">
-                <filter id='parryFilter'>
+                <filter id='counterFilter'>
                     <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
                 </filter>
                 <polyline
                     points='128,168 80,240 176,240 128,168'
-                    style={{ filter: 'url("#parryFilter")' }}
+                    style={{ filter: 'url("#counterFilter")' }}
                 />
                 <polyline
                     points='176,240 212,216 128,96 44,216 80,240'
-                    style={{ filter: 'url("#parryFilter")' }}
+                    style={{ filter: 'url("#counterFilter")' }}
                 />
                 <polyline
                     points='212,216 248,192 128,24 8,192 44,216'
-                    style={{ filter: 'url("#parryFilter")' }}
+                    style={{ filter: 'url("#counterFilter")' }}
                 />
             </svg>
         );
@@ -41,7 +41,7 @@ class Parry extends Component {
 
     componentDidMount() {
         this.animations.push(anime({
-            targets: ['#parry'],
+            targets: ['#counter'],
             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 },
@@ -50,7 +50,7 @@ class Parry extends Component {
         }));
 
         this.animations.push(anime({
-            targets: ['#parry'],
+            targets: ['#counter'],
             rotateX: 180,
             delay: TIMES.TARGET_DELAY_MS * 2,
             duration: TIMES.TARGET_DURATION_MS / 2,
@@ -58,7 +58,7 @@ class Parry extends Component {
         }));
 
         this.animations.push(anime({
-            targets: ['#parryFilter feTurbulence', '#parryFilter feDisplacementMap'],
+            targets: ['#counterFilter feTurbulence', '#counterFilter feDisplacementMap'],
             baseFrequency: 2,
             scale: 10,
             numOctaves: 5,
@@ -80,4 +80,4 @@ class Parry extends Component {
     }
 }
 
-module.exports = Parry;
+module.exports = Counter;

client/src/components/anims/intercept.jsx

@@ -48,8 +48,8 @@ class Intercept extends Component {
         this.animations.push(anime({
             targets: ['#intercept'],
             transform: [
-                `scale(1) ${this.props.player ? 'rotate(180)' : ''}`,
-                `scale(3) ${this.props.player ? 'rotate(180)' : ''}`,
+                `scale(1 1) ${this.props.player ? 'rotate(180)' : ''}`,
+                `scale(30 3) ${this.props.player ? 'rotate(180)' : ''}`,
             ],
             strokeWidth: 0,
 

client/src/components/targeting.arrows.jsx

@@ -1,6 +1,7 @@
 const preact = require('preact');
 const { Component } = require('preact');
 const { connect } = require('preact-redux');
+const anime = require('animejs').default;
 
 const throttle = require('lodash/throttle');
 
@@ -16,6 +17,7 @@ class TargetSvg extends Component {
         this.onResize = throttle(() => {
             const svg = document.getElementById('targeting');
             const { width, height } = svg.getBoundingClientRect();
+            const path = document.querySelector('#targeting path');
             this.setState({ width, height });
         }, 500);
     }
@@ -104,6 +106,14 @@ class TargetSvg extends Component {
         window.addEventListener('resize', this.onResize);
         this.onResize();
         setTimeout(this.onResize, 50);
+        // anime({
+        //     targets: ['#targeting path'],
+        //     strokeDashoffset: [anime.setDashoffset, 0],
+        //     duration: 1000,
+        //     easing: 'linear',
+        //     loop: true,
+        //     delay: anime.stagger(3000),
+        // });
     }
 
     componentWillUnmount() {