From 2acb4d276f1307e702b70f7d31b239a253f9adf9 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Mon, 8 Jul 2019 15:29:45 +1000
Subject: [PATCH] clear dom anim classes with small delay between resolutions

---
 client/src/components/animations.jsx       |  2 +-
 client/src/components/anims/strike.jsx     |  1 -
 client/src/components/targeting.arrows.jsx | 32 +++++++++++++---------
 client/src/events.jsx                      |  7 +++--
 client/src/utils.jsx                       |  4 +--
 5 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index b13fb8b0..a7cb291e 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -59,7 +59,7 @@ const { TIMES } = require('../constants');
 
 function animations(props) {
     const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props;
-    if (!resolution) return false;
+    if (!resolution || resolution === 'clear') return false;
     const [, event] = resolution.event;
     if (!event || !event.skill) return false;
     if (!resolution.target) return false;
diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx
index 61623e76..3389f8ff 100644
--- a/client/src/components/anims/strike.jsx
+++ b/client/src/components/anims/strike.jsx
@@ -55,7 +55,6 @@ class Strike extends Component {
                     <feGaussianBlur stdDeviation="4"/>
                     <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
                     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
-
                 </filter>
                 {this.charges}
             </svg>
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index eabbd530..33a49f92 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -81,23 +81,29 @@ class TargetSvg extends Component {
 
             return <path d={path} />;
         }
-
-        const arrows = resolution
-            ? null
-            : outgoing.map(getPath);
+        if (resolution === 'clear') return false;
+        if (!resolution) {
+            return (
+                <svg id="targeting"
+                    viewBox={`0 0 ${width} ${height}`}
+                    preserveAspectRatio="none"
+                    class="targeting-arrows">
+                    {outgoing.map(getPath)}
+                </svg>
+            );
+        }
 
         let skill = '';
-        if (resolution) {
-            if (resolution.event[1]) ([, { skill }] = resolution.event);
-        }
-        const resolutionText = resolution
-            ? <text x={`${(width / 2) - 50}`} y={`${(height / 2) + 16}`} font-family="Jura" font-size="2em"> {skill} </text>
-            : null;
-
+        if (resolution.event[1]) ([, { skill }] = resolution.event);
         return (
             <svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" class="targeting-arrows">
-                {arrows}
-                {resolutionText}
+                <text
+                    x={`${(width / 2) - 50}`}
+                    y={`${(height / 2) + 16}`}
+                    font-family="Jura"
+                    font-size="2em">
+                    {skill}
+                </text>
             </svg>
         );
     }
diff --git a/client/src/events.jsx b/client/src/events.jsx
index 930fb44f..45b897d7 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -71,7 +71,6 @@ function registerEvents(store) {
                         stagedR.sequence = sequence;
                         stagedR.stages = stages;
                         stagedR.id = id;
-
                         let timeout = 0;
                         if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) {
                             timeout = TIMES.SOURCE_AND_TARGET_TOTAL_DURATION;
@@ -83,8 +82,10 @@ function registerEvents(store) {
                         return setTimeout(sCb, timeout);
                     }, err => {
                         if (err) console.error(err);
-                        // Finished this resolution
-                        return cb();
+                        // Clear the anim classes
+                        store.dispatch(actions.setResolution('clear'));
+                        // Finished this resolution small delay for reset
+                        return setTimeout(cb, 5);
                     });
                 }, err => {
                     if (err) return console.error(err);
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index c610f0dd..da74c26d 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -74,7 +74,7 @@ const STATS = {
 };
 
 function eventClasses(game, account, resolution, construct) {
-    if (!resolution) return '';
+    if (!resolution || resolution === 'clear') return '';
     const postSkill = resolution.stages.includes('POST_SKILL');
     const source = construct.id === resolution.source.id;
     const target = construct.id === resolution.target.id;
@@ -176,7 +176,7 @@ function getCombatSequence(resolution) {
 }
 
 function getCombatText(resolution, construct) {
-    if (!resolution) return false;
+    if (!resolution || resolution === 'clear') return false;
     if (!resolution.stages.includes('POST_SKILL')) return false;
     if (construct.id !== resolution.target.id) return false;