diff --git a/client/src/animations.utils.jsx b/client/src/animations.utils.jsx index b0b5d27f..8b0a6708 100644 --- a/client/src/animations.utils.jsx +++ b/client/src/animations.utils.jsx @@ -71,87 +71,6 @@ function getFocusTargets(resolution) { return [resolution.target]; } -function getText(resolution) { - const nullText = { text: null, constructId: null, life: null }; - const [type, event] = resolution.variant; - function generatePostSkill() { - if (type === 'Ko') { - return { text: 'KO!', css: 'ko-transition' }; - } - - if (type === 'Disable') { - const { disable } = event; - return { text: `${disable}`, css: '' }; - } - - if (type === 'Immunity') { - return { text: 'IMMUNE', css: '' }; - } - - if (type === 'Damage') { - const { mitigation, colour } = event; - let { amount } = event; - let css = ''; - if (colour === 'Green') { - css = 'green'; - amount *= -1; - } - if (colour === 'Red') css = 'red'; - if (colour === 'Blue') css = 'blue'; - - const mitigationText = mitigation - ? `(${mitigation})` - : ''; - return { text: `${amount} ${mitigationText}`, css }; - } - - if (type === 'Healing') { - const { amount, overhealing } = event; - return { text: `${amount} (${overhealing} OH)`, css: 'green' }; - } - - if (type === 'Inversion') { - return { text: 'INVERT', css: '' }; - } - - if (type === 'Reflection') { - return { text: 'REFLECT', css: '' }; - } - - if (type === 'Effect') { - const { effect, duration, construct_effects: effects } = event; - return { text: `+ ${effect} ${duration}T`, css: '', effects }; - } - - if (type === 'Recharge') { - const { red, blue } = event; - if (red > 0 && blue > 0) return { text: `+${red}R +${blue}B`, css: 'rb' }; - if (red > 0) return { text: `+${red}R`, css: 'red' }; - if (blue > 0) return { text: `+${blue}B`, css: 'blue' }; - return nullText; - } - - if (type === 'Removal') { - const { effect, construct_effects: effects } = event; - if (!effect) { - return { text: 'Effect Removal', css: '', effects }; - } - return { text: `-${effect}`, css: '', effects }; - } - return false; - } - - const { green, red, blue } = event.display; - const { text, css, effects } = generatePostSkill(); - return { - css, - text, - effects, - life: { green, red, blue }, - constructId: event.display.id, - }; -} - function isCbAnim(skill) { return ['Attack', 'Blast', 'Siphon', 'SiphonTick', 'Strike', 'Chaos', 'Slay', 'Heal', 'Buff', 'Amplify', 'Haste', 'Triage', 'TriageTick', 'Link', 'Hybrid', 'Intercept', @@ -164,6 +83,5 @@ function isCbAnim(skill) { module.exports = { getFocusTargets, getObjects, - getText, isCbAnim, }; diff --git a/client/src/components/game.construct.anim.text.jsx b/client/src/components/game.construct.anim.text.jsx index 076658ac..ad39219d 100644 --- a/client/src/components/game.construct.anim.text.jsx +++ b/client/src/components/game.construct.anim.text.jsx @@ -17,7 +17,7 @@ class AnimText extends preact.Component { componentDidUpdate(prevProps) { const { animText, construct } = this.props; - if (animText && animText !== prevProps.animText && animText.constructId === construct.id) { + if (animText && animText !== prevProps.animText && animText.target === construct.id) { anime({ targets: '.combat-text', top: '40%', @@ -29,7 +29,7 @@ class AnimText extends preact.Component { render() { const { construct, animText, animSkill, itemInfo } = this.props; - if (animText && animText.constructId === construct.id) { + if (animText && animText.target === construct.id) { const itemSourceDescription = () => { const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animSkill)); const itemSourceInfo = itemSource.length @@ -39,30 +39,52 @@ class AnimText extends preact.Component { return reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); }; - const animationTextHtml = () => { - // monkaW hack to make red / blue recharge work nicely - if (animText.css === 'rb') { - const text = animText.text.split(' '); - return ( -

- {text[0]}  - {text[1]} -

- ); + const generateAnimText = () => { + const [type, event] = animText.variant; + if (type === 'Ko') return

KO!

; + if (type === 'Disable') { + const { disable } = event; + return

{disable}

; } - return ( -

- {animText.text} -

- ); + if (type === 'Immunity') return

IMMUNE

; + if (type === 'Damage') { + const { mitigation, colour } = event; + let { amount } = event; + amount *= -1; + const mitigationText = mitigation ? `(${mitigation})` : ''; + return

{amount} {mitigationText}

; + } + if (type === 'Healing') { + const { amount, overhealing } = event; + return

{amount} ({overhealing}OH)

; + } + if (type === 'Inversion') return

INVERT

; + if (type === 'Reflection') return

REFLECT

; + if (type === 'Effect') { + const { effect, duration } = event; + return

+{effect} {duration}T

; + } + if (type === 'Recharge') { + const { red, blue } = event; + if (red > 0 && blue > 0) { + return

`+{red}R+{blue}B

; + } + if (red > 0) return

`+{red}R

; + if (blue > 0) return

`+{blue}R

; + } + if (type === 'Removal') { + const { effect } = event; + if (!effect) return

Effect Removal

; + return

{effect}

; + } + return false; }; - return (

{animSkill}

{itemSourceDescription()} - {animationTextHtml()} + {generateAnimText()}
); } diff --git a/client/src/components/game.construct.effect.box.jsx b/client/src/components/game.construct.effect.box.jsx index d8fcda3b..a6215475 100644 --- a/client/src/components/game.construct.effect.box.jsx +++ b/client/src/components/game.construct.effect.box.jsx @@ -22,7 +22,10 @@ const addState = connect( class GameConstructEffects extends preact.Component { shouldComponentUpdate(newProps) { if (newProps.animText !== this.props.animText) { - if (newProps.animText && newProps.animText.constructId === this.props.construct.id) return true; + if (newProps.animText && newProps.animText.constructId === this.props.construct.id) { + const [type] = newProps.animText.variant; + if (type === 'Effect' || type === 'Removal') return true; + } } if (newProps.construct !== this.props.construct) return true; return false; @@ -54,9 +57,8 @@ class GameConstructEffects extends preact.Component { ); } - const effects = animText && animText.constructId === construct.id && animText.effects - ? animText.effects - : construct.effects; + const effects = animText ? animText.variant[1].display.effects : construct.effects; + const renderEffects = effects.length ? effects.map(c =>
diff --git a/client/src/components/game.construct.life.jsx b/client/src/components/game.construct.life.jsx index b8d267f8..680f657c 100644 --- a/client/src/components/game.construct.life.jsx +++ b/client/src/components/game.construct.life.jsx @@ -8,7 +8,10 @@ const addState = connect(({ animText }) => ({ animText })); class GameConstructLife extends preact.Component { shouldComponentUpdate(newProps) { if (newProps.animText !== this.props.animText) { - if (newProps.animText && newProps.animText.constructId === this.props.construct.id) return true; + if (newProps.animText && newProps.animText.target === this.props.construct.id) { + const [type] = newProps.animText.variant; + if (type === 'Damage' || type === 'Healing' || type === 'Recharge') return true; + } } if (newProps.construct !== this.props.construct) return true; return false; @@ -16,28 +19,31 @@ class GameConstructLife extends preact.Component { render() { const { construct, animText } = this.props; - // this will be cleaner in new update - const updateLife = animText && animText.constructId === construct.id; - const redLife = updateLife ? animText.life.red : construct.red_life.value; - const greenLife = updateLife ? animText.life.green : construct.green_life.value; - const blueLife = updateLife ? animText.life.blue : construct.blue_life.value; + const lifeBars = (redLife, greenLife, blueLife) => { + return ( +
+
+ {shapes.RedLife()} +
{redLife} / {construct.red_life.max}
+
+
+ {shapes.GreenLife()} +
{greenLife} / {construct.green_life.max}
+
+
+ {shapes.BlueLife()} +
{blueLife} / {construct.blue_life.max}
+
+
+ ); + }; - return ( -
-
- {shapes.RedLife()} -
{redLife} / {construct.red_life.max}
-
-
- {shapes.GreenLife()} -
{greenLife} / {construct.green_life.max}
-
-
- {shapes.BlueLife()} -
{blueLife} / {construct.blue_life.max}
-
-
- ); + if (animText) { + const { red, blue, green } = animText.variant[1].display; + return lifeBars(red, green, blue); + } + + return lifeBars(construct.red_life.value, construct.green_life.value, construct.blue_life.value); } } diff --git a/client/src/events.jsx b/client/src/events.jsx index 845ffbbc..d497b582 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -109,8 +109,7 @@ function registerEvents(store) { }, timeout); } - const text = animations.getText(r); - store.dispatch(actions.setAnimText(text)); + store.dispatch(actions.setAnimText(r)); return setTimeout(cb, timeout); }, err => { if (err) return console.error(err); diff --git a/core/src/construct.rs b/core/src/construct.rs index d8318b9d..f8a3efbf 100644 --- a/core/src/construct.rs +++ b/core/src/construct.rs @@ -717,6 +717,9 @@ impl Construct { }, self.id )); + if self.is_ko() { + events.push(Event::new(EventVariant::Ko {}, self.id)); + } }, true => { // events.push(Event::new(EventVariant::Inversion { skill }));