From b0faf0c33bef125fac36e5837604cee8b7542aa2 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Fri, 14 Jun 2019 00:10:51 +1000
Subject: [PATCH] messing with anims full Pepega

---
 client/assets/styles/game.css          | 11 ++++++----
 client/src/components/animations.jsx   | 20 +++++++++++-------
 client/src/components/anims/attack.jsx | 28 +++++++++++++-------------
 client/src/constants.jsx               |  1 +
 client/src/utils.jsx                   |  4 ++--
 5 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index 36d5b128..65f975f4 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -29,8 +29,7 @@
 }
 
 .opponent .combat-text {
-    left: 40%;
-    top: 65%;
+    top: 40%;
 }
 
 .opponent .game-construct {
@@ -204,8 +203,12 @@
     font-size: 2em;
     font-family: 'Jura';
     position: absolute;
-    top: 40%;
-    left: 40%;
+    object-fit: contain;
+    top: 15%;
+}
+
+.combat-text svg {
+    height: 7em;
 }
 
 .game-construct.active-skill {
diff --git a/client/src/components/animations.jsx b/client/src/components/animations.jsx
index 56971485..bee94eae 100644
--- a/client/src/components/animations.jsx
+++ b/client/src/components/animations.jsx
@@ -5,14 +5,20 @@ const Attack = require('./anims/attack');
 function animations(props) {
     const { combatTextClass, combatText, stage, player, construct } = props;
 
-    if (combatText === 'Attack') {
-        return (
-            <div class={combatTextClass}>
-                <Attack id={construct.id} stage={stage} team={player}/>
-            </div>
-        );
+    const anim = text => {
+        switch (text) {
+            case 'Attack': return <Attack id={construct.id} stage={stage} team={player}/>;
+            default: return text;
+        }
+    };
+
+    if (combatText) {
+        const combatAnim = anim(combatText);
+        return <div class={combatTextClass}>
+            {combatAnim}
+        </div>;
     }
-    if (combatText) return <div construct={construct} class={combatTextClass}>{combatText}</div>;
+
     return (<div>&nbsp;</div>);
 }
 
diff --git a/client/src/components/anims/attack.jsx b/client/src/components/anims/attack.jsx
index e58b5214..4c5cbcfa 100644
--- a/client/src/components/anims/attack.jsx
+++ b/client/src/components/anims/attack.jsx
@@ -10,22 +10,24 @@ class Attack extends Component {
     constructor(props) {
         super();
         this.props = props;
+        this.graphic = (
+            <g>
+                <polygon class='blue' points={'0,0    100,50   300,400'}/>
+                <polygon class='blue' points={'40,170    100,50   160,170'}/>
+                <polygon class='blue' points={'70,150    100,50   130,150'}/>
+            </g>
+        );
     }
 
     render() {
         return (
             <svg
-                id={this.props.id}
-                class={`attack-anim skill-animation ${this.props.stage}`}
+                class={`attack-anim-${this.props.id}`}
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 300 300">
-                <g>
-                    <polygon class='blue' points={'0,190    100,50   190,190'}/>
-                    <polygon class='blue' points={'40,170    100,50   160,170'}/>
-                    <polygon class='blue' points={'70,150    100,50   130,150'}/>
-                </g>
+                viewBox="0 0 300 400">
+                ${this.graphic}
             </svg>
         );
     }
@@ -35,22 +37,20 @@ class Attack extends Component {
         if ((!this.props.team && this.props.stage === 'START_SKILL')
             || (this.props.team && this.props.stage === 'END_SKILL')) {
             anime.set('.attack-anim', {
-                translateY: -250,
-                rotateX: 180,
+                rotateX: 0,
             });
-            value = '+=250px';
+            value = '+=250px',
         }
         if ((!this.props.team && this.props.stage === 'END_SKILL')
             || (this.props.team && this.props.stage === 'START_SKILL')) {
             anime.set('.attack-anim', {
-                translateY: 0,
                 rotateX: 0,
             });
-            value = '-=250px';
+            value = '-=250px',
         }
 
         anime({
-            targets: ['.attack-anim'],
+            targets: [`.attack-anim-${this.props.id} polygon`],
             translateY: {
                 value,
                 duration,
diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index 6bf4de39..ee619980 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -3,6 +3,7 @@ module.exports = {
         START_SKILL: 700,
         END_SKILL: 700,
         POST_SKILL: 1000,
+        DELAY: 150,
     },
 
     INFO: {
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 3b506704..25039b98 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -204,14 +204,14 @@ function getCombatSequence(resolution) {
     if (resolution.event[0] === 'Ko') return ['POST_SKILL'];
 
     switch (resolution.stages) {
-        case 1: return ['START_SKILL', 'END_SKILL'];
+        case 1: return ['START_SKILL', 'DELAY', 'END_SKILL'];
         case 2: return ['START_SKILL', 'POST_SKILL'];
         case 3: return ['START_SKILL'];
         case 4: return ['END_SKILL', 'POST_SKILL'];
         case 5: return ['END_SKILL'];
         case 6: return ['POST_SKILL'];
         case 7: return false;
-        default: return ['START_SKILL', 'END_SKILL', 'POST_SKILL'];
+        default: return ['START_SKILL', 'DELAY', 'END_SKILL', 'POST_SKILL'];
     }
 }