wip fixed source cast

client/src/actions.jsx

@@ -1,26 +1,27 @@
 export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
-export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
-export const setConstructDeleteId = value => ({ type: 'SET_CONSTRUCT_DELETE_ID', value });
-export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
-export const setSkip = value => ({ type: 'SET_SKIP', value });
-export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
-export const setInstances = value => ({ type: 'SET_INSTANCES', value });
-export const setNav = value => ({ type: 'SET_NAV', value });
-export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
-export const setInstance = value => ({ type: 'SET_INSTANCE', value });
-export const setInstanceList = value => ({ type: 'SET_INSTANCE_LIST', value });
-export const setPing = value => ({ type: 'SET_PING', value });
-export const setPlayer = value => ({ type: 'SET_PLAYER', value });
-export const setGame = value => ({ type: 'SET_GAME', value });
-export const setResolution = value => ({ type: 'SET_RESOLUTION', value });
-export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
-export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
-export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
 export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });
 export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', value });
 export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });
+export const setAvatarAnimation = value => ({ type: 'SET_AVATAR_ANIMATION', value });
+export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
+export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
+export const setConstructDeleteId = value => ({ type: 'SET_CONSTRUCT_DELETE_ID', value });
+export const setGame = value => ({ type: 'SET_GAME', value });
 export const setInfo = value => ({ type: 'SET_INFO', value });
+export const setInstance = value => ({ type: 'SET_INSTANCE', value });
+export const setInstanceList = value => ({ type: 'SET_INSTANCE_LIST', value });
+export const setInstances = value => ({ type: 'SET_INSTANCES', value });
 export const setItemEquip = value => ({ type: 'SET_ITEM_EQUIP', value });
+export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
 export const setItemUnequip = value => ({ type: 'SET_ITEM_UNEQUIP', value });
+export const setNav = value => ({ type: 'SET_NAV', value });
+export const setPing = value => ({ type: 'SET_PING', value });
+export const setPlayer = value => ({ type: 'SET_PLAYER', value });
 export const setReclaiming = value => ({ type: 'SET_RECLAIMING', value });
+export const setResolution = value => ({ type: 'SET_RESOLUTION', value });
+export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
+export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
+export const setSkip = value => ({ type: 'SET_SKIP', value });
+export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
+export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
 export const setWs = value => ({ type: 'SET_WS', value });

client/src/app.jsx

@@ -20,7 +20,7 @@ const store = createStore(
 
 document.fonts.load('16pt "Jura"').then(() => {
     const events = registerEvents(store);
-    store.subscribe(() => console.log(store.getState()));
+    // store.subscribe(() => console.log(store.getState()));
     setupKeys(store);
 
     const ws = createSocket(events);

client/src/components/animations.jsx

@@ -58,7 +58,7 @@ const colours = {
 const { TIMES } = require('../constants');
 
 function animations(props) {
-    const { game, account, resolution, player, construct } = props;
+    const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props;
     if (!resolution) return false;
     const [, event] = resolution.event;
     if (!event || !event.skill) return false;
@@ -90,15 +90,18 @@ function animations(props) {
             : otherTeamIds.findIndex(c => c === resolution.target.id);
 
         const x = j - i;
-        anime({
+        if (avatarAnimation !== resolution.id) {
-            targets: [document.getElementById(construct.id)],
+            console.log(avatarAnimation);
-            translateY: y * 200,
+            setAvatarAnimation(resolution.id);
-            translateX: x * 200,
+            anime({
-            easing: 'easeInOutElastic',
+                targets: [document.getElementById(construct.id)],
-            direction: 'alternate',
+                translateY: y * 200,
-            duration: TIMES.SOURCE_DURATION_MS,
+                translateX: x * 200,
-
+                easing: 'easeInOutElastic',
-        });
+                direction: 'alternate',
+                duration: TIMES.SOURCE_DURATION_MS,
+            });
+        }
     }
     const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
     if (!((resolution.target.id === construct.id)
@@ -116,7 +119,7 @@ function animations(props) {
         case 'Blast': return <Blast />;
         case 'Siphon': return <Siphon />;
         case 'SiphonTick': return <SiphonTick />;
-        case 'Strike': return <Strike colour={colours.red}/>;
+        case 'Strike': return <Strike colour={colours.red} id={resolution.id}/>;
         case 'Chaos': return <Chaos />;
         case 'Slay': return <Slay />;
         case 'Heal': return <Heal />;

client/src/components/anims/strike.jsx

@@ -63,15 +63,6 @@ class Strike extends Component {
     }
 
     componentDidMount() {
-        this.animations.push(anime({
-            targets: ['#strike'],
-            opacity: [
-                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
-            ],
-            easing: 'easeInOutSine',
-        }));
-
         if (!this.props.team) {
             anime.set('#strike', {
                 rotate: Math.random() * 180 + 90,
@@ -81,15 +72,22 @@ class Strike extends Component {
                 rotate: Math.random() * 180 + 270,
             });
         }
+
         anime.set('#strike', {
             translateY: -200,
             translateX: 0,
         });
-        anime.set('#strikeFilter feDisplacementMap', {
-            scale: 1,
-        });
 
-        anime({
+        this.animations.push(anime({
+            targets: '#strike',
+            opacity: [
+                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+            ],
+            easing: 'easeInOutSine',
+        }));
+
+        this.animations.push(anime({
             targets: '#strike',
             translateY: 0,
             translateX: 0,
@@ -97,14 +95,14 @@ class Strike extends Component {
             delay: TIMES.TARGET_DELAY_MS,
             duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
             easing: 'easeInQuad',
-        });
+        }));
-        anime({
+        this.animations.push(anime({
             targets: '#strikeFilter feDisplacementMap',
             scale: 200,
             loop: false,
             delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4),
             easing: 'easeInQuad',
-        });
+        }));
     }
 
     componentWillUnmount() {

client/src/components/construct.jsx

@@ -1,5 +1,6 @@
 const preact = require('preact');
 const { Component } = require('preact');
+const { connect } = require('preact-redux');
 
 const anime = require('animejs').default;
 
@@ -38,6 +39,13 @@ function clearAnimation(id) {
     animations[id] = false;
 }
 
+const addState = connect(
+    function receiveState(state) {
+        const { avatarAnimation } = state;
+        return { avatarAnimation };
+    }
+);
+
 class ConstructAvatar extends Component {
     render() {
         return (
@@ -53,6 +61,11 @@ class ConstructAvatar extends Component {
         animateConstruct(this.props.id);
     }
 
+    componentWillReceiveProps(nextProps) {
+        // console.log(this.props);
+        // console.log(nextProps);
+    }
+
     componentWillUnmount() {
         clearAnimation(this.props.id);
     }
@@ -81,6 +94,6 @@ class ConstructImg extends Component {
 }
 
 module.exports = {
-    ConstructAvatar,
+    ConstructAvatar: addState(ConstructAvatar),
     ConstructImg,
 };

client/src/components/game.construct.jsx

@@ -10,6 +10,9 @@ const shapes = require('./shapes');
 
 const SkillBtn = require('./skill.btn');
 
+
+const actions = require('../actions');
+
 const addState = connect(
     function receiveState(state) {
         const {
@@ -18,6 +21,7 @@ const addState = connect(
             account,
             resolution,
             activeSkill,
+            avatarAnimation,
         } = state;
 
         function selectSkillTarget(targetConstructId) {
@@ -31,15 +35,26 @@ const addState = connect(
         if (activeSkill && activeSkill.skill.self_targeting) {
             ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
         }
-
         return {
             game,
             account,
             resolution,
             activeSkill,
+            avatarAnimation,
             selectSkillTarget,
         };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setAvatarAnimation(c) {
+            return dispatch(actions.setAvatarAnimation(c));
+        }
+
+        return {
+            setAvatarAnimation,
+        };
     }
+
 );
 
 
@@ -52,7 +67,8 @@ function GameConstruct(props) {
         player,
         resolution,
         activeSkill,
-        setActiveConstruct,
+        avatarAnimation,
+        setAvatarAnimation,
         selectSkillTarget,
     } = props;
 
@@ -77,8 +93,7 @@ function GameConstruct(props) {
     const effects = construct.effects.length
         ? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
         : <div>&nbsp;</div>;
-
+    const combatAnim = animations({ game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation });
-    const combatAnim = animations({ game, account, resolution, player, construct });
     const combatText = getCombatText(resolution, construct);
     return (
         <div

client/src/events.jsx

@@ -60,14 +60,17 @@ function registerEvents(store) {
                 // stop fetching the game state til animations are done
                 ws.clearGameStateTimeout();
                 const newRes = game.resolved.slice(currentGame.resolved.length);
+                let id = game.resolved.length - currentGame.resolved.length;
                 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) => {
                         const stagedR = Object.create(r);
                         stagedR.sequence = sequence;
                         stagedR.stages = stages;
+                        stagedR.id = id;
 
                         let timeout = 0;
                         if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) {

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'),
+    avatarAnimation:    createReducer(null, 'SET_AVATAR_ANIMATION'),
     combiner:           createReducer([null, null, null], 'SET_COMBINER'),
     constructs:         createReducer([], 'SET_CONSTRUCTS'),
     constructDeleteId:  createReducer(null, 'SET_CONSTRUCT_DELETE_ID'),