put animation skill into state

client/src/actions.jsx

@@ -4,6 +4,7 @@ export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', valu
 export const setAnimating  = value => ({ type: 'SET_ANIMATING', value });
 export const setAnimCb     = value => ({ type: 'SET_ANIM_CB', value });
 export const setAnimFocus  = value => ({ type: 'SET_ANIM_FOCUS', value });
+export const setAnimSkill   = value => ({ type: 'SET_ANIM_SKILL', value });
 export const setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value });
 export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value });
 export const setAnimText   = value => ({ type: 'SET_ANIM_TEXT', value });

client/src/animations.utils.jsx

@@ -36,7 +36,7 @@ function getObjects(resolution, stages, game, account) {
     const i = sourceIsPlayer
         ? playerTeamIds.findIndex(c => c === resolution.source.id)
         : otherTeamIds.findIndex(c => c === resolution.source.id);
- 
+
     const j = targetIsPlayer
         ? playerTeamIds.findIndex(c => c === resolution.target.id)
         : otherTeamIds.findIndex(c => c === resolution.target.id);
@@ -68,6 +68,7 @@ function getObjects(resolution, stages, game, account) {
     return {
         animSource,
         animTarget,
+        animSkill: event.skill,
     };
 }
 

client/src/components/targeting.arrows.jsx

@@ -9,8 +9,8 @@ const shapes = require('./shapes');
 const { removeTier } = require('../utils');
 
 const addState = connect(
-    ({ game, account, animTarget, animating, itemInfo }) =>
-        ({ game, account, animTarget, animating, itemInfo })
+    ({ game, account, animSkill, animating, itemInfo }) =>
+        ({ game, account, animSkill, animating, itemInfo })
 );
 
 class TargetSvg extends Component {
@@ -28,15 +28,15 @@ class TargetSvg extends Component {
     }
 
     render(props, state) {
-        const { game, account, animating, animTarget, itemInfo } = props;
+        const { game, account, animating, animSkill, itemInfo } = props;
         const { width, height } = state;
         if (!game) return false; // game will be null when battle ends
 
         // resolutions happening
         // just put skill name up
         if (animating) {
-            if (!animTarget) return false;
-            const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animTarget.skill));
+            if (!animSkill) return false;
+            const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animSkill));
             const itemSourceInfo = itemSource.length
                 ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
                 : false;
@@ -44,7 +44,7 @@ class TargetSvg extends Component {
             const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
             return (
                 <div class="resolving-skill">
-                    <h1>{animTarget.skill}</h1>
+                    <h1>{animSkill}</h1>
                     <div> {itemSourceDescription} </div>
                 </div>
             );

client/src/events.jsx

@@ -73,6 +73,7 @@ function registerEvents(store) {
                     const anims = animations.getObjects(r, sequence, game, account);
                     const text = animations.getText(r, sequence);
                     store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game)));
+                    if (anims.animSkill) store.dispatch(actions.setAnimSkill(anims.animSkill));
 
                     if (sequence.includes('START_SKILL') && anims.animSource) store.dispatch(actions.setAnimSource(anims.animSource));
                     if (sequence.includes('END_SKILL') && anims.animTarget) {
@@ -87,17 +88,18 @@ function registerEvents(store) {
                         );
                     }
                     return setTimeout(() => {
-                        const animSkill = anims.animTarget ? removeTier(anims.animTarget.skill) : false;
+                        store.dispatch(actions.setAnimSkill(null));
                         store.dispatch(actions.setAnimSource(null));
                         store.dispatch(actions.setAnimTarget(null));
                         store.dispatch(actions.setAnimText(null));
                         store.dispatch(actions.setAnimFocus([]));
-                        if (!sequence.includes('END_SKILL') || (animSkill && ['Banish', 'Invert'].includes(animSkill))) return cb();
+                        if (!sequence.includes('END_SKILL') || (anims.animSkill && ['Banish', 'Invert'].includes(anims.animSkill))) return cb();
                         return true;
                     }, timeout);
                 }, err => {
                     if (err) return console.error(err);
                     // clear animation state
+                    store.dispatch(actions.setAnimSkill(null));
                     store.dispatch(actions.setAnimSource(null));
                     store.dispatch(actions.setAnimTarget(null));
                     store.dispatch(actions.setAnimText(null));

client/src/reducers.jsx

@@ -1,10 +1,8 @@
 function createReducer(defaultState, actionType) {
     return function reducer(state = defaultState, action) {
         switch (action.type) {
-            case actionType:
-                return action.value;
-            default:
-                return state;
+        case actionType: return action.value;
+        default: return state;
         }
     };
 }
@@ -18,6 +16,7 @@ module.exports = {
 
     animating:          createReducer(false, 'SET_ANIMATING'),
     animCb:             createReducer(null, 'SET_ANIM_CB'),
+    animSkill:          createReducer(null, 'SET_ANIM_SKILL'),
     animSource:         createReducer(null, 'SET_ANIM_SOURCE'),
     animFocus:          createReducer(null, 'SET_ANIM_FOCUS'),
     animTarget:         createReducer(null, 'SET_ANIM_TARGET'),