parry -> counter

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,