gud

client/src/animations.test.jsx

@@ -56,9 +56,9 @@ document.fonts.load('16pt "Jura"').then(() => {
     const Animations = () => (
         <Provider store={store}>
             <div id="mnml" class="animations-test">
-                <nav>
+                <aside>
                     {animationsNav(ws)}
-                </nav>
+                </aside>
                 <Game />
             </div>
         </Provider>

client/src/components/anims/chaos.jsx

@@ -31,7 +31,7 @@ class Chaos extends Component {
         const points = randomPoints(20, 30, { x: 0, y: 0, width: 300, height: 100 });
         this.charges = points.map(coord => {
             const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8';
-            return projectile(coord[0], coord[1], 7, colour);
+            return projectile(coord[0], coord[1], 14, colour);
         });
     }
 
@@ -51,8 +51,8 @@ class Chaos extends Component {
     componentDidMount() {
         const projectiles = document.querySelectorAll('.skill-anim circle');
         anime.set('.skill-anim', {
-            translateY: -(window.screen.height) * 0.35 * this.props.direction.y,
-            translateX: -(window.screen.width) * 0.15 * this.props.direction.x,
+            translateY: -(window.innerHeight) * 0.35 * this.props.direction.y,
+            translateX: -(window.innerWidth) * 0.15 * this.props.direction.x,
             opacity: 0,
         });
 
@@ -77,8 +77,10 @@ class Chaos extends Component {
 
         projectiles.forEach(proj => this.animations.push(anime({
             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 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
+            // cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
+            cx: 150,
+            cy: 200,
             // opacity: 0,
 
             delay: TIMES.TARGET_DELAY_MS,

client/src/components/anims/heal.jsx

@@ -61,7 +61,7 @@ class Heal extends Component {
             targets: ['#heal'],
             opacity: [
                 { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.4, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS / 4, duration: TIMES.TARGET_DURATION_MS * 0.2 },
             ],
             easing: 'easeInOutSine',
         }));
@@ -70,8 +70,8 @@ class Heal extends Component {
             targets: ['#heal circle'],
             cx: 150,
             cy: 200,
-            delay: TIMES.TARGET_DELAY_MS * 2,
-            duration: TIMES.TARGET_DURATION_MS,
+            delay: TIMES.TARGET_DELAY_MS * 4,
+            duration: TIMES.TARGET_DURATION_MS * 0.9,
             easing: 'easeOutCirc',
             direction: 'reverse',
         }));

client/src/components/anims/intercept.jsx

@@ -57,7 +57,7 @@ class Intercept extends Component {
             targets: ['#intercept'],
             transform: [
                 `scale(1 1) ${this.props.player ? 'rotate(180)' : ''}`,
-                `scale(30 3) ${this.props.player ? 'rotate(180)' : ''}`,
+                `scale(5 5) ${this.props.player ? 'rotate(180)' : ''}`,
             ],
             strokeWidth: 0,
 

client/src/components/anims/slay.jsx

@@ -78,7 +78,7 @@ class Slay extends Component {
         });
 
         anime.set('#slay', {
-            translateY: -1 * (window.screen.height) * 0.35,
+            translateY: -1 * (window.innerHeight) * 0.35,
             translateX: 0,
         });
 
@@ -110,7 +110,7 @@ class Slay extends Component {
 
         this.animations.push(anime({
             targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
-            baseFrequency: 100,
+            baseFrequency: 10,
             scale: 100,
             delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
             duration: (duration * 1 / 2),

client/src/components/anims/source.cast.jsx

@@ -6,8 +6,8 @@ function sourceCast(id, direction, idle) {
     const { x, y } = direction;
     return anime({
         targets: [document.getElementById(id)],
-        translateX: x * window.screen.width * 0.15,
-        translateY: y * window.screen.height * 0.15,
+        translateX: x * window.innerWidth * 0.15,
+        translateY: y * window.innerHeight * 0.15,
         easing: 'easeInOutElastic',
         direction: 'alternate',
         duration: TIMES.SOURCE_DURATION_MS,

client/src/components/anims/strike.jsx

@@ -54,7 +54,7 @@ class Strike extends Component {
             x: [200, 0, 200],
             height: [200, 10, 0],
             width: [20, 400, 0],
-            delay: TIMES.TARGET_DELAY_MS / 2,
+            delay: TIMES.TARGET_DELAY_MS * 0.5,
             duration: TIMES.TARGET_DURATION_MS,
         }));
 

client/src/components/anims/wiggle.jsx

@@ -3,8 +3,8 @@ const anime = require('animejs').default;
 function wiggle(id, idle) {
     const duration = 300;
     const target = document.getElementById(id);
-    const x = window.screen.width * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
-    const y = window.screen.height * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
+    const x = window.innerWidth * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
+    const y = window.innerHeight * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
 
     console.log(x, y);
     return anime({