Particle animations with SCSS

client/src/components/game.component.jsx

@@ -1,5 +1,6 @@
 const preact = require('preact');
 const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
+const { animationDivs } = require('../animations');
 const GameCryp = require('./game.cryp');
 
 function GamePanel(props) {
@@ -142,6 +143,12 @@ function GamePanel(props) {
             .filter(s => playerTeamIds.includes(s.source_cryp_id) && s.target_cryp_id === cryp.id)
             .map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
 
+        const anim = (
+            <div className="anim-container">
+                {animationDivs(combatClass)}
+            </div>
+        );
+
         return (
             <div
                 key={i}
@@ -157,6 +164,7 @@ function GamePanel(props) {
                     onClick={() => selectSkillTarget(cryp.id)} >
                     {crypAvatar(cryp.name)}
                     {combatTextEl}
+                    {anim}
                 </figure>
             </div>
         );

client/src/components/game.cryp.jsx

@@ -4,6 +4,7 @@ const range = require('lodash/range');
 
 const actions = require('../actions');
 const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
+const { animationDivs } = require('../animations');
 
 const SkillBtn = require('./skill.btn');
 
@@ -83,6 +84,12 @@ function GameCryp(props) {
         .filter(s => playerTeamIds.includes(s.source_cryp_id) && s.target_cryp_id === cryp.id)
         .map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
 
+    const anim = (
+        <div className="anim-container">
+            {animationDivs(combatClass)}
+        </div>
+    );
+
     return (
         <div
             style={ activeSkill ? { cursor: 'pointer' } : {}}
@@ -101,6 +108,7 @@ function GameCryp(props) {
                 onClick={() => selectSkillTarget(cryp.id)} >
                 {crypAvatar(cryp.name)}
                 {combatTextEl}
+                {anim}
             </figure>
             <div className="effects">
                 {effects}