ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'combatdelay'

Browse Source
This commit is contained in:
ntr 2019-04-17 13:00:21 +10:00
commit a581f9ad3f
5 changed files with 138 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/cryps.css
View File

@ -589,10 +589,12 @@ header {
.cryp-box.ko {
animation: none;
opacity: 0.5;
/*opacity: 0.35;*/
filter: grayscale(100%);
}
.cryp-box.unfocus {
/*opacity: 0.65;*/
filter: blur(5px);
}
@ -648,6 +650,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;
@ -708,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
*/

1
client/src/components/game.cryp.jsx
View File

@ -59,7 +59,6 @@ function GameCryp(props) {
} = props;
const ko = cryp.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, cryp);
const skills = range(0, 3)

3
client/src/constants.jsx
View File

@ -1,6 +1,9 @@
module.exports = {
TIMES: {
RESOLUTION_TIME_MS: 2000,
START_SKILL: 1000,
END_SKILL: 1000,
POST_SKILL: 1000,
},
ITEMS: {

15
client/src/events.jsx
View File

@ -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) {
@ -26,8 +27,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 sub events for combat animations
const sequence = getCombatSequence(r.event);
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));

108
client/src/utils.jsx
View File

@ -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
@ -99,17 +99,22 @@ 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;
if (type === 'Ko') {
return 'ko';
if (target) return 'ko';
}
if (type === 'Disable') {
@ -126,14 +131,34 @@ function eventClasses(resolution, cryp) {
if (type === 'Damage') {
const { skill, amount, mitigation, colour } = event;
// Highlight the flow of damage from source -> target
if (source && startSkill) return 'active-skill';
if (target && endSkill) return 'active-skill';
// 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 (colour === 'RedDamage') return 'red-damage';
if (colour === 'BlueDamage') 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') {
@ -146,6 +171,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') {
@ -154,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') {
@ -163,27 +199,48 @@ function eventClasses(resolution, cryp) {
return '';
}
function getCombatSequence(event) {
if (!event) return false;
// Skip combat animations depending on event type, expandable in future
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'];
}
function getCombatText(cryp, resolution) {
if (!resolution) 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') {
const { skill, disable } = event;
if (startSkill && source) return `${skill}`;
if (endSkill && target) return `${skill}`;
if (postSkill && target) return `${disable}`;
}
if (type === 'Immunity') {
const { skill, immunity } = event;
return 'IMMUNE';
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') {
@ -191,32 +248,50 @@ 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 (startSkill && source) return `${skill}`;
if (endSkill && target) return `${skill}`;
if (postSkill && target) return `${amount} (${overhealing} OH)`;
}
if (type === 'Inversion') {
const { skill } = event;
return 'INVERT';
if (startSkill && source) return `${skill}`;
if (endSkill && target) return `${skill}`;
if (postSkill && target) return 'INVERT';
}
if (type === 'Reflection') {
const { skill } = event;
return 'REFLECT';
if (startSkill && source) return `${skill}`;
if (endSkill && target) return `${skill}`;
if (postSkill && target) return 'REFLECT';
}
if (type === 'Effect') {
const { skill, effect, duration } = event;
return `+ ${effect} ${duration}T`;
if (startSkill && source) return `${skill}`;
if (endSkill && target) return `${skill}`;
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;
return `- ${effect}`;
if (postSkill && target) return `- ${effect}`;
}
@ -229,6 +304,7 @@ module.exports = {
genAvatar,
requestAvatar,
eventClasses,
getCombatSequence,
getCombatText,
NULL_UUID,
STATS,