core anims

client/src/animations.utils.jsx

@@ -9,25 +9,22 @@ function none() {
 }
 
 function getObjects(resolution, game, account) {
-    if (!resolution) return none();
-    if (!resolution.target) return none();
-
-    const [type, event] = resolution.event;
+    const [type, event] = resolution.variant;
     if (!event || !event.skill) return none();
 
     const playerTeam = game.players.find(t => t.id === account.id);
     const playerTeamIds = playerTeam.constructs.map(c => c.id);
     const otherTeam = game.players.find(t => t.id !== account.id);
     const otherTeamIds = otherTeam.constructs.map(c => c.id);
-    const sourceIsPlayer = playerTeamIds.includes(resolution.source.id);
-    const targetIsPlayer = playerTeamIds.includes(resolution.target.id);
+    const sourceIsPlayer = playerTeamIds.includes(event.source);
+    const targetIsPlayer = playerTeamIds.includes(resolution.target);
 
     const targetting = () => {
         if (type === 'AoeSkill') {
             if (targetIsPlayer) return playerTeamIds;
             return otherTeamIds;
         }
-        return [resolution.target.id];
+        return [resolution.target];
     };
 
     const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer);
@@ -35,41 +32,32 @@ function getObjects(resolution, game, account) {
     if (!sameTeam) y = targetIsPlayer ? 1 : -1;
 
     const i = sourceIsPlayer
-        ? playerTeamIds.findIndex(c => c === resolution.source.id)
-        : otherTeamIds.findIndex(c => c === resolution.source.id);
+        ? playerTeamIds.findIndex(c => c === event.source)
+        : otherTeamIds.findIndex(c => c === event.source);
 
     const j = targetIsPlayer
-        ? playerTeamIds.findIndex(c => c === resolution.target.id)
-        : otherTeamIds.findIndex(c => c === resolution.target.id);
+        ? playerTeamIds.findIndex(c => c === resolution.target)
+        : otherTeamIds.findIndex(c => c === resolution.target);
     const x = j - i;
     const direction = { x, y };
     // const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
 
-    const createSourceAnim = () => {
-        return {
-            animation: 'sourceCast',
-            constructId: resolution.source.id,
-            direction,
-        };
+    const animSource = {
+        animation: 'sourceCast',
+        constructId: event.source,
+        direction,
     };
 
-    const skipSource = !resolution.stages.includes('START_SKILL')
-        || resolution.source.id === resolution.target.id;
-
-    const animSource = skipSource
-        ? null
-        : createSourceAnim();
-
     const animTarget = {
         skill: event.skill,
         constructId: targetting(),
-        player: playerTeamIds.includes(resolution.target.id),
+        player: playerTeamIds.includes(resolution.target),
         direction,
     };
+
     return {
         animSource,
         animTarget,
-        animSkill: event.skill,
     };
 }
 
@@ -86,30 +74,21 @@ function getTime(stages) {
     return time;
 }
 
-function getFocusTargets(resolution, game) {
-    if (!resolution) return [];
-    if (!resolution.event) return [];
-    const [type] = resolution.event;
-    const source = resolution.source.id;
-    const target = resolution.target.id;
-
-    if (type === 'AoeSkill') {
-        const targetTeam = game.players.find(t => t.constructs.find(c => c.id === target));
-        const targetTeamIds = targetTeam.constructs.map(c => c.id);
-        if (source !== target) targetTeamIds.push(source);
-        return targetTeamIds;
+function getFocusTargets(resolution) {
+    const [type, event] = resolution.variant;
+    if (type === 'HitCast') {
+        const { source } = event;
+        const { target } = resolution;
+        if (source !== target) return [source, target];
+        return [target];
     }
-    if (source !== target) return [source, target];
-    return [target];
+    return [resolution.target];
 }
 
 function getText(resolution) {
     const nullText = { text: null, constructId: null, life: null };
-    if (!resolution) return nullText;
-    if (!resolution.stages.includes('POST_SKILL')) return nullText;
-
+    const [type, event] = resolution.variant;
     function generatePostSkill() {
-        const [type, event] = resolution.event;
         if (type === 'Ko') {
             return { text: 'KO!', css: 'ko-transition' };
         }
@@ -176,16 +155,14 @@ function getText(resolution) {
         return false;
     }
 
-    const { green, red, blue } = resolution.target;
+    const { green, red, blue } = event.display;
     const { text, css, effects } = generatePostSkill();
-    const skill = resolution.event[1] ? resolution.event[1].skill : null;
     return {
         css,
         text,
         effects,
         life: { green, red, blue },
-        constructId: resolution.target.id,
-        skill,
+        constructId: event.display.id,
     };
 }
 

client/src/components/game.construct.anim.text.jsx

@@ -7,7 +7,7 @@ const shapes = require('./shapes');
 const { removeTier } = require('../utils');
 const { TIMES } = require('./../constants');
 
-const addState = connect(({ animText, itemInfo }) => ({ animText, itemInfo }));
+const addState = connect(({ animText, animSkill, itemInfo }) => ({ animText, animSkill, itemInfo }));
 
 class AnimText extends preact.Component {
     shouldComponentUpdate(newProps) {
@@ -27,11 +27,11 @@ class AnimText extends preact.Component {
         }
     }
 
-    render(props) {
-        const { construct, animText, itemInfo } = props;
+    render() {
+        const { construct, animText, animSkill, itemInfo } = this.props;
         if (animText && animText.constructId === construct.id) {
             const itemSourceDescription = () => {
-                const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animText.skill));
+                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;
@@ -60,7 +60,7 @@ class AnimText extends preact.Component {
 
             return (
                 <div class="combat-text">
-                    <h2><span>{animText.skill}</span></h2>
+                    <h2><span>{animSkill}</span></h2>
                     <span>{itemSourceDescription()}</span>
                     {animationTextHtml()}
                 </div>

client/src/components/targeting.arrows.jsx

@@ -6,11 +6,11 @@ const reactStringReplace = require('react-string-replace');
 const throttle = require('lodash/throttle');
 
 const shapes = require('./shapes');
-const { effectInfo, removeTier } = require('../utils');
+const { effectInfo } = require('../utils');
 
 const addState = connect(
-    ({ game, account, animSkill, animating, itemInfo, gameEffectInfo, tutorialGame }) =>
-        ({ game, account, animSkill, animating, itemInfo, gameEffectInfo, tutorialGame })
+    ({ game, account, animating, itemInfo, gameEffectInfo, tutorialGame }) =>
+        ({ game, account, animating, itemInfo, gameEffectInfo, tutorialGame })
 );
 
 class TargetSvg extends Component {

client/src/events.jsx

@@ -87,48 +87,33 @@ function registerEvents(store) {
                 store.dispatch(actions.setAnimating(true));
                 store.dispatch(actions.setGameSkillInfo(null));
                 // stop fetching the game state til animations are done
-                const newRes = game.events[currentGame.events.length];
+                const newRes = game.events[currentGame.events.length - 1];
                 return eachSeries(newRes, (r, cb) => {
-                    if (!r.event) return cb();
-                    let timeout = animations.getTime(r.stages);
+                    // if (!r.event) return cb();
+                    const timeout = r.delay;
                     const anims = animations.getObjects(r, game, account);
-                    const text = animations.getText(r);
-                    store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game)));
-                    if (anims.animSkill) store.dispatch(actions.setAnimSkill(anims.animSkill));
 
-                    if (r.stages.includes('START_SKILL') && anims.animSource) {
-                        store.dispatch(actions.setAnimSource(anims.animSource));
-                        store.dispatch(actions.setAnimText(null));
-                    }
 
-                    if (r.stages.includes('END_SKILL') && anims.animTarget) {
+                    if (r.variant[0].includes('Hit')) {
+                        if (r.variant[0] === 'HitCast') {
+                            store.dispatch(actions.setAnimSource(anims.animSource));
+                        }
+                        const { skill } = r.variant[1];
+                        store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game)));
+                        store.dispatch(actions.setAnimSkill(skill));
                         store.dispatch(actions.setAnimTarget(anims.animTarget));
                         store.dispatch(actions.setAnimText(null));
-                        if (animations.isCbAnim(anims.animSkill)) store.dispatch(actions.setAnimCb(cb));
+                        if (animations.isCbAnim(skill)) store.dispatch(actions.setAnimCb(cb));
+                        return setTimeout(() => {
+                            store.dispatch(actions.setAnimSource(null));
+                            store.dispatch(actions.setAnimTarget(null));
+                            if (r.variant[0].includes('Hit') && animations.isCbAnim(r.variant[1].skill)) return true;
+                            return cb();
+                        }, timeout);
                     }
-
-                    if (r.stages.includes('POST_SKILL') && text) {
-                        // timeout to prevent text classes from being added too soon
-                        if (timeout === TIMES.POST_SKILL_DURATION_MS) {
-                            store.dispatch(actions.setAnimText(text));
-                        } else {
-                            setTimeout(
-                                () => store.dispatch(actions.setAnimText(text)),
-                                timeout - TIMES.POST_SKILL_DURATION_MS - 700
-                            );
-                            timeout -= 700;
-                        }
-                    }
-
-                    return setTimeout(() => {
-                        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 (r.stages.includes('END_SKILL') && animations.isCbAnim(anims.animSkill)) return true;
-                        return cb();
-                    }, timeout);
+                    const text = animations.getText(r);
+                    store.dispatch(actions.setAnimText(text));
+                    return setTimeout(cb, timeout);
                 }, err => {
                     if (err) return console.error(err);
                     // clear animation state