diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index c7491100..86b9cf14 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -40,7 +40,7 @@ .combat-text { left: 15%; - top: 60%; + top: 40%; } } @@ -158,6 +158,11 @@ .combat-text { position: absolute; z-index: 10; + svg { + display: inline; + height: 1em; + margin-right: 0.1em + } span { background-color: black; } @@ -214,7 +219,7 @@ } &.ko-transition { - animation: target-ko 1s ease-in-out 0s 1; + animation: target-ko 1.1s ease-in-out 0s 1; } &.ko { diff --git a/client/src/animations.utils.jsx b/client/src/animations.utils.jsx index 21b38925..1e0dd81b 100644 --- a/client/src/animations.utils.jsx +++ b/client/src/animations.utils.jsx @@ -128,11 +128,11 @@ function getText(resolution) { let { amount } = event; let css = ''; if (colour === 'Green') { - css = 'green-damage'; + css = 'green'; amount *= -1; } - if (colour === 'Red') css = 'red-damage'; - if (colour === 'Blue') css = 'blue-damage'; + if (colour === 'Red') css = 'red'; + if (colour === 'Blue') css = 'blue'; const mitigationText = mitigation ? `(${mitigation})` @@ -142,7 +142,7 @@ function getText(resolution) { if (type === 'Healing') { const { amount, overhealing } = event; - return { text: `${amount} (${overhealing} OH)`, css: 'green-damage' }; + return { text: `${amount} (${overhealing} OH)`, css: 'green' }; } if (type === 'Inversion') { @@ -160,9 +160,9 @@ function getText(resolution) { if (type === 'Recharge') { const { red, blue } = event; - if (red > 0 && blue > 0) return { text: [`+${red}R +${blue}B`, ''], css: 'rb-damage' }; - if (red > 0) return { text: [`+${red}R`, ''], css: 'red-damage' }; - if (blue > 0) return { text: [`+${blue}B`, ''], css: 'blue-damage' }; + 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; } @@ -178,12 +178,14 @@ function getText(resolution) { const { green, red, blue } = resolution.target; const { text, css, effects } = generatePostSkill(); + const skill = resolution.event[1] ? resolution.event[1].skill : null; return { css, text, effects, life: { green, red, blue }, constructId: resolution.target.id, + skill, }; } diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx index 31bc57d2..a65de8cd 100644 --- a/client/src/components/anims/slay.jsx +++ b/client/src/components/anims/slay.jsx @@ -4,9 +4,6 @@ const anime = require('animejs').default; const { connect } = require('preact-redux'); const { TIMES } = require('../../constants'); -const { randomPoints } = require('../../utils'); - -const duration = TIMES.TARGET_DURATION_MS; const addState = connect( function receiveState(state) { @@ -95,17 +92,17 @@ class Slay extends Component { this.animations.push(anime({ targets: '#slay', opacity: [ - { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 }, + { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 }, { value: 0, - delay: TIMES.TARGET_DURATION_MS * 0.7 + TIMES.POST_SKILL_DURATION_MS * 0.8, - duration: TIMES.POST_SKILL_DURATION_MS * 0.2, + delay: TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS * 0.2, + duration: TIMES.POST_SKILL_DURATION_MS * 0.3, }], translateY: 0, translateX: 0, loop: false, delay: TIMES.TARGET_DELAY_MS, - duration: (duration * 1 / 2), + duration: (TIMES.TARGET_DURATION_MS * 0.5), easing: 'easeInQuad', })); @@ -113,15 +110,15 @@ class Slay extends Component { targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'], baseFrequency: 10, scale: 100, - delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2), - duration: (duration * 1 / 2), + delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.5), + duration: (TIMES.TARGET_DURATION_MS * 0.5), easing: 'easeInQuad', })); this.animations.push(anime({ targets: '#sword', opacity: 0, - delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7), + delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS), })); const projectiles = document.querySelectorAll('#slay circle'); @@ -130,7 +127,7 @@ class Slay extends Component { targets: proj, cx: Math.random() * 250 + 25, cy: Math.random() * 200 - 100, - delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7), + delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS * 0.2), duration: (TIMES.POST_SKILL_DURATION_MS * 0.3), easing: 'easeInQuad', })); diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index 59ffc44f..58579c6a 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -4,7 +4,7 @@ const preact = require('preact'); const range = require('lodash/range'); const reactStringReplace = require('react-string-replace'); -const { STATS } = require('../utils'); +const { STATS, removeTier } = require('../utils'); const { ConstructAvatar, ConstructText } = require('./construct'); const shapes = require('./shapes'); const { INFO } = require('./../constants'); @@ -12,19 +12,38 @@ const actions = require('../actions'); const SkillBtn = require('./skill.btn'); -const addStateText = connect( - function receiveState(state) { - const { animText } = state; - return { animText }; - } -); +const addStateText = connect(({ animText, itemInfo }) => ({ animText, itemInfo })); -function combatText(props) { - const { construct, animText } = props; - const text = animText && animText.constructId === construct.id - ?

{animText.text}

- : null; - return text; +class combatText extends preact.Component { + shouldComponentUpdate(newProps) { + if (newProps.animText !== this.props.animText) return true; + return false; + } + + render(props) { + const { construct, animText, itemInfo } = props; + if (animText && animText.constructId === construct.id) { + const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animText.skill)); + const itemSourceInfo = itemSource.length + ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` + : false; + const itemRegEx = /(Red|Blue|Green)/; + const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); + + return ( +
+

+ {animText.skill} +

+ {itemSourceDescription} +

+ {animText.text} +

+
+ ); + } + return null; + } } const ConstructAnimationText = addStateText(combatText); @@ -137,6 +156,7 @@ class GameConstruct extends Component { const koEvent = animText ? animText.text === 'KO!' && animText.constructId === construct.id : false; const ko = construct.green_life.value === 0 && !koEvent ? 'ko' : ''; const classes = eventClasses(animating, animFocus, construct, animText); + const cssClass = ['ko-transition', 'unfocus'].includes(classes) ? classes : null; const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
@@ -187,7 +207,7 @@ class GameConstruct extends Component { setTutorialGameClear(activeSkill, tutorialGame); }} style={ activeSkill ? { cursor: 'pointer' } : {}} - class={`game-construct ${ko} ${classes}`} > + class={`game-construct ${ko} ${cssClass}`}>
{crypSkills} {effectBox()} diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx index a7a7e4b3..bed48261 100644 --- a/client/src/components/targeting.arrows.jsx +++ b/client/src/components/targeting.arrows.jsx @@ -81,21 +81,7 @@ class TargetSvg extends Component { // resolutions happening // just put skill name up - if (animating) { - if (!animSkill) return false; - const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animSkill)); - const itemSourceInfo = itemSource.length - ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` - : false; - const itemRegEx = /(Red|Blue|Green)/; - const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); - return ( -
-

{animSkill}

-
{itemSourceDescription}
-
- ); - } + if (animating) return false; const playerTeam = game.players.find(t => t.id === account.id); const otherTeam = game.players.find(t => t.id !== account.id); diff --git a/client/src/constants.jsx b/client/src/constants.jsx index f16b7f3b..bcfa054d 100644 --- a/client/src/constants.jsx +++ b/client/src/constants.jsx @@ -3,7 +3,7 @@ const preact = require('preact'); const SOURCE_DURATION_MS = 1000; // Time for SOURCE ONLY const TARGET_DELAY_MS = 500; // Used for Source + Target const TARGET_DURATION_MS = 1500; // Time for TARGET ONLY -const POST_SKILL_DURATION_MS = 1000; // Time for all POST +const POST_SKILL_DURATION_MS = 1100; // Time for all POST const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS; // SOURCE + TARGET time module.exports = {