parry -> counter

client/src/animations.test.jsx

@@ -80,27 +80,28 @@ const SKILLS = [
     'BlastI',
     'ChaosI',
     'ClutchI',
-    'ElectrifyI',
-    'ElectrocuteI',
-    'ElectrocuteTickI',
+    'CounterAttackI',
+    'CounterI',
     'CurseI',
     'DecayI',
     'DecayTickI',
+    'ElectrifyI',
+    'ElectrocuteI',
+    'ElectrocuteTickI',
     'HasteI',
     'HasteStrike',
+    'HatredI',
     'HealI',
     'HexI',
-    'HatredI',
     'HostilityI',
     'HybridBlast',
     'HybridI',
+    'InterceptI',
     'InvertI',
-    'ParryI',
     'PurgeI',
     'PurifyI',
     'RechargeI',
     'ReflectI',
-    'RiposteI',
     'RuinI',
     'ScatterI',
     'SilenceI',
@@ -110,7 +111,6 @@ const SKILLS = [
     'SleepI',
     'SnareI',
     'StrikeI',
-    'InterceptI',
     'ThrowI',
     'TriageI',
     'TriageTickI',

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

client/src/test.instance.js

@@ -98,7 +98,7 @@ function testInstance(uuid) {
               "cd": 2
             },
             {
-              "skill": "Parry",
+              "skill": "Counter",
               "self_targeting": true,
               "cd": 2
             }
@@ -1707,7 +1707,7 @@ function testInstance(uuid) {
               "cd": null
             },
             {
-              "skill": "Parry",
+              "skill": "Counter",
               "self_targeting": true,
               "cd": 2
             }
@@ -4010,7 +4010,7 @@ function testInstance(uuid) {
               "cd": null
             },
             {
-              "skill": "Parry",
+              "skill": "Counter",
               "self_targeting": true,
               "cd": 2
             },

client/src/utils.jsx

@@ -358,7 +358,7 @@ const removeTier = skill => {
     if (skill.includes('Hybrid')) return 'Hybrid';
     if (skill.includes('Amplify')) return 'Amplify';
 
-    if (skill.includes('Parry')) return 'Parry';
+    if (skill.includes('Counter')) return 'Counter';
     if (skill.includes('Purify')) return 'Purify';
     if (skill.includes('Electrify')) return 'Electrify';
     if (skill.includes('Electrocute')) return 'Electrocute';