diff --git a/client/cryps.css b/client/cryps.css index 327d1bcf..e523e82d 100644 --- a/client/cryps.css +++ b/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; diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index d56cfcdf..c8f28286 100644 --- a/client/src/components/game.component.jsx +++ b/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}`} >