flat colour siphon

client/animations.test.js

@@ -8,7 +8,7 @@ require('./assets/styles/instance.less');
 require('./assets/styles/vbox.less');
 require('./assets/styles/game.less');
 require('./assets/styles/player.less');
-require('./assets/styles/styles.mobile.css');
+require('./assets/styles/styles.mobile.less');
 require('./assets/styles/instance.mobile.less');
 
 require('./src/animations.test.jsx');

client/assets/styles/styles.less

@@ -12,6 +12,9 @@ html body {
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
+
+    overflow-x: hidden;
+    overflow-y: hidden;
 }
 
 #mnml {

client/assets/styles/styles.mobile.less

@@ -1,4 +1,8 @@
 @media (max-width: 800px) {
+    body {
+        overflow-y: initial;
+    }
+
     #mnml {
         font-size: 12pt;
         padding: 0;
@@ -11,7 +15,6 @@
         height: 100vh;
         max-height: initial;
         min-height: initial;
-        overflow-y: initial;
     }
 
     table td {

client/src/components/anims/siphon.jsx

@@ -27,12 +27,9 @@ class Siphon extends Component {
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 300 400"
+                viewBox="0 0 300 300"
                 opacity="0">
-                <filter id="blur">
+                <circle id="siphon" r="140" cx="150" cy="150" stroke="#3050f8" stroke-width="2.5%"/>
-                    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
-                </filter>
-                <circle id="siphon" r="140" cx="150" cy="150" stroke="#3050f8" stroke-width="2.5%" filter="url(#blur)"/>
             </svg>
         );
     }
@@ -53,12 +50,7 @@ class Siphon extends Component {
 
         anime({
             targets: '#siphon',
-            keyframes: [
+            r: 0,
-                { r: '110', stroke: '#1FF01F' },
-                { r: '80', stroke: '#1FF01F' },
-                { r: '50', stroke: '#3050f8' },
-                { r: '20', stroke: '#3050f8' },
-            ],
             delay: TIMES.TARGET_DELAY_MS,
             duration,
             easing: 'easeInCubic',

client/src/components/anims/siphon.tick.jsx

@@ -20,9 +20,7 @@ function projectile(x, y, radius, colour) {
             cx={x}
             cy={y}
             r={radius}
-            fill="url(#grad1)"
+            fill={colour}
-            stroke-width="0.1"
-            stroke={colour}
         />
     );
 }
@@ -44,24 +42,16 @@ class SiphonTick extends Component {
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 300 400">
+                viewBox="0 0 300 300">
                 <filter id="blur">
                     <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
                 </filter>
                 <circle id="siphon" r="20" cx="150" cy="150" stroke="#3050f8" stroke-width="2.5%" filter="url(#blur)"/>
-
-                <defs>
-                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
-                        <stop offset="0%" style="stop-color:#3050f8;stop-opacity:0.4" />
-                        <stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} />
-                    </radialGradient>
-                </defs>
                 <filter id="explosion">
                     <feGaussianBlur stdDeviation="4"/>
                     <feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
                 </filter>
-
                 {this.charges}
             </svg>
         );
@@ -84,27 +74,23 @@ class SiphonTick extends Component {
         });
 
         anime.set('#siphon', {
-            r: '80',
+            r: 0,
             stroke: '#3050f8',
         });
 
         anime({
             targets: '#siphon',
-            keyframes: [
+            r: 600,
-                { r: '50', stroke: '#3050f8' },
-                { r: '20', stroke: '#3050f8' },
-                { r: '0', stroke: '#3050f8' },
-            ],
             duration: duration * 2 / 3,
-            easing: 'easeInCubic',
+            easing: 'easeInSine',
         });
 
         const projectiles = document.querySelectorAll('.skill-anim circle');
         projectiles.forEach(proj => {
             anime({
                 targets: proj,
-                cx: Math.random() * 250 + 25,
+                cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
-                cy: Math.random() * 200 - 100,
+                cy: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
                 delay: (Math.random() * duration * 1 / 2),
                 duration,
                 easing: 'easeInQuad',