animations test fixes + new strike

client/animations.test.js

@@ -1,8 +1,14 @@
 require('./assets/styles/styles.less');
-require('./assets/styles/styles.mobile.css');
+require('./assets/styles/menu.less');
+require('./assets/styles/nav.less');
+require('./assets/styles/footer.less');
+require('./assets/styles/account.less');
+require('./assets/styles/controls.less');
 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/instance.mobile.css');
-require('./assets/styles/game.css');
 
-// kick it off
 require('./src/animations.test.jsx');

client/assets/styles/styles.less

@@ -93,6 +93,18 @@ dl {
       "main ctrl";
 
     padding: 0.5em 1em;
+
+    &.animations-test {
+        grid-template-columns: 1fr 9fr 1fr;
+        grid-template-areas:
+          "hdr hdr  ctrl"
+          "nav main ctrl"
+          "nav main ctrl";
+
+        nav {
+            display: initial;
+        }
+    }
 }
 
 main {

client/src/animations.test.jsx

@@ -55,7 +55,7 @@ document.fonts.load('16pt "Jura"').then(() => {
 
     const Animations = () => (
         <Provider store={store}>
-            <div id="mnml">
+            <div id="mnml" class="animations-test">
                 <nav>
                     {animationsNav(ws)}
                 </nav>
@@ -69,24 +69,6 @@ document.fonts.load('16pt "Jura"').then(() => {
 });
 
 const SKILLS = [
-    'Absorb',
-    'Absorption',
-    'Amplify',
-    'Attack',
-    'Banish',
-    'Bash',
-    'Blast',
-    'Block',
-    'Break',
-    'Buff',
-    'Chaos',
-    'CounterAttack',
-    'Counter',
-    'Curse',
-    'Debuff',
-    'Decay',
-    'DecayTick',
-    'Electrify',
     'Electrocute',
     'ElectrocuteTick',
     'Haste',
@@ -113,4 +95,22 @@ const SKILLS = [
     'Sustain',
     'Triage',
     'TriageTick',
+    'Absorb',
+    'Absorption',
+    'Amplify',
+    'Attack',
+    'Banish',
+    'Bash',
+    'Blast',
+    'Block',
+    'Break',
+    'Buff',
+    'Chaos',
+    'CounterAttack',
+    'Counter',
+    'Curse',
+    'Debuff',
+    'Decay',
+    'DecayTick',
+    'Electrify',
 ];

client/src/components/anims/strike.jsx

@@ -1,9 +1,9 @@
 const preact = require('preact');
 const { Component } = require('preact');
-const anime = require('animejs').default;
 const { connect } = require('preact-redux');
+const anime = require('animejs').default;
 
-const { TIMES } = require('../../constants');
+const { TIMES, COLOURS } = require('../../constants');
 
 const addState = connect(
     function receiveState(state) {
@@ -12,116 +12,67 @@ const addState = connect(
     }
 );
 
-function laser(dimensions, colour) {
-    const { x, y, length } = dimensions;
-    return (
-        <rect
-            width="14"
-            height={length}
-            x={x}
-            y={y}
-            fill="url(#grad1)"
-            stroke-width="2"
-            stroke={colour}
-            filter="url(#strikeFilter)"
-        />
-    );
-}
-
 class Strike extends Component {
     constructor(props) {
         super();
-        this.team = props.team;
+        this.props = props;
         this.animations = [];
-        this.colour = props.colour;
-
-        const coord = [0, 50, 100, 150, 200];
-        const points = coord.map(pos => ({
-            x: pos + Math.random() * 40,
-            y: 50 + Math.random() * 100,
-            length: 150 + Math.random() * 150,
-        }));
-        this.charges = points.map(pos => laser(pos, this.colour));
     }
 
     render() {
         return (
             <svg
-                class={'skill-animation'}
+                class='strike-anim'
                 version="1.1"
                 id="strike"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 300 400">
+                viewBox="0 0 400 400">
-                <defs>
+                <filter id='strikeFilter'>
-                    <radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
+                    <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
-                        <stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                        <stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
-                    </radialGradient>
-                </defs>
-                <filter id="strikeFilter">
-                    <feGaussianBlur stdDeviation="4"/>
-                    <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
-                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
                 </filter>
-                {this.charges}
+                <g>
+                    <rect x="200"   y="400"
+                        width="12" height="100" stroke-width="0" fill={COLOURS.RED} style={{ filter: 'url("#strikeFilter")' }} />
+                </g>
             </svg>
         );
     }
 
     componentDidMount() {
-        let rotate = 0; // Self target value
-        if (this.props.direction.y) {
-            if (!this.props.direction.x) rotate = this.props.direction.y > 0 ? 0 : 180;
-            else {
-                rotate = this.props.direction.y > 0
-                    ? -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI
-                    : -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI + 180;
-            }
-        } else if (this.props.direction.x) {
-            rotate = this.props.direction.x > 0 ? 270 : 90;
-        }
-        anime.set('#strike', {
-            rotate,
-        });
-
-        anime.set('#strike', {
-            translateY: (window.screen.height) * 0.35 * this.props.direction.y,
-            translateX: 0,
-        });
-
         this.animations.push(anime({
-            targets: '#strike',
+            targets: ['#strike rect'],
-            opacity: [
+            easing: 'easeOutExpo',
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+            y: [400, 200, 200],
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+            x: [200, 0, 200],
-            ],
+            height: [200, 10, 0],
-            easing: 'easeInOutSine',
+            width: [20, 400, 0],
-        }));
-
-        this.animations.push(anime({
-            targets: '#strike',
-            translateY: 0,
-            translateX: 0,
-            loop: false,
             delay: TIMES.TARGET_DELAY_MS,
-            duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
+            duration: TIMES.TARGET_DURATION_MS,
-            easing: 'easeInQuad',
         }));
+
         this.animations.push(anime({
-            targets: '#strikeFilter feDisplacementMap',
+            targets: ['#strikeFilter feTurbulence', '#strikeFilter feDisplacementMap'],
-            scale: 200,
+            baseFrequency: 2,
-            loop: false,
+            scale: 50,
-            delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4),
+            numOctaves: 5,
-            easing: 'easeInQuad',
+            easing: 'easeOutSine',
+            delay: TIMES.TARGET_DELAY_MS + (TIMES.TARGET_DURATION_MS / 3),
+            duration: TIMES.TARGET_DURATION_MS / 2,
         }));
     }
 
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
     componentWillUnmount() {
         for (let i = this.animations.length - 1; i >= 0; i--) {
             this.animations[i].reset();
         }
         this.props.animCb && this.props.animCb();
     }
+
 }
 
 module.exports = addState(Strike);

server/src/effect.rs

@@ -154,7 +154,7 @@ impl Effect {
             },
 
             _ => {
-                info!("{:?} does not have a mod effect", self);
+                warn!("{:?} does not have a mod effect", self);
                 return value;
             },
         }