timing sync fixes, block timer during animation, remove timeout for POST_ONLY

client/src/animations.utils.jsx

@@ -86,7 +86,7 @@ function getSequence(resolution) {
     case 'EndPost': return ['END_SKILL', 'POST_SKILL'];
     case 'EndOnly': return ['END_SKILL'];
     case 'PostOnly': return ['POST_SKILL'];
-    case 'None': return [];
+    case 'NoStages': return [];
     default: return ['START_SKILL', 'END_SKILL', 'POST_SKILL'];
     }
 }

client/src/components/game.ctrl.jsx

@@ -10,11 +10,13 @@ const GameCtrlTopButtons = require('./game.ctrl.btns.top');
 const addState = connect(
     function receiveState(state) {
         const {
+            animating,
             game,
             account,
         } = state;
 
         return {
+            animating,
             game,
             account,
         };
@@ -23,6 +25,7 @@ const addState = connect(
 
 function Controls(args) {
     const {
+        animating,
         account,
         game,
     } = args;
@@ -31,10 +34,10 @@ function Controls(args) {
 
     const opponent = game.players.find(t => t.id !== account.id);
     const player = game.players.find(t => t.id === account.id);
-
     const zero = Date.parse(game.phase_start);
-    const now = Date.now();
+    const now = animating ? zero : Date.now();
     const end = Date.parse(game.phase_end);
+    
     const timerPct = game.phase_end
         ? ((now - zero) / (end - zero) * 100)
         : 100;

client/src/constants.jsx

@@ -1,10 +1,10 @@
 const preact = require('preact');
 
-const SOURCE_DURATION_MS = 1000;
-const TARGET_DELAY_MS = 500;
-const TARGET_DURATION_MS = 1500;
-const POST_SKILL_DURATION_MS = 1000;
-const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS;
+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 SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS; // SOURCE + TARGET time
 
 module.exports = {
     TIMES: {

client/src/events.jsx

@@ -82,10 +82,14 @@ function registerEvents(store) {
                     }
                     if (sequence.includes('POST_SKILL') && text) {
                         // timeout to prevent text classes from being added too soon
-                        setTimeout(
-                            () => store.dispatch(actions.setAnimText(text)),
-                            timeout - TIMES.POST_SKILL_DURATION_MS
-                        );
+                        if (timeout === TIMES.POST_SKILL_DURATION_MS) {
+                            store.dispatch(actions.setAnimText(text));
+                        } else {
+                            setTimeout(
+                                () => store.dispatch(actions.setAnimText(text)),
+                                timeout - TIMES.POST_SKILL_DURATION_MS
+                            );
+                        }
                     }
                     return setTimeout(() => {
                         store.dispatch(actions.setAnimSkill(null));