Merge branch 'core' of ssh://git.mnml.gg:40022/~/mnml into core

client/src/components/anims/chaos.jsx

@@ -8,8 +8,8 @@ const { randomPoints } = require('../../utils');
 function projectile(x, y, radius, colour) {
     return (
         <circle
-            cx={x}
+            cx={anime.random(-400, 400)}
-            cy={y}
+            cy={anime.random(-400, 400)}
             r={radius}
             fill={colour}
             stroke={colour === '#a52a2a' ? 'none' : '#f5f5f5'}
@@ -23,7 +23,7 @@ class Chaos extends Component {
     constructor() {
         super();
         this.animations = [];
-        const points = randomPoints(20, 30, { x: 0, y: 0, width: 300, height: 100 });
+        const points = randomPoints(20, 30, { x: 0, y: 0, width: 1000, height: 1000 });
         this.charges = points.map(coord => {
             const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8';
             return projectile(coord[0], coord[1], '0.5em', colour);
@@ -58,37 +58,12 @@ class Chaos extends Component {
 
     componentDidMount() {
         const projectiles = document.querySelectorAll('.skill-anim circle');
-        anime.set('.skill-anim', {
-            translateY: -(window.innerHeight) * 0.35 * this.props.direction.y,
-            translateX: -(window.innerWidth) * 0.15 * this.props.direction.x,
-            opacity: 0,
-        });
-
-        this.animations.push(anime({
-            targets: '.skill-anim',
-            opacity: [
-                { value: 1, duration: TIMES.TARGET_DURATION_MS * 0.3 },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
-            ],
-        }));
-
-
-        this.animations.push(anime({
-            targets: '.skill-anim',
-            translateY: 0,
-            translateX: 0,
-            loop: false,
-            duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
-            easing: 'easeInQuad',
-        }));
-
         this.animations.push(anime({
             targets: ['#chaosRedFilter feTurbulence', '#chaosRedFilter feDisplacementMap'],
             baseFrequency: 2,
             scale: 5,
             numOctaves: 3,
             easing: 'easeOutSine',
-
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -96,11 +71,9 @@ class Chaos extends Component {
             targets: proj,
             cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
             cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
-            // cx: 150,
+            duration: anime.random(TIMES.TARGET_DURATION_MS * 2 / 3, TIMES.TARGET_DURATION_MS),
-            // cy: 200,
+            opacity: 0,
-            // opacity: 0,
+            easing: 'easeInExpo',
-            duration: (TIMES.TARGET_DURATION_MS * 2 / 3),
-            easing: 'easeInQuad',
         })));
     }
 

client/src/components/anims/heal.jsx

@@ -62,7 +62,7 @@ class Heal extends Component {
             targets: ['#heal circle'],
             cx: 150,
             cy: 200,
-            duration: TIMES.TARGET_DURATION_MS * 0.9,
+            duration: TIMES.TARGET_DURATION_MS * 0.6,
             easing: 'easeOutCirc',
             direction: 'reverse',
         }));

client/src/components/anims/sustain.jsx

@@ -25,17 +25,17 @@ class Sustain extends Component {
                 </filter>
                 <polyline
                     id="stageOne"
-                    points='0 0'
+                    points='128,168 80,240 176,240 128,168'
                     style={{ filter: 'url("#sustainFilter")' }}
                 />
                 <polyline
                     id="stageTwo"
-                    points='0 0'
+                    points='176,240 212,216 128,96 44,216 80,240'
                     style={{ filter: 'url("#sustainFilter")' }}
                 />
                 <polyline
                     id="stageThree"
-                    points='0 0'
+                    points='212,216 248,192 128,24 8,192 44,216'
                     style={{ filter: 'url("#sustainFilter")' }}
                 />
             </svg>
@@ -54,13 +54,12 @@ class Sustain extends Component {
 
         this.animations.push(anime({
             targets: ['#stageOne'],
-            points: '128,168 80,240 176,240 128,168',
             keyframes: [
                 {
                     stroke: [COLOURS.GREEN, COLOURS.RED],
                     fill: [null, COLOURS.RED],
                     delay: TIMES.TARGET_DURATION_MS * 0.2,
-                    duration: TIMES.TARGET_DURATION_MS * 0.6,
+                    duration: TIMES.TARGET_DURATION_MS * 0.15,
                     easing: 'easeInOutSine',
                 },
             ],
@@ -73,12 +72,11 @@ class Sustain extends Component {
                 {
                     stroke: [COLOURS.GREEN, COLOURS.RED],
                     fill: [null, COLOURS.RED],
-                    delay: TIMES.TARGET_DURATION_MS * 0.5,
+                    delay: TIMES.TARGET_DURATION_MS * 0.35,
-                    duration: TIMES.TARGET_DURATION_MS * 0.6,
+                    duration: TIMES.TARGET_DURATION_MS * 0.15,
                     easing: 'easeInOutSine',
                 },
             ],
-            points: '176,240 212,216 128,96 44,216 80,240',
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -88,12 +86,11 @@ class Sustain extends Component {
                 {
                     stroke: [COLOURS.GREEN, COLOURS.RED],
                     fill: [null, COLOURS.RED],
-                    delay: TIMES.TARGET_DURATION_MS * 0.8,
+                    delay: TIMES.TARGET_DURATION_MS * 0.5,
-                    duration: TIMES.TARGET_DURATION_MS * 0.4,
+                    duration: TIMES.TARGET_DURATION_MS * 0.15,
                     easing: 'easeInOutSine',
                 },
             ],
-            points: '212,216 248,192 128,24 8,192 44,216',
             duration: TIMES.TARGET_DURATION_MS,
         }));
 
@@ -103,7 +100,7 @@ class Sustain extends Component {
             scale: 10,
             numOctaves: 5,
             easing: 'easeOutSine',
-            delay: TIMES.TARGET_DURATION_MS * 0.4,
+            delay: TIMES.TARGET_DURATION_MS * 0.55,
             duration: TIMES.TARGET_DURATION_MS * 0.3 + TIMES.POST_SKILL_DURATION_MS,
         }));
     }