diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index ea48cede..c7491100 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -37,6 +37,11 @@ height: 100%; width: 100%; } + + .combat-text { + left: 15%; + top: 60%; + } } .opponent { @@ -72,6 +77,11 @@ "avatar" } + .combat-text { + left: 15%; + top: 40%; + } + .effects { align-self: flex-start; } @@ -145,6 +155,14 @@ } } + .combat-text { + position: absolute; + z-index: 10; + span { + background-color: black; + } + } + .skills { z-index: 2; button { diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx index c39b219c..a26ecdd5 100644 --- a/client/src/components/construct.jsx +++ b/client/src/components/construct.jsx @@ -96,26 +96,16 @@ class ConstructAvatar extends Component { } } - -const addStateText = connect( - function receiveState(state) { - const { animText } = state; - return { animText }; - } -); - -function constructText(props) { - const { construct, animText } = props; +function ConstructText(props) { + const { construct } = props; if (!construct) return false; - const text = animText && animText.constructId === construct.id - ? animText.text - : construct.name; + const text = construct.name; return

{text}

; } module.exports = { ConstructAvatar: addState(ConstructAvatar), - ConstructText: addStateText(constructText), + ConstructText, }; diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index 4ffede73..59ffc44f 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -12,6 +12,23 @@ const actions = require('../actions'); const SkillBtn = require('./skill.btn'); +const addStateText = connect( + function receiveState(state) { + const { animText } = state; + return { animText }; + } +); + +function combatText(props) { + const { construct, animText } = props; + const text = animText && animText.constructId === construct.id + ?

{animText.text}

+ : null; + return text; +} + +const ConstructAnimationText = addStateText(combatText); + const addState = connect( function receiveState(state) { const { @@ -179,6 +196,7 @@ class GameConstruct extends Component {
{stats}
+ ); diff --git a/client/src/events.jsx b/client/src/events.jsx index bb03367b..44b437b0 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -85,7 +85,7 @@ function registerEvents(store) { const newRes = game.resolved.slice(currentGame.resolved.length); return eachSeries(newRes, (r, cb) => { if (!r.event) return cb(); - const timeout = animations.getTime(r.stages); + let timeout = animations.getTime(r.stages); const anims = animations.getObjects(r, game, account); const text = animations.getText(r); store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game))); @@ -107,8 +107,9 @@ function registerEvents(store) { } else { setTimeout( () => store.dispatch(actions.setAnimText(text)), - timeout - TIMES.POST_SKILL_DURATION_MS + timeout - TIMES.POST_SKILL_DURATION_MS - 500 ); + timeout -= 500; } }