From 5681b43b0405d5cc1a2400ed109108da606f5306 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 15 Apr 2019 14:37:14 +1000 Subject: [PATCH 01/12] staging resolutions for future animations --- client/src/constants.jsx | 3 +++ client/src/events.jsx | 14 ++++++++++++-- client/src/utils.jsx | 8 ++++---- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/client/src/constants.jsx b/client/src/constants.jsx index 9582d8b6..dbe87b53 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -1,6 +1,9 @@ module.exports = { TIMES: { RESOLUTION_TIME_MS: 2000, + START_SKILL: 1000, + END_SKILL: 1000, + POST_SKILL: 1500, }, ITEMS: { diff --git a/client/src/events.jsx b/client/src/events.jsx index 32927d6e..b13423de 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -24,8 +24,18 @@ function registerEvents(store) { const newRes = game.resolved.slice(currentGame.resolved.length); return eachSeries(newRes, (r, cb) => { if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); - store.dispatch(actions.setResolution(r)); - return setTimeout(cb, TIMES.RESOLUTION_TIME_MS); + // Create 3 new events for combat animations + const sequence = ['START_SKILL', 'END_SKILL', 'POST_SKILL']; + return eachSeries(sequence, (stage, sCb) => { + const stagedR = Object.create(r); + stagedR.stage = stage; + store.dispatch(actions.setResolution(stagedR)); + return setTimeout(sCb, TIMES[stage]); + }, err => { + if (err) return console.error(err); + // Finished this resolution + return cb(); + }); }, err => { if (err) return console.error(err); store.dispatch(actions.setResolution(null)); diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 00a24307..b97f3b2b 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -126,10 +126,9 @@ function eventClasses(resolution, cryp) { 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 (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'; } if (type === 'Healing') { @@ -165,6 +164,7 @@ function eventClasses(resolution, cryp) { function getCombatText(cryp, resolution) { if (!resolution) return ''; + if (resolution.stage !== 'POST_SKILL') return ''; if (cryp.id !== resolution.target.id) return ''; const [type, event] = resolution.event; From a8cf47ff518c47f52d450c3b55f600b9895936f7 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 15 Apr 2019 16:33:15 +1000 Subject: [PATCH 02/12] Combat source / target text --- client/src/constants.jsx | 6 +++--- client/src/utils.jsx | 27 ++++++++++++++++----------- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/client/src/constants.jsx b/client/src/constants.jsx index dbe87b53..4f8ac7c3 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -1,9 +1,9 @@ module.exports = { TIMES: { RESOLUTION_TIME_MS: 2000, - START_SKILL: 1000, - END_SKILL: 1000, - POST_SKILL: 1500, + START_SKILL: 750, + END_SKILL: 750, + POST_SKILL: 750, }, ITEMS: { diff --git a/client/src/utils.jsx b/client/src/utils.jsx index b97f3b2b..bf124627 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -32,7 +32,7 @@ const numSort = (k, desc) => { }; }; -const genAvatar = (name) => { +const genAvatar = name => { let hash = 0; if (name.length === 0) return hash; // Probs don't need to hash using the whole string @@ -164,13 +164,16 @@ function eventClasses(resolution, cryp) { function getCombatText(cryp, resolution) { if (!resolution) return ''; - if (resolution.stage !== 'POST_SKILL') return ''; - if (cryp.id !== resolution.target.id) return ''; const [type, event] = resolution.event; + const source = cryp.id === resolution.source.id; + const target = cryp.id === resolution.target.id; + const startSkill = resolution.stage === 'START_SKILL'; + const endSkill = resolution.stage === 'END_SKILL'; + const postSkill = resolution.stage === 'POST_SKILL'; if (type === 'Ko') { - return 'KO!'; + if (postSkill && target) return 'KO!'; } if (type === 'Disable') { @@ -179,7 +182,7 @@ function getCombatText(cryp, resolution) { if (type === 'Immunity') { const { skill, immunity } = event; - return 'IMMUNE'; + if (postSkill && target) return 'IMMUNE'; } if (type === 'TargetKo') { @@ -191,32 +194,34 @@ function getCombatText(cryp, resolution) { const mitigationText = mitigation ? `(${mitigation})` : ''; - return `${amount} ${mitigationText}`; + if (startSkill && source) return `${skill}`; + if (endSkill && target) return `${skill}`; + if (postSkill && target) return `${amount} ${mitigationText}`; } if (type === 'Healing') { const { skill, amount, overhealing } = event; - return `${amount} (${overhealing}OH)`; + if (postSkill && target) return `${amount} (${overhealing}OH)`; } if (type === 'Inversion') { const { skill } = event; - return 'INVERT'; + if (postSkill && target) return 'INVERT'; } if (type === 'Reflection') { const { skill } = event; - return 'REFLECT'; + if (postSkill && target) return 'REFLECT'; } if (type === 'Effect') { const { skill, effect, duration } = event; - return `+ ${effect} ${duration}T`; + if (postSkill && target) return `+ ${effect} ${duration}T`; } if (type === 'Removal') { const { effect } = event; - return `- ${effect}`; + if (postSkill && target) return `- ${effect}`; } From f0fad93966c3c02b4ca76b5b859302d83016b1ae Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 15 Apr 2019 17:11:22 +1000 Subject: [PATCH 03/12] Add skill text for other types --- client/src/utils.jsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/client/src/utils.jsx b/client/src/utils.jsx index bf124627..8c7eedf3 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -178,15 +178,21 @@ function getCombatText(cryp, resolution) { if (type === 'Disable') { const { skill, disable } = event; + if (startSkill && source) return `${skill}`; + if (endSkill && target) return `${skill}`; } if (type === 'Immunity') { const { skill, immunity } = event; + if (startSkill && source) return `${skill}`; + if (endSkill && target) return `${skill}`; if (postSkill && target) return 'IMMUNE'; } if (type === 'TargetKo') { const { skill } = event; + if (startSkill && source) return `${skill}`; + if (endSkill && target) return `${skill}`; } if (type === 'Damage') { @@ -201,21 +207,29 @@ function getCombatText(cryp, resolution) { if (type === 'Healing') { const { skill, amount, overhealing } = event; + if (startSkill && source) return `${skill}`; + if (endSkill && target) return `${skill}`; if (postSkill && target) return `${amount} (${overhealing}OH)`; } if (type === 'Inversion') { const { skill } = event; + if (startSkill && source) return `${skill}`; + if (endSkill && target) return `${skill}`; if (postSkill && target) return 'INVERT'; } if (type === 'Reflection') { const { skill } = event; + if (startSkill && source) return `${skill}`; + if (endSkill && target) return `${skill}`; if (postSkill && target) return 'REFLECT'; } if (type === 'Effect') { const { skill, effect, duration } = event; + if (startSkill && source) return `${skill}`; + if (endSkill && target) return `${skill}`; if (postSkill && target) return `+ ${effect} ${duration}T`; } From 1af39ea368ff62d884afeb839d31080e34ab7bb4 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 15 Apr 2019 21:49:58 +1000 Subject: [PATCH 04/12] 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') { From 0974a24eb872420b68e0e8b75a5fef9d77d62419 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 16 Apr 2019 10:09:46 +1000 Subject: [PATCH 05/12] Remove KO delay and filter blur --- client/cryps.css | 4 ++-- client/src/events.jsx | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/client/cryps.css b/client/cryps.css index 2441a4f0..54417fec 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -588,12 +588,12 @@ header { .cryp-box.ko { animation: none; - opacity: 0.5; + opacity: 0.35; filter: grayscale(100%); } .cryp-box.unfocus { - filter: blur(5px); + opacity: 0.65; } text.combat-text { diff --git a/client/src/events.jsx b/client/src/events.jsx index b13423de..96ad39be 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -24,8 +24,11 @@ function registerEvents(store) { const newRes = game.resolved.slice(currentGame.resolved.length); return eachSeries(newRes, (r, cb) => { if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); - // Create 3 new events for combat animations - const sequence = ['START_SKILL', 'END_SKILL', 'POST_SKILL']; + // Create sub events for combat animations + // Some types only need to animate final effect + const sequence = ['Ko'].includes(r.event[0]) + ? ['POST_SKILL'] + : ['START_SKILL', 'END_SKILL', 'POST_SKILL']; return eachSeries(sequence, (stage, sCb) => { const stagedR = Object.create(r); stagedR.stage = stage; From a359b193eef4a50f8e2c6b4feb0c642fe7fe4107 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 16 Apr 2019 11:06:30 +1000 Subject: [PATCH 06/12] changed delays for decay tick --- client/src/events.jsx | 6 ++---- client/src/utils.jsx | 9 +++++++++ 2 files changed, 11 insertions(+), 4 deletions(-) mode change 100644 => 100755 client/src/events.jsx diff --git a/client/src/events.jsx b/client/src/events.jsx old mode 100644 new mode 100755 index 96ad39be..1cf4ffca --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -3,6 +3,7 @@ const eachSeries = require('async/eachSeries'); const actions = require('./actions'); const { TIMES } = require('./constants'); +const { getCombatSequence } = require('./utils'); function registerEvents(store) { function setCryps(cryps) { @@ -25,10 +26,7 @@ function registerEvents(store) { return eachSeries(newRes, (r, cb) => { if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); // Create sub events for combat animations - // Some types only need to animate final effect - const sequence = ['Ko'].includes(r.event[0]) - ? ['POST_SKILL'] - : ['START_SKILL', 'END_SKILL', 'POST_SKILL']; + const sequence = getCombatSequence(r.event); return eachSeries(sequence, (stage, sCb) => { const stagedR = Object.create(r); stagedR.stage = stage; diff --git a/client/src/utils.jsx b/client/src/utils.jsx index f25c95b1..fa34190d 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -175,6 +175,14 @@ function eventClasses(resolution, cryp) { return ''; } +function getCombatSequence(event) { + if (!event) return false; + // Skip combat animations depending on event type, expandable in future + if (['Ko'].includes(event[0])) return ['POST_SKILL']; + if (['DecayTick'].includes(event[1].skill)) return ['END_SKILL', 'POST_SKILL']; + return ['START_SKILL', 'END_SKILL', 'POST_SKILL']; +} + function getCombatText(cryp, resolution) { if (!resolution) return ''; @@ -262,6 +270,7 @@ module.exports = { genAvatar, requestAvatar, eventClasses, + getCombatSequence, getCombatText, NULL_UUID, STATS, From 3b8eaa5649c52774c609298a3919d40573c40bd6 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 16 Apr 2019 11:07:10 +1000 Subject: [PATCH 07/12] file mode --- client/src/events.jsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) mode change 100755 => 100644 client/src/events.jsx diff --git a/client/src/events.jsx b/client/src/events.jsx old mode 100755 new mode 100644 From fa8548eed87f8fd0b6bdb35d8545366bc60b8934 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 16 Apr 2019 12:41:39 +1000 Subject: [PATCH 08/12] Reduce life during combat sequence --- client/src/components/game.component.jsx | 5 ++-- client/src/components/game.cryp.jsx | 5 ++-- client/src/utils.jsx | 33 ++++++++++++++++++++++-- 3 files changed, 37 insertions(+), 6 deletions(-) diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 3a095f43..4d193f52 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, 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) => (
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx index 2bcf6b0b..6e772c01 100644 --- a/client/src/components/game.cryp.jsx +++ b/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 => ); diff --git a/client/src/utils.jsx b/client/src/utils.jsx index fa34190d..994667ec 100644 --- a/client/src/utils.jsx +++ b/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, From a45cbbcae85a5f96176b9a2fd0a6bcfe9508f44a Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 16 Apr 2019 21:36:18 +1000 Subject: [PATCH 09/12] added heal, refactor cryp dmg during combat --- client/src/components/game.component.jsx | 5 +-- client/src/components/game.cryp.jsx | 6 +-- client/src/utils.jsx | 54 +++++++++--------------- 3 files changed, 24 insertions(+), 41 deletions(-) diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 4d193f52..3a095f43 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, eventClasses, eventLife, getCombatText } = require('../utils'); +const { STATS, eventClasses, getCombatText } = require('../utils'); const GameCryp = require('./game.cryp'); const SkillBtn = require('./skill.btn'); @@ -108,9 +108,8 @@ function GamePanel(props) { } function OpponentCryp(cryp, i) { - const classes = eventClasses(resolution, cryp); - eventLife(resolution, cryp); const ko = cryp.green_life.value === 0 ? 'ko' : ''; + const classes = eventClasses(resolution, cryp); const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx index 6e772c01..9d04f6c7 100644 --- a/client/src/components/game.cryp.jsx +++ b/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, eventLife, getCombatText } = require('../utils'); +const { STATS, eventClasses, getCombatText } = require('../utils'); const SkillBtn = require('./skill.btn'); @@ -58,10 +58,8 @@ function GameCryp(props) { selectSkillTarget, } = props; - - const classes = eventClasses(resolution, cryp); - eventLife(resolution, cryp); const ko = cryp.green_life.value === 0 ? 'ko' : ''; + const classes = eventClasses(resolution, cryp); const skills = range(0, 3) .map(i => ); diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 994667ec..7dec6fa8 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -134,15 +134,31 @@ 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'; + + // Deal damage to cryp and return effect + if (target && postSkill) { + cryp.green_life.value -= amount; + if (colour === 'RedDamage') { + cryp.red_life.value -= mitigation; + return 'red-damage'; + } + if (colour === 'BlueDamage') { + cryp.blue_life.value -= mitigation; + return 'blue-damage'; + } + if (colour === 'GreenDamage') return 'green-damage'; + } + } if (type === 'Healing') { const { skill, amount, overhealing } = event; if (source && startSkill) return 'active-skill'; if (target && endSkill) return 'active-skill'; + if (target && postSkill) { + cryp.green_life.value += amount; + return 'green-damage'; + } } if (type === 'Inversion') { @@ -174,35 +190,6 @@ 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 @@ -259,7 +246,7 @@ function getCombatText(cryp, resolution) { const { skill, amount, overhealing } = event; if (startSkill && source) return `${skill}`; if (endSkill && target) return `${skill}`; - if (postSkill && target) return `${amount} (${overhealing}OH)`; + if (postSkill && target) return `${amount} (${overhealing} OH)`; } if (type === 'Inversion') { @@ -298,7 +285,6 @@ module.exports = { genAvatar, requestAvatar, eventClasses, - eventLife, getCombatSequence, getCombatText, NULL_UUID, From cbe75ead326e985f30874c7e4e968d61ab7aa771 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 17 Apr 2019 09:03:06 +1000 Subject: [PATCH 10/12] Skip source for all ticks, fix throw sequence --- client/src/utils.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 7dec6fa8..4bd41fc7 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -193,8 +193,10 @@ function eventClasses(resolution, cryp) { function getCombatSequence(event) { if (!event) return false; // Skip combat animations depending on event type, expandable in future - if (['Ko'].includes(event[0])) return ['POST_SKILL']; - if (['DecayTick'].includes(event[1].skill)) return ['END_SKILL', 'POST_SKILL']; + const dotTicks = ['DecayTick', 'CorruptionTick', 'TriageTick', 'SiphonTick', 'StrangleTick']; + if (['Ko'].includes(event[0]) + || (event[1].skill === 'Throw' && event[1].effect === 'Vulnerable')) return ['POST_SKILL']; + if (dotTicks.includes(event[1].skill)) return ['END_SKILL', 'POST_SKILL']; return ['START_SKILL', 'END_SKILL', 'POST_SKILL']; } From 7045e9ff9cffc1fc7bee04855abfe20fb8acb243 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 17 Apr 2019 09:09:32 +1000 Subject: [PATCH 11/12] Added back blur --- client/cryps.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/cryps.css b/client/cryps.css index 54417fec..ddf73b37 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -588,12 +588,14 @@ header { .cryp-box.ko { animation: none; - opacity: 0.35; + opacity: 0.5; + /*opacity: 0.35;*/ filter: grayscale(100%); } .cryp-box.unfocus { - opacity: 0.65; + /*opacity: 0.65;*/ + filter: blur(5px); } text.combat-text { From a202af4d3dfdeffd313b0e2ea92ca343b8d7ae90 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 17 Apr 2019 09:39:39 +1000 Subject: [PATCH 12/12] added recharge --- client/cryps.css | 21 +++++++++++++++++++++ client/src/utils.jsx | 17 +++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/client/cryps.css b/client/cryps.css index ddf73b37..cd190bad 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -717,6 +717,27 @@ CRYP DAMAGE border-top: 3px solid green; } +.cryp-box.purple-damage { + filter: drop-shadow(0 0 0.2em purple); + border-width: 5px; + color: purple; + border-color: purple; +} + +.purple-damage button { + border: 3px solid purple; + color: purple; +} + +.purple-damage text { + fill: purple; +} + +.purple-damage .stats { + border-top: 3px solid purple; +} + + /* MOBILE */ diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 4bd41fc7..b6bb2928 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -181,6 +181,15 @@ function eventClasses(resolution, cryp) { if (type === 'Recharge') { const { skill, red, blue } = event; + if (source && startSkill) return 'active-skill'; + if (target && endSkill) return 'active-skill'; + if (target && postSkill) { + cryp.red_life.value += red; + cryp.blue_life.value += blue; + if (red > 0 && blue > 0) return 'purple-damage'; + if (red > 0) return 'red-damage'; + if (blue > 0) return 'blue-damage'; + } } if (type === 'Evasion') { @@ -272,6 +281,14 @@ function getCombatText(cryp, resolution) { if (postSkill && target) return `+ ${effect} ${duration}T`; } + if (type === 'Recharge') { + const { skill, red, blue } = event; + if (startSkill && source) return `${skill}`; + if (endSkill && target) return `${skill}`; + if (postSkill && target) return `+${red}R ${blue}B`; + } + + if (type === 'Removal') { const { effect } = event; if (postSkill && target) return `- ${effect}`;