basic attack animation

client/assets/scss/anims.scss

@@ -1,59 +0,0 @@
-
-.anim-container {
-    position: absolute;
-    width: 100%;
-    min-height: 100%;
-    transform-style: preserve-3d;
-}
-
-.blast-cast {
-    position: absolute;
-    background: black;
-    opacity: .7;
-    border-radius: 50%;
-}
-
-@for $i from 1 through 100 {
-    @keyframes blast-cast-#{$i} {
-      100% {
-        transform: translate3d(-3em +random(200)/200, 0, 0);
-      }
-    }
-}
-
-@for $i from 1 through 100 {
-  .blast-cast:nth-child(#{$i}){
-     $size: random(30)+px;
-     height: $size;
-     width: $size;
-     transform: translate3d( (random(200) * 1px),  (random(200) * 1px), (random(200) * 1px));
-     background: #15f4ee;
-     animation: blast-cast-#{$i} 0.7s;
-  }
-}
-
-.blast-hit {
-    position: absolute;
-    background: black;
-    opacity: .7;
-    border-radius: 50%;
-}
-
-@for $i from 1 through 100 {
-    @keyframes blast-hit-#{$i} {
-      100% {
-            transform: translate3d((random(200) * 1px),  (random(200) * 1px), (random(200) * 1px));
-      }
-    }
-}
-
-@for $i from 1 through 100 {
-    .blast-hit:nth-child(#{$i}){
-        $size: random(30)+px;
-        height: $size;
-        width: $size;
-        transform: translate3d(-3em +random(200)/200, 0, 0);
-        animation: blast-hit-#{$i} 0.7s infinite;
-        background: #15f4ee;
-     }
-}

client/index.js

@@ -3,7 +3,6 @@ require('./assets/styles/styles.mobile.css');
 require('./assets/styles/instance.css');
 require('./assets/styles/instance.mobile.css');
 require('./assets/styles/game.css');
-require('./assets/styles/anims.css');
 
 // kick it off
 require('./src/app');

client/src/animations.jsx

@@ -1,11 +0,0 @@
-const preact = require('preact');
-
-function animationDivs(classes) {
-    switch (classes) {
-        case 'blast-cast': return Array.from({ length: 100 }).map(j => <div key={j} class="blast-cast"></div>);
-        case 'blast-hit': return Array.from({ length: 100 }).map(j => <div key={j} class="blast-hit"></div>);
-        default: return <div>&nbsp;</div>;
-    }
-}
-
-module.exports = { animationDivs };

client/src/components/animations.jsx

@@ -0,0 +1,19 @@
+const preact = require('preact');
+
+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>
+        );
+    }
+    if (combatText) return <div construct={construct} class={combatTextClass}>{combatText}</div>;
+    return (<div>&nbsp;</div>);
+}
+
+module.exports = animations;

client/src/components/anims/attack.jsx

@@ -0,0 +1,63 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+const duration = TIMES.START_SKILL;
+
+class Attack extends Component {
+    constructor(props) {
+        super();
+        this.props = props;
+    }
+
+    render() {
+        return (
+            <svg
+                id={this.props.id}
+                class={`attack-anim skill-animation ${this.props.stage}`}
+                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>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        let value = '';
+        if ((!this.props.team && this.props.stage === 'START_SKILL')
+            || (this.props.team && this.props.stage === 'END_SKILL')) {
+            anime.set('.attack-anim', {
+                translateY: -250,
+            });
+            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,
+            });
+            value = '-=250px';
+        }
+
+        anime({
+            targets: ['.attack-anim'],
+            translateY: {
+                value,
+                duration,
+            },
+            loop: false,
+            duration,
+            easing: 'easeInQuad',
+        });
+    }
+}
+
+module.exports = Attack;

client/src/components/game.construct.jsx

@@ -5,10 +5,9 @@ const range = require('lodash/range');
 const actions = require('../actions');
 const { STATS, eventClasses, getCombatText } = require('../utils');
 const { ConstructAvatar } = require('./construct');
-const { animationDivs } = require('../animations');
+const animations = require('./animations');
 const shapes = require('./shapes');
 
-const TrippyTriangle = require('./svgs/trippy.triangle');
 
 const SkillBtn = require('./skill.btn');
 
@@ -41,9 +40,10 @@ const addState = connect(
             activeSkill,
             selectSkillTarget,
         };
-    },
+    }
 );
 
+
 function GameConstruct(props) {
     const {
         i,
@@ -77,9 +77,9 @@ function GameConstruct(props) {
 
     const [combatText, combatClass] = getCombatText(construct, resolution);
     const combatTextClass = `combat-text ${combatClass}`;
-    const combatTextEl = combatText
-        ? <div class={combatTextClass}>{combatText}</div>
-        : <div class={combatTextClass}> <TrippyTriangle /></div>;
+
+    const stage = resolution ? resolution.stage : false;
+    const combatInfo = animations({ combatTextClass, combatText, stage, player, construct });
 
     const effects = construct.effects.length
         ? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
@@ -88,12 +88,6 @@ function GameConstruct(props) {
     const playerTeam = game.players.find(t => t.id === account.id);
     const playerTeamIds = playerTeam.constructs.map(c => c.id);
 
-    const anim = (
-        <div class="anim-container">
-            {animationDivs(combatClass)}
-        </div>
-    );
-
     return (
         <div
             onClick={() => selectSkillTarget(construct.id)}
@@ -103,7 +97,7 @@ function GameConstruct(props) {
             {crypSkills}
             <div class="stats"> {stats} </div>
             <ConstructAvatar name={construct.name} id={construct.id} />
-            {combatTextEl}
+            {combatInfo}
             <div class="effects"> {effects} </div>
         </div>
     );