break

client/src/animations.test.jsx

@@ -69,21 +69,21 @@ document.fonts.load('16pt "Jura"').then(() => {
 });
 
 const SKILLS = [
-    'Attack',
-    'Debuff',
-    'Buff',
-    'Block',
-    'Stun',
     'AbsorbI',
     'AbsorptionI',
     'AmplifyI',
+    'Attack',
     'BanishI',
     'BashI',
     'BlastI',
+    'Block',
+    'BreakI',
+    'Buff',
     'ChaosI',
     'CounterAttackI',
     'CounterI',
     'CurseI',
+    'Debuff',
     'DecayI',
     'DecayTickI',
     'ElectrifyI',
@@ -97,21 +97,21 @@ const SKILLS = [
     'HybridI',
     'InterceptI',
     'InvertI',
+    'LinkI',
     'PurgeI',
     'PurifyI',
     'RechargeI',
     'ReflectI',
     'RestrictI',
     'RuinI',
-    'LinkI',
     'SilenceI',
     'SiphonI',
     'SiphonTickI',
     'SlayI',
     'SleepI',
     'StrikeI',
+    'Stun',
     'SustainI',
-    'BreakI',
     'TriageI',
     'TriageTickI',
 ];

client/src/components/anims/break.jsx

@@ -2,7 +2,7 @@ const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
 
-const { TIMES } = require('../../constants');
+const { TIMES, COLOURS } = require('../../constants');
 
 // logarithmic spiral lifted from
 // https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
@@ -18,7 +18,7 @@ class Break extends Component {
 
         return (
             <svg
-                class='skill-animation red'
+                class='skill-animation green'
                 version="1.1"
                 id="break"
                 xmlns="http://www.w3.org/2000/svg"
@@ -43,6 +43,11 @@ class Break extends Component {
                         style="opacity: 0.5"
                     />
                 </g>
+                <g filter="url(#breakFilter)" stroke={COLOURS.RED}>
+                    <circle cx="0" cy="0" r="30" />
+                    <circle cx="0" cy="0" r="60" />
+                    <circle cx="0" cy="0" r="90" />
+                </g>
             </svg>
         );
     }
@@ -66,6 +71,15 @@ class Break extends Component {
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
+        this.animations.push(anime({
+            targets: ['#break circle'],
+            easing: 'easeInSine',
+            strokeWidth: [10, 2],
+            r: 300,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+
         this.animations.push(anime({
             targets: ['#breakFilter feTurbulence', '#breakFilter feDisplacementMap'],
             baseFrequency: 2,