resolution events and colours

client/src/components/game.component.jsx

@@ -3,7 +3,7 @@ const range = require('lodash/range');
 
 const molecule = require('./molecule');
 
-const { STATS } = require('../utils');
+const { STATS, eventClasses } = require('../utils');
 
 // const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R'];
 
@@ -140,11 +140,7 @@ function GamePanel(props) {
 
     function Cryp(cryp) {
         const ko = cryp.green_life.value === 0 ? 'ko' : '';
-        const unfocus = () => {
-            if (!resolution) return false;
-            if (cryp.id === resolution.source.id || cryp.id === resolution.target.id) return false;
-            return 'unfocus';
-        };
+        const classes = eventClasses(resolution, cryp);
 
         const skills = range(0, 3).map(i => Skill(cryp, i));
 
@@ -166,7 +162,7 @@ function GamePanel(props) {
                 key={cryp.id}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={onClick}
-                className={`cryp-box ${ko} ${unfocus()}`} >
+                className={`cryp-box ${ko} ${classes}`} >
                 <div className="cryp-box-top">
                     <figure
                         className="img"
@@ -197,12 +193,9 @@ function GamePanel(props) {
 
     function OpponentCryp(cryp, i) {
         const ko = cryp.green_life.value === 0 ? 'ko' : '';
+        const classes = eventClasses(resolution, cryp);
 
-        const unfocus = () => {
-            if (!resolution) return false;
-            if (cryp.id === resolution.source.id || cryp.id === resolution.target.id) return false;
-            return 'unfocus';
-        };
+        console.log(cryp.name, classes);
 
         const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
             <figure key={j} alt={s.stat}>
@@ -214,7 +207,7 @@ function GamePanel(props) {
         return (
             <div
                 key={i}
-                className={`cryp-box ${ko} ${unfocus()}`}
+                className={`cryp-box ${ko} ${classes}`}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={() => selectSkillTarget(cryp.id)} >
                 <div className="cryp-box-top">