resolution events and colours

client/cryps.css

@@ -596,22 +596,6 @@ header {
     filter: blur(5px);
 }
 
-.cryp-box.red-damage {
-    filter: drop-shadow(0 0 0.2em red);
-    border-width: 5px;
-    color: red;
-    border-color: red;
-}
-
-.red-damage button {
-    border: 3px solid red;
-    color: red;
-}
-
-.red-damage .stats {
-    border-top: 3px solid red;
-}
-
 .team-player {
     padding: 0;
 }
@@ -655,6 +639,60 @@ header {
     display: none;
 }
 
+/*
+CRYP DAMAGE
+*/
+.cryp-box.red-damage {
+    filter: drop-shadow(0 0 0.2em red);
+    border-width: 5px;
+    color: red;
+    border-color: red;
+}
+
+.red-damage button {
+    border: 3px solid red;
+    color: red;
+}
+
+.red-damage .stats {
+    border-top: 3px solid red;
+}
+
+.cryp-box.blue-damage {
+    filter: drop-shadow(0 0 0.2em blue);
+    border-width: 5px;
+    color: blue;
+    border-color: blue;
+}
+
+.blue-damage button {
+    border: 3px solid blue;
+    color: blue;
+}
+
+.blue-damage .stats {
+    border-top: 3px solid blue;
+}
+
+.cryp-box.green-damage {
+    filter: drop-shadow(0 0 0.2em green);
+    border-width: 5px;
+    color: green;
+    border-color: green;
+}
+
+.green-damage button {
+    border: 3px solid green;
+    color: green;
+}
+
+.green-damage .stats {
+    border-top: 3px solid green;
+}
+
+/*
+    MOBILE
+*/
 @media (max-width: 1000px) {
     .selected-skills {
         display: none;

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">

client/src/events.jsx

@@ -23,6 +23,7 @@ function registerEvents(store) {
             if (game.resolved.length !== currentGame.resolved.length) {
                 const newRes = game.resolved.slice(currentGame.resolved.length);
                 return eachSeries(newRes, (r, cb) => {
+                    if (r.event[0] === 'Disable') return cb();
                     store.dispatch(actions.setResolution(r));
                     return setTimeout(cb, TIMES.RESOLUTION_TIME_MS);
                 }, err => {

client/src/utils.jsx

@@ -97,7 +97,15 @@ const COLOUR_ICONS = {
     green: { colour: 'green', caption: 'green', svg: shapes.square },
 };
 
-function eventClasses(resolution) {
+function eventClasses(resolution, cryp) {
+    if (!resolution) return '';
+
+    // not involved at all. blur them
+    if (cryp.id !== resolution.source.id && cryp.id !== resolution.target.id) return 'unfocus';
+
+    // not the target. just ignore for now
+    if (cryp.id !== resolution.target.id) return '';
+
     const [type, event] = resolution.event;
 
     if (type === 'Ko') {
@@ -118,6 +126,10 @@ function eventClasses(resolution) {
 
     if (type === 'Damage') {
         const { skill, amount, mitigation, colour } = event;
+
+        if (colour === 'RedDamage') return 'red-damage';
+        if (colour === 'BlueDamage') return 'blue-damage';
+        if (colour === 'GreenDamage') return 'green-damage';
     }
 
     if (type === 'Healing') {
@@ -148,7 +160,7 @@ function eventClasses(resolution) {
         const { skill, evasion_rating } = event;
     }
 
-    return false;
+    return '';
 }
 
 module.exports = {
@@ -156,6 +168,7 @@ module.exports = {
     numSort,
     genAvatar,
     requestAvatar,
+    eventClasses,
     NULL_UUID,
     STATS,
     SPECS,

server/src/cryp.rs

@@ -338,7 +338,7 @@ impl Cryp {
         let mut rng = thread_rng();
 
         let i = match available.len() {
-            1 => 1,
+            1 => 0,
             _ => rng.gen_range(0, available.len() - 1),
         };