Particle animations with SCSS

WORKLOG.md

@@ -49,7 +49,6 @@ var / skill info rpc
 * game
 
 *SERVER*
-Base Items - Buff / Debuff / Stun should be equippable / usable skills
 
 push events
 
@@ -60,11 +59,6 @@ logging
 * vbox drops chances
   * 50% spec, 25% colour etc
 
-* confirm cryp without skill ready
-  * draw big warning !
-  * confirm all (turn timeouts) 10 - 15 seconds
-
-
 * skills
     * private fields for opponents
 

client/assets/scss/anims.scss

@@ -0,0 +1,59 @@
+
+.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/assets/styles/game.css

@@ -311,7 +311,6 @@ CRYP DAMAGE
     display: none;
 }
 
-
 /*
     COMBAT ANIMATIONS
 */
@@ -321,6 +320,7 @@ CRYP DAMAGE
  * w: http://animista.net, t: @cssanimista
  * ---------------------------------------------- */
 
+
 .attack-cast {
     -webkit-animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
             animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;

client/index.js

@@ -3,6 +3,7 @@ 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/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "parcel index.html --host 0.0.0.0 --port 40080 --no-source-maps",
     "build": "rm -rf dist && parcel build index.html && cp -r assets/molecules/ dist/",
+    "scss": "node-sass --watch assets/scss -o assets/styles",
     "lint": "eslint --fix --ext .jsx src/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -23,6 +24,7 @@
     "key": "^0.1.11",
     "keymaster": "^1.6.2",
     "lodash": "^4.17.11",
+    "node-sass": "^4.12.0",
     "parcel": "^1.12.3",
     "particles.js": "^2.0.0",
     "phaser": "^3.15.1",

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,
+        START_SKILL: 700,
-        END_SKILL: 500,
+        END_SKILL: 700,
-        POST_SKILL: 500,
+        POST_SKILL: 1000,
     },
 
     INFO: {

server/src/item.rs

@@ -399,17 +399,17 @@ impl Item {
                 self.into_skill().unwrap().duration()),
 
             Item::Strike => format!(
-                "Hits at maximum speeding dealing red damage {:?}% red power", 
+                "Hits at maximum speed dealing red damage {:?}% red power", 
                 self.into_skill().unwrap().multiplier()),
             Item::StrikeII => format!(
-                "Hits at maximum speeding dealing red damage {:?}% red power", 
+                "Hits at maximum speed dealing red damage {:?}% red power", 
                 self.into_skill().unwrap().multiplier()),
             Item::StrikeIII => format!(
-                "Hits at maximum speeding dealing red damage {:?}% red power", 
+                "Hits at maximum speed dealing red damage {:?}% red power", 
                 self.into_skill().unwrap().multiplier()),
 
             Item::Siphon => format!(
-                "Deals blue damage {:?}% blue power each turn and heals caster based on damage dealt . Lasts {:?}T",
+                "Deals blue damage {:?}% blue power each turn and heals caster based on damage dealt. Lasts {:?}T",
                 self.into_skill().unwrap().multiplier(),
                 self.into_skill().unwrap().duration()),