From 56d1162d79d05604b08f8156fde6b4caae54f91c Mon Sep 17 00:00:00 2001 From: ntr Date: Fri, 12 Apr 2019 16:30:47 +1000 Subject: [PATCH] resolution events and colours --- client/cryps.css | 70 ++++++++++++++++++------ client/src/components/game.component.jsx | 19 ++----- client/src/events.jsx | 1 + client/src/utils.jsx | 17 +++++- server/src/cryp.rs | 2 +- 5 files changed, 77 insertions(+), 32 deletions(-) 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}`} >
{ - 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) => (
@@ -214,7 +207,7 @@ function GamePanel(props) { return (
selectSkillTarget(cryp.id)} >
diff --git a/client/src/events.jsx b/client/src/events.jsx index ed82b266..7b8f11e6 100644 --- a/client/src/events.jsx +++ b/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 => { diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 2150d399..c7a6a858 100644 --- a/client/src/utils.jsx +++ b/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, diff --git a/server/src/cryp.rs b/server/src/cryp.rs index 07229a87..eda0c636 100644 --- a/server/src/cryp.rs +++ b/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), };