update anims test

client/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "parcel watch index.html --out-dir /var/lib/mnml/public/current",
-    "anims": "parcel animations.html --host 0.0.0.0 --port 40080 --no-source-maps",
+    "anims": "parcel watch animations.html --out-dir /var/lib/mnml/public/current",
     "build": "parcel build index.html",
     "scss": "node-sass --watch assets/scss -o assets/styles",
     "lint": "eslint --fix --ext .jsx src/",

client/src/animations.socket.jsx

@@ -5,7 +5,7 @@ const eachSeries = require('async/eachSeries');
 
 const actions = require('./actions');
 const { TIMES } = require('./constants');
-const { getCombatSequence } = require('./utils');
+const animations = require('./animations.utils');
 
 const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://mnml.gg/api/ws' : 'ws://localhost/api/ws';
 
@@ -20,46 +20,39 @@ function createSocket(store) {
     }
 
     function sendDevResolve(a, b, skill) {
-        send({ method: 'dev_game_resolve', params: { a, b, skill } });
+        send(['DevResolve', { a, b, skill }]);
     }
 
     function onDevResolutions(newRes) {
-        const { game: currentGame } = store.getState();
+        const { game: currentGame, account } = store.getState();
-        let id = 0;
         return eachSeries(newRes, (r, cb) => {
             if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
-            // Create sub events for combat animations
-            const sequence = getCombatSequence(r);
-            id += 1;
 
-            return eachSeries(sequence, (stages, sCb) => {
+            // convert server enum into anims keywords
-                const stagedR = Object.create(r);
+            // todo make serersideonly
-                stagedR.sequence = sequence;
+            const sequence = animations.getSequence(r);
-                stagedR.stages = stages;
+            const timeout = animations.getTime(sequence);
-                stagedR.id = id;
+            const anims = animations.getObjects(r, sequence, currentGame, account);
 
-                let timeout = 0;
+            console.log(sequence, timeout, anims);
-                if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) {
-                    timeout = TIMES.SOURCE_AND_TARGET_TOTAL_DURATION;
-                } else if (stages.includes('START_SKILL')) timeout = TIMES.SOURCE_DURATION_MS;
-                else if (stages.includes('END_SKILL')) timeout = TIMES.TARGET_DURATION_MS;
-                else if (stages.includes('POST_SKILL')) timeout = TIMES.POST_SKILL_DURATION_MS;
-                store.dispatch(actions.setResolution(stagedR));
 
-                return setTimeout(sCb, timeout);
+            store.dispatch(actions.setAnimSource(anims.animSource));
-            }, err => {
+            store.dispatch(actions.setAnimTarget(anims.animTarget));
-                if (err) console.error(err);
+            return setTimeout(cb, timeout);
-                store.dispatch(actions.setAvatarAnimation({ id, source: false, target: false }));
+
-                // Finished this resolution
+            //     return setTimeout(sCb, timeout);
-                return cb();
+            // }, err => {
-            });
+            //     if (err) console.error(err);
+            //     // Clear the anim classes
+            //     store.dispatch(actions.setResolution(null));
+            //     // store.dispatch(actions.setAvatarAnimation({ id, source: false, target: false }));
+            //     // Finished this resolution small delay for reset
+            //     return setTimeout(cb, 5);
+            // });
         }, err => {
             if (err) return console.error(err);
-            store.dispatch(actions.setAvatarAnimation({ id: -1, source: false, target: false }));
+            store.dispatch(actions.setAnimSource(null));
-            store.dispatch(actions.setResolution(null));
+            store.dispatch(actions.setAnimTarget(null));
-            // stop skipping resolutions
-            store.dispatch(actions.setSkip(false));
-            // update the game
             store.dispatch(actions.setGame(currentGame));
             return true;
         });
@@ -75,8 +68,13 @@ function createSocket(store) {
         // decode binary msg from server
         const blob = new Uint8Array(event.data);
         const res = cbor.decode(blob);
+        // if (res.err) return errHandler(res.err);
+
         const [msgType, params] = res;
-        if (!handlers[msgType]) return false;
+        if (msgType !== 'Pong') console.log(res);
+
+        // check for error and split into response type and data
+        if (!handlers[msgType]) return console.error(`${msgType} handler missing`);
         return handlers[msgType](params);
     }
 

client/src/components/construct.jsx

@@ -36,28 +36,38 @@ class ConstructAvatar extends Component {
     }
 
     componentDidMount() {
-        this.idle = idleAnimation(this.props.construct.id);
+        const { animSource, animTarget, construct } = this.props;
-        this.animations.push(this.idle);
+
+        const isSource = animSource && animSource.constructId === construct.id;
+        const isTarget = animTarget && animTarget.constructId === construct.id;
+
+        console.log(isSource, isTarget);
+
+        if (!isSource || !isTarget) {
+            return this.animations.push(idleAnimation(construct.id));
         }
 
-    componentWillReceiveProps({ animSource, animTarget }) {
         const avatarAnim = () => {
-            if (animSource && animSource.constructId === this.props.construct.id) {
+            console.log(isSource);
+            if (isSource) {
                 return sourceCast(animSource.constructId, animSource.direction);
             }
 
             // if (!animTarget) return false;
             // match(animTarget.skill, [
-            //     ['banish', () => banish(this.props.construct.id)],
+            //     ['banish', () => banish(construct.id)],
             //     ['invert', () => invert(this.props.construct.id)],
             // ]);
         };
 
         const anim = avatarAnim();
         if (anim) {
-            this.idle.pause();
+            console.log(anim);
             this.animations.push(anim);
-            anim.finished.then(this.idle.play);
+            anim.finished.then(() => {
+                console.log('anim finished');
+                return this.animations.push(idleAnimation(construct.id));
+            });
         }
 
         return true;

client/src/test.game.js

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