From 1af39ea368ff62d884afeb839d31080e34ab7bb4 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 15 Apr 2019 21:49:58 +1000
Subject: [PATCH] highlight active skills

---
 client/cryps.css         |  7 +++++++
 client/src/constants.jsx |  6 +++---
 client/src/utils.jsx     | 24 +++++++++++++++++++-----
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/client/cryps.css b/client/cryps.css
index 69982099..2441a4f0 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -648,6 +648,13 @@ text.combat-text {
 /*
 CRYP DAMAGE
 */
+
+.cryp-box.active-skill {
+    filter: drop-shadow(0 0 0.2em silver);
+    border-width: 5px;
+    border-color: silver;
+}
+
 .cryp-box.red-damage {
     filter: drop-shadow(0 0 0.2em red);
     border-width: 5px;
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index 4f8ac7c3..882d8ce8 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -1,9 +1,9 @@
 module.exports = {
     TIMES: {
         RESOLUTION_TIME_MS: 2000,
-        START_SKILL: 750,
-        END_SKILL: 750,
-        POST_SKILL: 750,
+        START_SKILL: 1000,
+        END_SKILL: 1000,
+        POST_SKILL: 1000,
     },
 
     ITEMS: {
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 8c7eedf3..f25c95b1 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -99,12 +99,17 @@ const COLOUR_ICONS = {
 
 function eventClasses(resolution, cryp) {
     if (!resolution) return '';
+    const startSkill = resolution.stage === 'START_SKILL';
+    const endSkill = resolution.stage === 'END_SKILL';
+    const postSkill = resolution.stage === 'POST_SKILL';
+    const source = cryp.id === resolution.source.id;
+    const target = cryp.id === resolution.target.id;
 
     // not involved at all. blur them
-    if (cryp.id !== resolution.source.id && cryp.id !== resolution.target.id) return 'unfocus';
+    if (!(source || target)) return 'unfocus';
 
     // not the target. just ignore for now
-    if (cryp.id !== resolution.target.id) return '';
+    // if (cryp.id !== resolution.target.id) return '';
 
     const [type, event] = resolution.event;
 
@@ -126,13 +131,19 @@ function eventClasses(resolution, cryp) {
 
     if (type === 'Damage') {
         const { skill, amount, mitigation, colour } = event;
-        if (colour === 'RedDamage' && resolution.stage === 'POST_SKILL') return 'red-damage';
-        if (colour === 'BlueDamage' && resolution.stage === 'POST_SKILL') return 'blue-damage';
-        if (colour === 'GreenDamage' && resolution.stage === 'POST_SKILL') return 'green-damage';
+        // Highlight the flow of damage from source -> target
+        if (source && startSkill) return 'active-skill';
+        if (target && endSkill) return 'active-skill';
+
+        if (colour === 'RedDamage' && target && postSkill) return 'red-damage';
+        if (colour === 'BlueDamage' && target && postSkill) return 'blue-damage';
+        if (colour === 'GreenDamage' && target && postSkill) return 'green-damage';
     }
 
     if (type === 'Healing') {
         const { skill, amount, overhealing } = event;
+        if (source && startSkill) return 'active-skill';
+        if (target && endSkill) return 'active-skill';
     }
 
     if (type === 'Inversion') {
@@ -145,6 +156,8 @@ function eventClasses(resolution, cryp) {
 
     if (type === 'Effect') {
         const { skill, effect, duration } = event;
+        if (source && startSkill) return 'active-skill';
+        if (target && endSkill) return 'active-skill';
     }
 
     if (type === 'Removal') {
@@ -180,6 +193,7 @@ function getCombatText(cryp, resolution) {
         const { skill, disable } = event;
         if (startSkill && source) return `${skill}`;
         if (endSkill && target) return `${skill}`;
+        if (postSkill && target) return `${disable}`;
     }
 
     if (type === 'Immunity') {