working with combat text

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 {

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 };
     }
 );

client/src/components/game.component.jsx

@@ -143,7 +143,6 @@ function GamePanel(props) {
         ));
 
         const combatText = getCombatText(cryp, resolution);
-
         const combatTextEl = combatText
             ? <div className="combat-text">{combatText}</div>
             : null;
@@ -156,7 +155,7 @@ function GamePanel(props) {
                 onClick={() => selectSkillTarget(cryp.id)} >
                 <figure className="img">
                     <img src={`/molecules/${genAvatar(cryp.name)}.svg`} />
-                    <div className="combat-text">attack</div>
+                    {combatTextEl}
                     <div>{cryp.name}</div>
                 </figure>
                 <div className="stats">

client/src/components/game.cryp.jsx

@@ -78,6 +78,9 @@ function GameCryp(props) {
     }
 
     const combatText = getCombatText(cryp, resolution);
+    const combatTextEl = combatText
+        ? <div className="combat-text">{combatText}</div>
+        : null;
 
     return (
         <div
@@ -89,6 +92,7 @@ function GameCryp(props) {
                     className="img"
                     onClick={() => selectSkillTarget(cryp.id)} >
                     <img src={`/molecules/${genAvatar(cryp.name)}.svg`} />
+                    {combatTextEl}
                     <div>{cryp.name}</div>
                 </figure>
                 <div className="skills">

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));
     }
 

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);