Reduce life during combat sequence

client/src/components/game.component.jsx

@@ -3,7 +3,7 @@ const range = require('lodash/range');
 
 const molecule = require('./molecule');
 
-const { STATS, eventClasses, getCombatText } = require('../utils');
+const { STATS, eventClasses, eventLife, getCombatText } = require('../utils');
 
 const GameCryp = require('./game.cryp');
 const SkillBtn = require('./skill.btn');
@@ -108,8 +108,9 @@ function GamePanel(props) {
     }
 
     function OpponentCryp(cryp, i) {
-        const ko = cryp.green_life.value === 0 ? 'ko' : '';
         const classes = eventClasses(resolution, cryp);
+        eventLife(resolution, cryp);
+        const ko = cryp.green_life.value === 0 ? 'ko' : '';
 
         const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
             <figure key={j} alt={s.stat}>

client/src/components/game.cryp.jsx

@@ -4,7 +4,7 @@ const range = require('lodash/range');
 
 const molecule = require('./molecule');
 const actions = require('../actions');
-const { STATS, eventClasses, getCombatText } = require('../utils');
+const { STATS, eventClasses, eventLife, getCombatText } = require('../utils');
 
 const SkillBtn = require('./skill.btn');
 
@@ -58,9 +58,10 @@ function GameCryp(props) {
         selectSkillTarget,
     } = props;
 
-    const ko = cryp.green_life.value === 0 ? 'ko' : '';
 
     const classes = eventClasses(resolution, cryp);
+    eventLife(resolution, cryp);
+    const ko = cryp.green_life.value === 0 ? 'ko' : '';
 
     const skills = range(0, 3)
         .map(i => <SkillBtn key={i} cryp={cryp} i={i} />);

client/src/utils.jsx

@@ -114,7 +114,7 @@ function eventClasses(resolution, cryp) {
     const [type, event] = resolution.event;
 
     if (type === 'Ko') {
-        return 'ko';
+        if (target) return 'ko';
     }
 
     if (type === 'Disable') {
@@ -134,7 +134,6 @@ function eventClasses(resolution, cryp) {
         // 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';
@@ -175,6 +174,35 @@ function eventClasses(resolution, cryp) {
     return '';
 }
 
+function eventLife(resolution, cryp) {
+    if (!resolution) return false;
+    if (!(resolution.stage === 'POST_SKILL' && cryp.id === resolution.target.id)) return false;
+
+    const [type, event] = resolution.event;
+
+    if (type === 'Damage') {
+        const { amount, mitigation, colour } = event;
+
+        const greenDamage = amount <= cryp.green_life.value
+            ? amount
+            : cryp.green_life.value;
+        cryp.green_life.value -= greenDamage;
+
+        const getMitigationLife = () => {
+            if (colour === 'RedDamage') return 'red_life';
+            if (colour === 'BlueDamage') return 'blue_life';
+            return false;
+        };
+        const mitiLife = getMitigationLife();
+        const mitigationDmg = mitigation <= cryp[mitiLife].value
+            ? mitigation
+            : cryp[mitiLife].value;
+        cryp[mitiLife].value -= mitigationDmg;
+    }
+    return true;
+}
+
+
 function getCombatSequence(event) {
     if (!event) return false;
     // Skip combat animations depending on event type, expandable in future
@@ -270,6 +298,7 @@ module.exports = {
     genAvatar,
     requestAvatar,
     eventClasses,
+    eventLife,
     getCombatSequence,
     getCombatText,
     NULL_UUID,