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

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:
+          "nav hdr  ctrl"
+          "nav main ctrl"
+          "nav main ctrl";
+
+        nav {
+            display: initial;
+        }
+    }
 }
 
 main {

client/src/animations.socket.jsx

@@ -6,6 +6,7 @@ const eachSeries = require('async/eachSeries');
 const actions = require('./actions');
 const { TIMES } = require('./constants');
 const animations = require('./animations.utils');
+const { removeTier } = require('./utils');
 
 const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://mnml.gg/api/ws' : 'ws://localhost/api/ws';
 
@@ -28,6 +29,7 @@ function createSocket(store) {
 
         if (animating) return false;
         store.dispatch(actions.setAnimating(true));
+        // stop fetching the game state til animations are done
         return eachSeries(newRes, (r, cb) => {
             if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
 
@@ -37,15 +39,14 @@ function createSocket(store) {
             const timeout = animations.getTime(sequence);
             const anims = animations.getObjects(r, sequence, game, account);
             const text = animations.getText(r, sequence);
+            store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game)));
 
-            store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r)));
+            if (sequence.includes('START_SKILL') && anims.animSource) store.dispatch(actions.setAnimSource(anims.animSource));
-
+            if (sequence.includes('END_SKILL') && anims.animTarget) {
-            if (sequence.includes('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource));
-            if (sequence.includes('END_SKILL')) {
                 store.dispatch(actions.setAnimTarget(anims.animTarget));
-                if (!['Banish', 'Invert'].includes(anims.animTarget.skill)) store.dispatch(actions.setAnimCb(cb));
+                if (!['Banish', 'Invert'].includes(removeTier(anims.animTarget.skill))) store.dispatch(actions.setAnimCb(cb));
             }
-            if (sequence.includes('POST_SKILL')) {
+            if (sequence.includes('POST_SKILL' && text)) {
                 // timeout to prevent text classes from being added too soon
                 setTimeout(
                     () => store.dispatch(actions.setAnimText(text)),
@@ -58,7 +59,7 @@ function createSocket(store) {
                 store.dispatch(actions.setAnimText(null));
                 store.dispatch(actions.setAnimFocus([]));
                 if (!sequence.includes('END_SKILL')
-                    || ['Banish', 'Invert'].includes(anims.animTarget.skill)) return cb();
+                    || ['Banish', 'Invert'].includes(removeTier(anims.animTarget.skill))) return cb();
                 return true;
             }, timeout);
         }, err => {
@@ -70,7 +71,6 @@ function createSocket(store) {
             store.dispatch(actions.setAnimating(false));
 
             store.dispatch(actions.setSkip(false));
-            store.dispatch(actions.setResolution(null));
 
             // set the game state so resolutions don't fire twice
             store.dispatch(actions.setGame(game));

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,74 @@ 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() {
+        // const { x, y } = (this.props && this.props.direction) || { x: 0, y: 0 };
+        // const angle = (Math.atan(y / x) * (180 / Math.PI)) + 90;
+        // console.log(x, -y);
+        // console.log(angle);
+        // can't get this shit to work
+
         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: [800, 100, 100],
-                { 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],
+            delay: TIMES.TARGET_DELAY_MS / 2,
+            duration: TIMES.TARGET_DURATION_MS,
         }));
 
         this.animations.push(anime({
-            targets: '#strike',
+            targets: ['#strikeFilter feTurbulence', '#strikeFilter feDisplacementMap'],
-            translateY: 0,
+            baseFrequency: 2,
-            translateX: 0,
+            scale: 50,
-            loop: false,
+            numOctaves: 5,
-            delay: TIMES.TARGET_DELAY_MS,
+            easing: 'easeOutSine',
-            duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
+            delay: TIMES.TARGET_DELAY_MS + (TIMES.TARGET_DURATION_MS / 3),
-            easing: 'easeInQuad',
+            duration: TIMES.TARGET_DURATION_MS / 2,
-        }));
-        this.animations.push(anime({
-            targets: '#strikeFilter feDisplacementMap',
-            scale: 200,
-            loop: false,
-            delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4),
-            easing: 'easeInQuad',
         }));
     }
 
+    // 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);

client/src/test.game.js

@@ -35,7 +35,7 @@ function testGame(uuid) {
       "constructs": [
         {
           "id": "82e8b940-411c-42a1-8fc2-484ec7207734",
-          "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
+          "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
           "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
           "red_damage": {
             "base": 256,
@@ -109,7 +109,7 @@ function testGame(uuid) {
         },
         {
           "id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
-          "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
+          "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
           "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
           "red_damage": {
             "base": 256,
@@ -186,7 +186,7 @@ function testGame(uuid) {
         {
           "id": "ea302c35-d326-475c-a867-8ad5b162165a",
           "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
-          "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
+          "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
           "red_damage": {
             "base": 256,
             "value": Math.floor(Math.random() * 10000),
@@ -302,7 +302,7 @@ function testGame(uuid) {
         {
           "id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
           "account": uuid,
-          "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
+          "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
           "red_damage": {
             "base": 256,
             "value": Math.floor(Math.random() * 10000),
@@ -389,7 +389,7 @@ function testGame(uuid) {
         {
           "id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
           "account": uuid,
-          "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
+          "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
           "red_damage": {
             "base": 256,
             "value": Math.floor(Math.random() * 10000),
@@ -470,7 +470,7 @@ function testGame(uuid) {
         {
           "id": "5d49fe65-27f0-4372-90a3-334ef906a0f5",
           "account": uuid,
-          "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
+          "img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
           "red_damage": {
             "base": 256,
             "value": Math.floor(Math.random() * 10000),

server/src/effect.rs

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