diff --git a/client/cryps.css b/client/cryps.css index d3e6830e..4b98de1e 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -129,6 +129,7 @@ img { max-height: 100%; width: auto; height: auto; + pointer-events: none; } /* @@ -681,10 +682,22 @@ table td svg { } .combat-text { - position: fixed; - top: 50%; fill: whitesmoke; + font-size: 2em; font-family: 'Jura'; + position: absolute; + top: 50%; + left: 50%; + text-align: center; +} + +.team-opponent .combat-text { + left: 40%; + transform: translate(-50%, -50%); +} + +.img { + position: relative; } .team-player { diff --git a/client/src/components/body.component.jsx b/client/src/components/body.component.jsx index 6f393fd7..95c45c5e 100644 --- a/client/src/components/body.component.jsx +++ b/client/src/components/body.component.jsx @@ -10,19 +10,6 @@ const InstanceContainer = require('./instance.container'); const addState = connect( state => { const { game, instance, ws, account } = state; - - if (!game) { - ws.clearGameStateTimeout(); - } else { - ws.startGameStateTimeout(game.id); - } - - if (!instance) { - ws.clearInstanceStateTimeout(); - } else { - ws.startInstanceStateTimeout(instance.id); - } - return { game, instance, account }; } ); diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 36042656..72c05864 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -143,7 +143,6 @@ function GamePanel(props) { )); const combatText = getCombatText(cryp, resolution); - const combatTextEl = combatText ?
{combatText}
: null; @@ -156,7 +155,7 @@ function GamePanel(props) { onClick={() => selectSkillTarget(cryp.id)} >
-
attack
+ {combatTextEl}
{cryp.name}
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx index 5844c40e..9034bfdc 100644 --- a/client/src/components/game.cryp.jsx +++ b/client/src/components/game.cryp.jsx @@ -78,6 +78,9 @@ function GameCryp(props) { } const combatText = getCombatText(cryp, resolution); + const combatTextEl = combatText + ?
{combatText}
+ : null; return (
selectSkillTarget(cryp.id)} > + {combatTextEl}
{cryp.name}
diff --git a/client/src/events.jsx b/client/src/events.jsx index bb7f4b0a..69beee55 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -6,6 +6,15 @@ const { TIMES } = require('./constants'); const { getCombatSequence } = require('./utils'); function registerEvents(store) { + + // timeout handlers + store.subscribe(() => { + const { game, instance, ws} = store.getState(); + + if (!game) ws.clearGameStateTimeout(); + if (!instance) ws.clearInstanceStateTimeout(); + }); + function setCryps(cryps) { console.log('EVENT ->', 'cryps', cryps); } @@ -21,8 +30,7 @@ function registerEvents(store) { function setGame(game) { const { game: currentGame, ws } = store.getState(); - if (!game) ws.clearGameStateTimeout(); - + if (game) ws.startGameStateTimeout(game.id); if (game && currentGame) { if (game.resolved.length !== currentGame.resolved.length) { // stop fetching the game state til animations are done @@ -99,10 +107,8 @@ function registerEvents(store) { const { account, ws } = store.getState(); const player = v.players.find(p => p.id === account.id); if (player) store.dispatch(actions.setPlayer(player)); + if (v) ws.startInstanceStateTimeout(v.id); - if (!v) { - ws.clearInstanceStateTimeout(); - } return store.dispatch(actions.setInstance(v)); } diff --git a/client/src/socket.jsx b/client/src/socket.jsx index bed9d1d5..10d6494f 100644 --- a/client/src/socket.jsx +++ b/client/src/socket.jsx @@ -218,8 +218,6 @@ function createSocket(events) { function instanceState(response) { const [structName, i] = response; - clearTimeout(instanceStateTimeout); - instanceStateTimeout = setTimeout(() => sendInstanceState(i.id), 1000); events.setInstance(i); return true; } @@ -228,7 +226,6 @@ function createSocket(events) { clearTimeout(instanceStateTimeout); } - function instanceScores(response) { const [structName, scores] = response; events.setScores(scores);