good

client/src/actions.jsx

@@ -1,5 +1,6 @@
 export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
 export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', value });
+export const setAnimating = value => ({ type: 'SET_ANIMATING', value });
 export const setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value });
 export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value });
 export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });

client/src/animations.socket.jsx

@@ -24,7 +24,11 @@ function createSocket(store) {
     }
 
     function onDevResolutions(newRes) {
-        const { game: currentGame, account } = store.getState();
+        const { game, account, animating } = store.getState();
+
+        if (animating) return false;
+        store.dispatch(actions.setAnimating(true));
+
         return eachSeries(newRes, (r, cb) => {
             if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
 
@@ -32,28 +36,26 @@ function createSocket(store) {
             // todo make serersideonly
             const sequence = animations.getSequence(r);
             const timeout = animations.getTime(sequence);
-            const anims = animations.getObjects(r, sequence, currentGame, account);
+            const anims = animations.getObjects(r, sequence, game, account);
-
-            console.log(sequence, timeout, anims);
 
             store.dispatch(actions.setAnimSource(anims.animSource));
             store.dispatch(actions.setAnimTarget(anims.animTarget));
-            return setTimeout(cb, timeout);
 
-            //     return setTimeout(sCb, timeout);
+            return setTimeout(() => {
-            // }, err => {
+                store.dispatch(actions.setAnimSource(null));
-            //     if (err) console.error(err);
+                store.dispatch(actions.setAnimTarget(null));
-            //     // Clear the anim classes
+                return setTimeout(cb, 50);
-            //     store.dispatch(actions.setResolution(null));
+            }, 3000);
-            //     // 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.setAnimSource(null));
             store.dispatch(actions.setAnimTarget(null));
-            store.dispatch(actions.setGame(currentGame));
+            store.dispatch(actions.setAnimating(false));
+
+            // stop skipping resolutions
+            store.dispatch(actions.setSkip(false));
+
+            // ws.sendGameState(currentGame.id);
             return true;
         });
     }

client/src/animations.test.jsx

@@ -20,10 +20,10 @@ const testAccount = {
 
 // Redux Store
 const store = createStore(
-    combineReducers(reducers)
+    combineReducers(reducers),
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
 );
 
-store.subscribe(() => console.log(store.getState()));
 store.dispatch(actions.setAccount(testAccount));
 store.dispatch(actions.setGame(testGame));
 

client/src/animations.utils.jsx

@@ -68,8 +68,8 @@ function getObjects(resolution, stages, game, account) {
 }
 
 function getSequence(resolution) {
-    if (!resolution.event) return false;
+    if (!resolution.event) return [];
-    if (resolution.event[0] === 'Inversion') return false;
+    if (resolution.event[0] === 'Inversion') return [];
     if (['Skill', 'AoeSkill'].includes(resolution.event[0])) return ['START_SKILL', 'END_SKILL'];
     if (resolution.event[0] === 'Ko') return ['POST_SKILL'];
 

client/src/app.jsx

@@ -15,7 +15,8 @@ const Mnml = require('./components/mnml');
 
 // Redux Store
 const store = createStore(
-    combineReducers(reducers)
+    combineReducers(reducers),
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
 );
 
 document.fonts.load('16pt "Jura"').then(() => {

client/src/components/animations.jsx

@@ -123,7 +123,6 @@ class ConstructAnimation extends Component {
         };
 
         const anim = chooseAnim(skill);
-        console.log(anim);
         if (!anim) return false;
 
         return (

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

@@ -6,8 +6,8 @@ function sourceCast(id, direction) {
     const { x, y } = direction;
     return anime({
         targets: [document.getElementById(id)],
-        translateX: x * 200,
+        translateX: [0, x * 200],
-        translateY: y * 200,
+        translateY: [0, y * 200],
         easing: 'easeInOutElastic',
         direction: 'alternate',
         duration: TIMES.SOURCE_DURATION_MS,

client/src/components/construct.jsx

@@ -2,7 +2,7 @@ const preact = require('preact');
 const { Component } = require('preact');
 const { connect } = require('preact-redux');
 
-const { match } = require('./../utils');
+// const { match } = require('./../utils');
 
 const banish = require('./anims/banish');
 const idleAnimation = require('./anims/idle');
@@ -37,16 +37,15 @@ class ConstructAvatar extends Component {
     }
 
     componentDidMount() {
-        console.log(this.props.construct.name, 'mounted');
+        const { animSource, animTarget, construct } = this.props;
-        this.idle = idleAnimation(this.props.construct.id);
-        this.animations.push(this.idle);
-    }
-
-    componentDidUpdate(newProps) {
-        const { animSource, animTarget, construct } = newProps;
 
         // back to idle
-        if (!animTarget || !animSource) {
+        if (!animTarget && !animSource) {
+            if (!this.idle) {
+                this.idle = idleAnimation(this.props.construct.id);
+                this.animations.push(this.idle);
+            }
+
             return this.idle.play();
         }
 
@@ -54,7 +53,7 @@ class ConstructAvatar extends Component {
 
         const selectAnim = () => {
             if (isSource) {
-                console.log(construct.name, 'source anim');
+                console.warn(construct.name, animSource);
                 return sourceCast(animSource.constructId, animSource.direction);
             }
 
@@ -66,13 +65,41 @@ class ConstructAvatar extends Component {
         };
 
         const anim = selectAnim();
-        if (anim) {
+        if (!anim) return false;
-            this.idle.pause();
+
-            this.animations.push(anim);
+        this.idle.pause();
-            return true;
+        this.animations.push(anim);
+        return true;
+    }
+
+    componentDidUpdate(prevProps) {
+        const { animSource, animTarget, construct } = this.props;
+
+        // back to idle
+        if (!animTarget && !animSource) {
+            return this.idle.play();
         }
 
-        return false;
+        const isSource = animSource && animSource.constructId === construct.id;
+
+        const selectAnim = () => {
+            if (isSource) {
+                return sourceCast(animSource.constructId, animSource.direction);
+            }
+
+            switch (animTarget.skill) {
+            case 'banish': return banish(construct.id);
+            case 'invert': return invert(construct.id);
+            default: return null;
+            }
+        };
+
+        const anim = selectAnim();
+        if (!anim) return false;
+
+        this.idle.pause();
+        this.animations.push(anim);
+        return true;
     }
 
     resetAnimations() {
@@ -85,14 +112,31 @@ class ConstructAvatar extends Component {
         this.resetAnimations();
     }
 
-    shouldComponentUpdate({ animTarget, animSource, construct }) {
+    shouldComponentUpdate({ animSource, construct }) {
-        const updated = (animTarget !== this.props.animTarget) || (animSource !== this.props.animSource);
+        if (animSource === this.props.animSource) {
-        if (!updated) return false;
+            // console.warn(construct.name, 'thinks its same props')
+            return false;
+        }
 
-        const isSource = animSource && animSource.constructId === construct.id;
+        // something has changed
-        const isTarget = animTarget && animTarget.constructId === construct.id;
+        // what do?
 
-        return isSource || isTarget;
+        // this is the source
+        if (animSource && animSource.constructId === construct.id) {
+            // console.warn(construct.name, 'should update')
+            return true;
+        }
+
+        // this is the target
+        // if (animTarget && animTarget.constructId === construct.id) return true;
+
+        // we were previously doing src anim
+        const prevSrc = this.props.animSource && this.props.animSource.constructId === construct.id;
+        if (prevSrc && !animSource) return true;
+
+        // console.warn(construct.name, 'not updating');
+
+        return false;
     }
 }
 

client/src/components/targeting.arrows.jsx

@@ -6,8 +6,8 @@ const { connect } = require('preact-redux');
 const throttle = require('lodash/throttle');
 
 const addState = connect(
-    ({ game, account, animSource, animTarget }) =>
+    ({ game, account, animTarget, animating }) =>
-        ({ game, account, animSource, animTarget })
+        ({ game, account, animTarget, animating })
 );
 
 class TargetSvg extends Component {
@@ -24,12 +24,14 @@ class TargetSvg extends Component {
     }
 
     render(props, state) {
-        const { game, account, animSource, animTarget } = props;
+        const { game, account, animating, animTarget } = props;
         const { width, height } = state;
 
         // resolutions happening
         // just put skill name up
-        if (animSource || animTarget) {
+        if (animating) {
+            if (!animTarget) return false;
+
             return (
                 <svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" class="targeting-arrows">
                     <text

client/src/constants.jsx

@@ -1,15 +1,16 @@
-
 const SOURCE_DURATION_MS = 1000;
 const TARGET_DELAY_MS = 500;
 const TARGET_DURATION_MS = 1500;
+const POST_SKILL_DELAY_MS = 2000;
 const POST_SKILL_DURATION_MS = 1000;
-const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS;
+const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS + POST_SKILL_DURATION_MS;
 
 module.exports = {
     TIMES: {
         SOURCE_DURATION_MS,
         TARGET_DELAY_MS,
         TARGET_DURATION_MS,
+        POST_SKILL_DELAY_MS,
         POST_SKILL_DURATION_MS,
         SOURCE_AND_TARGET_TOTAL_DURATION,
     },

client/src/events.jsx

@@ -42,10 +42,14 @@ function registerEvents(store) {
     }
 
     function setGame(game) {
-        const { game: currentGame, account, ws } = store.getState();
+        const { game: currentGame, account, ws, animating } = store.getState();
+
+        if (animating) return false;
 
         if (game && currentGame) {
             if (game.resolved.length !== currentGame.resolved.length) {
+                store.dispatch(actions.setAnimating(true));
+
                 // stop fetching the game state til animations are done
                 const newRes = game.resolved.slice(currentGame.resolved.length);
                 return eachSeries(newRes, (r, cb) => {
@@ -57,30 +61,23 @@ function registerEvents(store) {
                     const timeout = animations.getTime(sequence);
                     const anims = animations.getObjects(r, sequence, game, account);
 
-                    console.log(sequence, timeout, anims);
-
                     store.dispatch(actions.setAnimSource(anims.animSource));
                     store.dispatch(actions.setAnimTarget(anims.animTarget));
-                    return setTimeout(cb, timeout);
 
-                    //     return setTimeout(sCb, timeout);
+                    return setTimeout(() => {
-                    // }, err => {
+                        store.dispatch(actions.setAnimSource(null));
-                    //     if (err) console.error(err);
+                        store.dispatch(actions.setAnimTarget(null));
-                    //     // Clear the anim classes
+                        return setTimeout(cb, 50);
-                    //     store.dispatch(actions.setResolution(null));
+                    }, 3000);
-                    //     // 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.setAnimSource(null));
                     store.dispatch(actions.setAnimTarget(null));
+                    store.dispatch(actions.setAnimating(false));
+
                     // stop skipping resolutions
                     store.dispatch(actions.setSkip(false));
-                    // update the game
+
-                    store.dispatch(actions.setGame(game));
-                    // get the latest state and restart polling
                     ws.sendGameState(currentGame.id);
                     return true;
                 });
@@ -88,7 +85,6 @@ function registerEvents(store) {
         }
 
         return store.dispatch(actions.setGame(game));
-        return console.log('EVENT ->', 'game', game);
     }
 
     function setAccount(account) {

client/src/reducers.jsx

@@ -15,6 +15,7 @@ module.exports = {
     activeConstruct:    createReducer(null, 'SET_ACTIVE_CONSTRUCT'),
     activeItem:         createReducer(null, 'SET_ACTIVE_VAR'),
     activeSkill:        createReducer(null, 'SET_ACTIVE_SKILL'),
+    animating:          createReducer(false, 'SET_ANIMATING'),
     animSource:         createReducer(null, 'SET_ANIM_SOURCE'),
     animTarget:         createReducer(null, 'SET_ANIM_TARGET'),
     combiner:           createReducer([null, null, null], 'SET_COMBINER'),