no longer set resolution, everything from event loop

client/src/components/game.construct.jsx

@@ -3,7 +3,7 @@ const { Component } = require('preact');
 const preact = require('preact');
 const range = require('lodash/range');
 
-const { STATS, eventClasses } = require('../utils');
+const { STATS } = require('../utils');
 const { ConstructAvatar, ConstructText } = require('./construct');
 const { ConstructAnimation } = require('./animations');
 const shapes = require('./shapes');
@@ -21,8 +21,9 @@ const addState = connect(
             game,
             account,
             activeSkill,
+            animFocus,
             resolution,
-
+            animating,
             animText,
         } = state;
 
@@ -41,13 +42,31 @@ const addState = connect(
             game,
             account,
             resolution,
+            animating,
+            animFocus,
             animText,
             activeSkill,
             selectSkillTarget,
         };
-    },
+    }
 );
 
+const eventClasses = (animating, animFocus, construct, postSkill) => {
+    if (!animating) return '';
+    if (!postSkill) {
+        if (animFocus.includes(construct.id)) return '';
+        return 'unfocus';
+    }
+    if (postSkill.constructId !== construct.id) {
+        if (animFocus.includes(construct.id)) return '';
+        return 'unfocus';
+    }
+    if (postSkill.effects) construct.effects = postSkill.effects;
+    construct.green_life.value = postSkill.life.green;
+    construct.red_life.value = postSkill.life.red;
+    construct.blue_life.value = postSkill.life.blue;
+    return postSkill.css;
+};
 
 class GameConstruct extends Component {
     constructor() {
@@ -58,21 +77,17 @@ class GameConstruct extends Component {
     render() {
         const {
             i,
-            game,
-            account,
+            animating,
             construct,
             player,
             activeSkill,
             selectSkillTarget,
-
-            // todo remove dep
-            resolution,
-
+            animFocus,
             animText,
         } = this.props;
 
         const ko = construct.green_life.value === 0 ? 'ko' : '';
-        const classes = eventClasses(game, account, resolution, construct, animText);
+        const classes = eventClasses(animating, animFocus, construct, animText);
 
         const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
             <div key={j} alt={STATS[s].stat}>
@@ -83,7 +98,7 @@ class GameConstruct extends Component {
         ));
 
         const skills = range(0, 3)
-            .map(j => <SkillBtn key={j} construct={construct} i={j} j={i} />);
+            .map(j => <SkillBtn key={j} construct={construct} i={j} j={i} animating={animating} />);
 
         let crypSkills = <div> &nbsp; </div>;
         if (player) crypSkills = (<div class="skills"> {skills} </div>);