highlight active skills

This commit is contained in:
Mashy 2019-04-15 21:49:58 +10:00
parent f0fad93966
commit 1af39ea368
3 changed files with 29 additions and 8 deletions

View File

@ -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;

View File

@ -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: {

View File

@ -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') {