messing with anims full Pepega

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

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,