Particle animations with SCSS

client/src/animations.jsx

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

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}

client/src/constants.jsx

@@ -1,9 +1,9 @@
 module.exports = {
     TIMES: {
         RESOLUTION_TIME_MS: 1000,
-        START_SKILL: 500,
-        END_SKILL: 500,
-        POST_SKILL: 500,
+        START_SKILL: 700,
+        END_SKILL: 700,
+        POST_SKILL: 1000,
     },
 
     INFO: {