diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index 162b848d..c64ad48b 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -206,7 +206,6 @@ font-size: 2em; font-family: 'Jura'; position: absolute; - object-fit: contain; top: 15%; } diff --git a/client/src/animations.socket.jsx b/client/src/animations.socket.jsx index ce2c1eda..9dcc6ebd 100644 --- a/client/src/animations.socket.jsx +++ b/client/src/animations.socket.jsx @@ -28,16 +28,24 @@ function createSocket(store) { return eachSeries(newRes, (r, cb) => { if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); // Create sub events for combat animations - store.dispatch(actions.setResolution(r)); - // const sequence = getCombatSequence(r); + const sequence = getCombatSequence(r); + return eachSeries(sequence, (stages, sCb) => { + const stagedR = Object.create(r); + stagedR.stages = stages; + let timeout = 0; + if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) { + timeout = (TIMES.TARGET_DURATION_MS + TIMES.TARGET_DELAY_MS); + } else if (stages.includes('START_SKILL')) timeout = TIMES.SOURCE_DURATION_MS; + else if (stages.includes('END_SKILL')) timeout = TIMES.TARGET_DURATION_MS; + else if (stages.includes('POST_SKILL')) timeout = TIMES.POST_SKILL_DURATION_MS; + store.dispatch(actions.setResolution(stagedR)); - // sequence.forEach(stage => { - // const stagedR = Object.create(r); - // stagedR.stage = stage; - // store.dispatch(actions.setResolution(stagedR)); - // }); - - setTimeout(cb, TIMES.RESOLUTION_TOTAL_MS); + return setTimeout(sCb, timeout); + }, err => { + if (err) 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/components/animations.jsx b/client/src/components/animations.jsx index fcae22a9..2de8a62f 100644 --- a/client/src/components/animations.jsx +++ b/client/src/components/animations.jsx @@ -25,7 +25,7 @@ const SiphonTick = require('./anims/siphon.tick'); // const Test = require('./anims/test'); -const { removeTier } = require('../utils'); +const { removeTier, getCombatText } = require('../utils'); const colours = { red: '#a52a2a', @@ -37,23 +37,18 @@ const colours = { white: '#FFFFFF', }; -const SOURCE_ANIM_MS = 1000; - -const TARGET_ANIM_DELAY_MS = 500; -const TARGET_ANIM_MS = 1000; +const SOURCE_ANIM_MS = 850; function animations(props) { - const { resolution, stage, player, construct, game, account } = props; - + const { game, account, resolution, player, construct } = props; if (!resolution) return false; - const [type, event] = resolution.event; + const [, event] = resolution.event; if (!event.skill) return false; if (!resolution.target) return false; - - console.log(resolution); + const { stages } = resolution; // source animation - if (resolution.source.id === construct.id) { + if (resolution.source.id === construct.id && stages.includes('START_SKILL')) { const playerTeam = game.players.find(t => t.id === account.id); const playerTeamIds = playerTeam.constructs.map(c => c.id); const otherTeam = game.players.find(t => t.id !== account.id); @@ -95,30 +90,30 @@ function animations(props) { // target animation const anim = text => { console.log(text); - if (!text) return false; + if (!text || !stages.includes('END_SKILL')) return false; const skill = removeTier(text); - if (skill === 'Bash' && type === 'Damage') return false; + // if (skill === 'Bash' && type === 'Damage') return false; switch (skill) { - case 'Attack': return ; + case 'Attack': return ; case 'Amplify': return ; case 'Banish': return banish(construct.id); case 'Bash': return ; case 'Block': return ; case 'Buff': return ; case 'Curse': return ; - case 'Blast': return ; + case 'Blast': return ; case 'Debuff': return ; case 'Decay': return ; - case 'Strike': return ; - case 'Chaos': return ; - case 'Slay': return ; - case 'Heal': return ; + case 'Strike': return ; + case 'Chaos': return ; + case 'Slay': return ; + case 'Heal': return ; case 'Hex': return ; case 'Haste': return ; case 'Invert': return invert(construct.id); - case 'Siphon': return ; - case 'SiphonTick': return ; + case 'Siphon': return ; + case 'SiphonTick': return ; case 'Stun': return ; default: return false; } @@ -127,13 +122,14 @@ function animations(props) { const combatAnim = anim(event.skill); if (combatAnim) { return ( -
+
{combatAnim}
); } - return (
); + return ( +
); } module.exports = animations; diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx index 140ff5eb..e851a7f2 100644 --- a/client/src/components/anims/attack.jsx +++ b/client/src/components/anims/attack.jsx @@ -5,7 +5,7 @@ const anime = require('animejs').default; const dagger = require('../svgs/dagger'); const { TIMES } = require('../../constants'); -const duration = TIMES.START_SKILL; +const duration = TIMES.TARGET_DURATION_MS; class Attack extends Component { constructor(props) { diff --git a/client/src/components/anims/blast.jsx b/client/src/components/anims/blast.jsx index fd8de797..9900626e 100644 --- a/client/src/components/anims/blast.jsx +++ b/client/src/components/anims/blast.jsx @@ -5,7 +5,7 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); const { randomPoints } = require('../../utils'); -const duration = TIMES.START_SKILL; +const duration = TIMES.TARGET_DURATION_MS; function projectile(x, y, radius, colour) { diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 4045d4fe..472b8b82 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -5,7 +5,7 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); const { randomPoints } = require('../../utils'); -const duration = TIMES.START_SKILL; +const duration = TIMES.TARGET_DURATION_MS; function projectile(x, y, radius, colour) { return ( diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx index 4f23a22f..038ced26 100644 --- a/client/src/components/anims/heal.jsx +++ b/client/src/components/anims/heal.jsx @@ -5,7 +5,7 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); const { randomPoints } = require('../../utils'); -const duration = TIMES.START_SKILL; +const duration = TIMES.TARGET_DURATION_MS; function projectile(x, y, radius, colour) { diff --git a/client/src/components/anims/siphon.jsx b/client/src/components/anims/siphon.jsx index 88f3ba32..ec0bb7ea 100644 --- a/client/src/components/anims/siphon.jsx +++ b/client/src/components/anims/siphon.jsx @@ -4,7 +4,7 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); -const duration = TIMES.START_SKILL; +const duration = TIMES.TARGET_DURATION_MS; class AttackCharge extends Component { render() { diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx index f57c294d..b275435c 100644 --- a/client/src/components/anims/siphon.tick.jsx +++ b/client/src/components/anims/siphon.tick.jsx @@ -4,7 +4,7 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); -const duration = TIMES.START_SKILL; +const duration = TIMES.TARGET_DURATION_MS; function projectile(x, y, radius, colour) { diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx index cd5a440d..9ebc6646 100644 --- a/client/src/components/anims/slay.jsx +++ b/client/src/components/anims/slay.jsx @@ -5,7 +5,7 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); const { randomPoints } = require('../../utils'); -const duration = TIMES.START_SKILL; +const duration = TIMES.TARGET_DURATION_MS; function projectile(x, y, radius, colour) { diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx index 91ace433..8e3a22ea 100644 --- a/client/src/components/anims/strike.jsx +++ b/client/src/components/anims/strike.jsx @@ -4,7 +4,7 @@ const anime = require('animejs').default; const { TIMES } = require('../../constants'); -const duration = TIMES.START_SKILL; +const duration = TIMES.TARGET_DURATION_MS; function laser(dimensions, colour) { diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index adc58d42..792822c0 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -2,7 +2,6 @@ const { connect } = require('preact-redux'); const preact = require('preact'); const range = require('lodash/range'); -const actions = require('../actions'); const { STATS, eventClasses, getCombatText } = require('../utils'); const { ConstructAvatar } = require('./construct'); const animations = require('./animations'); @@ -75,20 +74,12 @@ function GameConstruct(props) { let crypSkills =
 
; if (player) crypSkills = (
{skills}
); - const [combatText, combatClass] = getCombatText(construct, resolution); - const combatTextClass = `combat-text ${combatClass}`; - - const playerTeam = game.players.find(t => t.id === account.id); - const playerTeamIds = playerTeam.constructs.map(c => c.id); - - const stage = resolution ? resolution.stage : false; - const combatInfo = animations({ game, account, resolution, stage, player, construct }); - const effects = construct.effects.length ? construct.effects.map(c =>
{c.effect} - {c.duration}T
) :
 
; - + const combatAnim = animations({ game, account, resolution, player, construct }); + const combatText = getCombatText(resolution, construct); return (
selectSkillTarget(construct.id)} @@ -98,10 +89,11 @@ function GameConstruct(props) { {crypSkills}
{stats}
- {combatInfo} + {combatAnim} +
{combatText}
{effects}
); } -module.exports = addState(GameConstruct); \ No newline at end of file +module.exports = addState(GameConstruct); diff --git a/client/src/constants.jsx b/client/src/constants.jsx index 3b2590c2..942235ae 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -7,6 +7,7 @@ const FADE_DURATION_MS = 500; const RESOLUTION_TOTAL_MS = SOURCE_DURATION_MS + TARGET_DURATION_MS + FADE_DURATION_MS; const FADE_DELAY_MS = RESOLUTION_TOTAL_MS - FADE_DURATION_MS; // const RESOLUTION_TOTAL_MS = 20000; +const POST_SKILL_DURATION_MS = 1000; module.exports = { TIMES: { @@ -18,11 +19,7 @@ module.exports = { FADE_DURATION_MS, RESOLUTION_TOTAL_MS, - - START_SKILL: 2000, - END_SKILL: 2000, - POST_SKILL: 2000, - DELAY: 150, + POST_SKILL_DURATION_MS, }, COLOURS: { diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 655de6d3..e7c0640f 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -75,9 +75,7 @@ const STATS = { function eventClasses(resolution, construct) { if (!resolution) return ''; - const startSkill = resolution.stage === 'START_SKILL'; - const endSkill = resolution.stage === 'END_SKILL'; - const postSkill = resolution.stage === 'POST_SKILL'; + const postSkill = resolution.stages.includes('POST_SKILL'); const source = construct.id === resolution.source.id; const target = construct.id === resolution.target.id; // not involved at all. blur them @@ -107,9 +105,6 @@ function eventClasses(resolution, construct) { 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 construct and return effect if (target && postSkill) { construct.green_life.value = resolution.target.green; @@ -131,8 +126,6 @@ function eventClasses(resolution, construct) { if (type === 'Healing') { const { skill, amount, overhealing } = event; - if (source && startSkill) return 'active-skill'; - if (target && endSkill) return 'active-skill'; if (target && postSkill) { construct.green_life.value = resolution.target.green; return 'green-damage'; @@ -150,29 +143,21 @@ function eventClasses(resolution, construct) { if (type === 'Effect') { const { skill, effect, duration, construct_effects: constructEffects } = event; - if (source && startSkill) return 'active-skill'; - if (target && endSkill) return 'active-skill'; if (target && postSkill) construct.effects = constructEffects; } if (type === 'Skill') { const { skill } = event; // Highlight the flow of damage from source -> target - if (source && startSkill) return 'active-skill'; - if (target && endSkill) return 'active-skill'; } if (type === 'Removal') { const { effect, construct_effects: constructEffects } = event; - if (source && startSkill) return 'active-skill'; - if (target && endSkill) return 'active-skill'; if (target && postSkill) construct.effects = constructEffects; } if (type === 'Recharge') { const { skill, red, blue } = event; - if (source && startSkill) return 'active-skill'; - if (target && endSkill) return 'active-skill'; if (target && postSkill) { if (red > 0 && blue > 0) { construct.red_life.value = resolution.target.red; @@ -200,116 +185,79 @@ function eventClasses(resolution, construct) { function getCombatSequence(resolution) { if (!resolution.event) return false; if (resolution.event[0] === 'Inversion') return false; - if (resolution.event[0] === 'Skill') return ['START_SKILL', 'END_SKILL']; - if (resolution.event[0] === 'Ko') return ['POST_SKILL']; + if (resolution.event[0] === 'Skill') return [['START_SKILL', 'END_SKILL']]; + if (resolution.event[0] === 'Ko') return [['POST_SKILL']]; switch (resolution.stages) { - case 1: return ['START_SKILL', 'DELAY', 'END_SKILL']; - case 2: return ['START_SKILL', 'POST_SKILL']; - case 3: return ['START_SKILL']; - case 4: return ['END_SKILL', 'POST_SKILL']; - case 5: return ['END_SKILL']; - case 6: return ['POST_SKILL']; + case 1: return [['START_SKILL', 'END_SKILL']]; + case 2: return [['START_SKILL'], ['POST_SKILL']]; + case 3: return [['START_SKILL']]; + case 4: return [['END_SKILL'], ['POST_SKILL']]; + case 5: return [['END_SKILL']]; + case 6: return [['POST_SKILL']]; case 7: return false; - default: return ['START_SKILL', 'DELAY', 'END_SKILL', 'POST_SKILL']; + default: return [['START_SKILL', 'END_SKILL'], ['POST_SKILL']]; } } -function getCombatText(construct, resolution) { - if (!resolution) return ['', '']; - +function getCombatText(resolution, construct) { + if (!resolution) return false; + if (!resolution.stages.includes('POST_SKILL')) return false; + if (construct.id !== resolution.target.id) return false; const [type, event] = resolution.event; - const source = construct.id === resolution.source.id; - const target = construct.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') { - if (postSkill && target) return ['KO!', '']; + return 'KO!'; } if (type === 'Disable') { - const { skill, disable } = event; - if (startSkill && source) return [`${skill}`, '']; - if (endSkill && target) return [`${skill}`, '']; - if (postSkill && target) return [`${disable}`, '']; + const { disable } = event; + return `${disable}`; } 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}`, '']; + return 'IMMUNE'; } if (type === 'Damage') { - const { skill, mitigation, colour } = event; + const { mitigation, colour } = event; let { amount } = event; if (colour === 'Green') amount *= -1; const mitigationText = mitigation ? `(${mitigation})` : ''; - if (startSkill && source) return [`${skill}`, `${skill.toLowerCase()}-cast`]; - if (endSkill && target) return [`${skill}`, `${skill.toLowerCase()}-hit`]; - if (postSkill && target) return [`${amount} ${mitigationText}`, '']; + return `${amount} ${mitigationText}`; } 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)`, '']; + const { amount, overhealing } = event; + 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', '']; + return 'INVERT'; } if (type === 'Reflection') { - const { skill } = event; - if (startSkill && source) return [`${skill}`, '']; - if (endSkill && target) return [`${skill}`, '']; - if (postSkill && target) return ['REFLECT', '']; + 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`, '']; + const { effect, duration } = event; + 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 === 'Skill' || type === 'AoeSkill') { - const { skill } = event; - if (startSkill && source) return [`${skill}`, '']; - if (endSkill && target) return [`${skill}`, '']; + const { red, blue } = event; + return [`+${red}R ${blue}B`, '']; } if (type === 'Removal') { const { effect } = event; - if (postSkill && target) return [`-${effect}`, '']; + return `-${effect}`; } - - return ''; + return false; } function convertItem(v) { diff --git a/server/Cargo.toml b/server/Cargo.toml index 96b04263..c65db8cc 100644 --- a/server/Cargo.toml +++ b/server/Cargo.toml @@ -36,4 +36,4 @@ stripe-rust = { version = "0.10.4", features = ["webhooks"] } [patch.crates-io] # stripe-rust = { git = "https://github.com/margh/stripe-rs.git" } -stripe-rust = { path = "/home/ntr/code/stripe-rs" } +stripe-rust = { git = "https://github.com/margh/stripe-rs.git" }