wip

client/assets/styles/game.css

@@ -194,7 +194,7 @@
 }
 
 .game-construct.unfocus {
-    opacity: 0.65;
+    opacity: 0.35;
 /*    filter: blur(5px);
 */}
 

client/src/animations.socket.jsx

@@ -28,20 +28,16 @@ function createSocket(store) {
         return eachSeries(newRes, (r, cb) => {
             if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
             // Create sub events for combat animations
-            const sequence = getCombatSequence(r);
+            store.dispatch(actions.setResolution(r));
-            return eachSeries(sequence, (stage, sCb) => {
+            // const sequence = getCombatSequence(r);
-                const { skip } = store.getState();
-                if (skip) return sCb('skip');
-                const stagedR = Object.create(r);
-                stagedR.stage = stage;
-                store.dispatch(actions.setResolution(stagedR));
 
-                return setTimeout(sCb, TIMES[stage]);
+            // sequence.forEach(stage => {
-            }, err => {
+            //     const stagedR = Object.create(r);
-                if (err) console.error(err);
+            //     stagedR.stage = stage;
-                // Finished this resolution
+            //     store.dispatch(actions.setResolution(stagedR));
-                return cb();
+            // });
-            });
+
+            setTimeout(cb, 2000);
         }, err => {
             if (err) return console.error(err);
             store.dispatch(actions.setResolution(null));
@@ -49,9 +45,9 @@ function createSocket(store) {
             store.dispatch(actions.setSkip(false));
             // update the game
             store.dispatch(actions.setGame(currentGame));
-            // get the latest state and restart polling
             return true;
         });
+
     }
 
     const handlers = {

client/src/components/animations.jsx

@@ -1,4 +1,5 @@
 const preact = require('preact');
+const anime = require('animejs').default;
 
 const AttackCharge = require('./anims/attack.charge');
 
@@ -27,28 +28,65 @@ const colours = {
     white: '#FFFFFF',
 };
 
+const SOURCE_ANIM_MS = 1000;
+
+const TARGET_ANIM_DELAY_MS = 500;
+const TARGET_ANIM_MS = 1000;
 
 function animations(props) {
-    const { combatTextClass, combatText, stage, player, construct } = props;
+    const { resolution, stage, player, construct, game, account } = props;
-    const anim = text => {
+
-        if (stage === 'START_SKILL') {
+    if (!resolution) return false;
-            const skill = removeTier(text);
+    const [type, event] = resolution.event;
-            switch (skill) {
+    if (!event.skill) return false;
-                // Attack Base
+    if (!resolution.target) return false;
-                case 'Attack': return <AttackCharge id={construct.id} team={player} colour={colours.white}/>;
+
-                case 'Strike': return <AttackCharge id={construct.id} team={player} colour={colours.red}/>;
+    // source animation
-                case 'Heal': return <AttackCharge id={construct.id} team={player} colour={colours.green}/>;
+    if (resolution.source.id === construct.id) {
-                case 'Blast': return <AttackCharge id={construct.id} team={player} colour={colours.blue}/>;
+        const playerTeam = game.players.find(t => t.id === account.id);
-                case 'Chaos': return <AttackCharge id={construct.id} team={player} colour={colours.purple}/>;
+        const playerTeamIds = playerTeam.constructs.map(c => c.id);
-                case 'Slay': return <AttackCharge id={construct.id} team={player} colour={colours.yellow}/>;
+        playerTeamIds.sort();
-                case 'Siphon': return <AttackCharge id={construct.id} team={player} colour={colours.cyan}/>;
+        const otherTeam = game.players.find(t => t.id !== account.id);
-                // Stun Base
+        const otherTeamIds = otherTeam.constructs.map(c => c.id);
-                // Block Base
+        otherTeamIds.sort();
-                // Buff Base
+
-                // Debuff Base
+        const sourceIsPlayer = playerTeamIds.includes(construct.id);
-                default: return false;
+        const targetIsPlayer = playerTeamIds.includes(resolution.target.id);
+
+        const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer);
+
+        const y = sameTeam
+            ? 0
+            : targetIsPlayer
+                ? 1
+                : -1;
+
+        const i = sourceIsPlayer
+            ? playerTeamIds.findIndex(c => c === construct.id)
+            : otherTeamIds.findIndex(c => c === construct.id);
+
+        const j = targetIsPlayer
+            ? playerTeamIds.findIndex(c => c === resolution.target.id)
+            : otherTeamIds.findIndex(c => c === resolution.target.id);
+
+        const x = j - i;
+
+        anime({
+            targets: [document.getElementById(construct.id)],
+            translateY: y * 200,
+            translateX: x * 200,
+            easing: 'easeInOutElastic',
+            direction: 'alternate',
+            duration: SOURCE_ANIM_MS,
+        });
     }
-        } else if (stage === 'END_SKILL') {
+
+    if (resolution.target.id !== construct.id) return false;
+
+    // target animation
+    const anim = text => {
+        console.log(text);
+        if (!text) return false;
         const skill = removeTier(text);
         switch (skill) {
             case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
@@ -64,33 +102,17 @@ function animations(props) {
             case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
             default: return false;
         }
-        }
-        return false;
     };
 
-    if (combatText) {
+    const combatAnim = anim(event.skill);
-        const combatAnim = anim(combatText);
+    console.log(combatAnim);
     if (combatAnim) {
         return (
-                <div class='combat-anim'>
+            <div class={`combat-anim`}>
                 {combatAnim}
             </div>
         );
     }
-        return (
-            <div class={combatTextClass}>
-                {combatText}
-            </div>
-        );
-    }
-
-    /*
-    return (
-        <div class={combatTextClass}>
-            <Test id={construct.id} stage={stage} team={player}/>
-        </div>
-    );
-    */
 
     return (<div></div>);
 }

client/src/components/anims/amplify.jsx

@@ -0,0 +1,54 @@
+const preact = require('preact');
+const { Component } = require('preact');
+
+const anime = require('animejs').default;
+
+class Amplify extends Component {
+    constructor() {
+        super();
+        this.id = Math.random();
+    }
+
+    render() {
+        const path = 'M0,100 C100,100 100,100 200,100';
+
+        return (
+            <svg
+                class='skill-animation'
+                version="1.1"
+                id="amplify"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 200 200">
+                <filter id="ampFilter">
+                    <feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+                <path filter='url("#ampFilter")' d={path} />
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        const altPath = 'M0,100 C100,400 100,-200 200,100';
+        anime({
+            targets: '#amplify path',
+            d: [{ value: altPath }],
+            stroke: ['#3498db', '#a52a2a'],
+            duration: 1000,
+            direction: 'alternate',
+            easing: 'easeInOutSine',
+            delay: 500,
+        });
+
+        anime({
+            targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
+            baseFrequency: 0.15,
+            scale: 4,
+            direction: 'alternate',
+            easing: 'easeInOutExpo',
+            delay: 500,
+        });
+    }
+}
+
+module.exports = Amplify;

client/src/components/anims/attack.jsx

@@ -35,7 +35,6 @@ class Attack extends Component {
     componentDidMount() {
         let y = 0;
         const daggers = document.querySelectorAll('.attack-anim .dagger');
-        if (this.props.stage === 'START_SKILL') {
         anime.set(daggers, {
             y: 250,
         });
@@ -49,23 +48,22 @@ class Attack extends Component {
                 rotate: 0,
             });
         }
-        }
 
-        if (this.props.stage === 'END_SKILL') {
+        // if (this.props.stage === 'END_SKILL') {
-            anime.set(daggers, {
+        //     anime.set(daggers, {
-                y: 400,
+        //         y: 400,
-            });
+        //     });
-            y = -150;
+        //     y = -150;
-            if (!this.props.team) {
+        //     if (!this.props.team) {
-                anime.set('.attack-anim', {
+        //         anime.set('.attack-anim', {
-                    rotate: 0,
+        //             rotate: 0,
-                });
+        //         });
-            } else {
+        //     } else {
-                anime.set('.attack-anim', {
+        //         anime.set('.attack-anim', {
-                    rotate: 180,
+        //             rotate: 180,
-                });
+        //         });
-            }
+        //     }
-        }
+        // }
 
         anime({
             targets: daggers,

client/src/components/anims/banish.jsx

@@ -0,0 +1,17 @@
+const anime = require('animejs').default;
+const { TIMES } = require('../../constants');
+
+// shamelessly lifted from teh anime docs
+// https://animejs.com/documentation/#svgAttr
+
+function banish(id) {
+    anime({
+        targets: [document.getElementById(id)],
+        scaleY: 0,
+        fill: '#fff',
+        easing: 'easeInOutElastic',
+        duration: TIMES.START_SKILL,
+    });
+}
+
+module.exports = banish;

client/src/components/anims/heal.jsx

@@ -59,19 +59,19 @@ class Heal extends Component {
     }
 
     componentDidMount() {
-        if (!this.props.team) {
+        // if (!this.props.team) {
-            anime.set('.skill-anim', {
+        //     anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 90,
+        //         rotate: Math.random() * 180 + 90,
-            });
+        //     });
-        } else {
+        // } else {
-            anime.set('.skill-anim', {
+        //     anime.set('.skill-anim', {
-                rotate: Math.random() * 180 + 270,
+        //         rotate: Math.random() * 180 + 270,
-            });
+        //     });
-        }
+        // }
-        anime.set('.skill-anim', {
+        // anime.set('.skill-anim', {
-            translateY: -200,
+        //     translateY: -200,
-            translateX: 0,
+        //     translateX: 0,
-        });
+        // });
         anime.set('#explosion feDisplacementMap', {
             scale: 100,
         });

client/src/components/game.construct.jsx

@@ -78,15 +78,16 @@ function GameConstruct(props) {
     const [combatText, combatClass] = getCombatText(construct, resolution);
     const combatTextClass = `combat-text ${combatClass}`;
 
+    const playerTeam = game.players.find(t => t.id === account.id);
+    const playerTeamIds = playerTeam.constructs.map(c => c.id);
+
     const stage = resolution ? resolution.stage : false;
-    const combatInfo = animations({ combatTextClass, combatText, stage, player, construct });
+    const combatInfo = animations({ game, account, resolution, stage, player, construct });
 
     const effects = construct.effects.length
         ? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
         : <div>&nbsp;</div>;
 
-    const playerTeam = game.players.find(t => t.id === account.id);
-    const playerTeamIds = playerTeam.constructs.map(c => c.id);
 
     return (
         <div

client/src/constants.jsx

@@ -1,8 +1,8 @@
 module.exports = {
     TIMES: {
-        START_SKILL: 1000,
+        START_SKILL: 2000,
-        END_SKILL: 1000,
+        END_SKILL: 2000,
-        POST_SKILL: 1000,
+        POST_SKILL: 2000,
         DELAY: 150,
     },
 

client/src/events.jsx

@@ -50,6 +50,7 @@ function registerEvents(store) {
         const { game: currentGame, ws } = store.getState();
 
         if (game) ws.startGameStateTimeout(game.id);
+        console.log(JSON.stringify(game))
         if (game && currentGame) {
             if (game.resolved.length !== currentGame.resolved.length) {
                 // stop fetching the game state til animations are done

client/src/test.game.js

@@ -33,6 +33,79 @@ function testGame(uuid) {
         "losses": 0
       },
       "constructs": [
+        {
+          "id": "82e8b940-411c-42a1-8fc2-484ec7207734",
+          "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
+          "red_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedDamage"
+          },
+          "red_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedLife"
+          },
+          "blue_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueLife"
+          },
+          "blue_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueDamage"
+          },
+          "green_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenDamage"
+          },
+          "speed": {
+            "base": 128,
+            "value": 128,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Speed"
+          },
+          "green_life": {
+            "base": 1024,
+            "value": 1024,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenLife"
+          },
+          "evasion": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Evasion"
+          },
+          "skills": [
+            {
+              "skill": "Attack",
+              "self_targeting": false,
+              "cd": null
+            },
+            {
+              "skill": "Corrupt",
+              "self_targeting": true,
+              "cd": 1
+            }
+          ],
+          "effects": [
+          ],
+          "specs": [],
+          "colours": {
+            "red": 0,
+            "green": 0,
+            "blue": 2
+          },
+          "name": "Uc4L3lun"
+        },
         {
           "id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
           "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
@@ -179,79 +252,6 @@ function testGame(uuid) {
             "blue": 2
           },
           "name": "18taUjOz"
-        },
-        {
-          "id": "82e8b940-411c-42a1-8fc2-484ec7207734",
-          "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
-          "red_damage": {
-            "base": 256,
-            "value": Math.floor(Math.random() * 10000),
-            "max": Math.floor(Math.random() * 10000),
-            "stat": "RedDamage"
-          },
-          "red_life": {
-            "base": 0,
-            "value": Math.floor(Math.random() * 10000),
-            "max": Math.floor(Math.random() * 10000),
-            "stat": "RedLife"
-          },
-          "blue_life": {
-            "base": 0,
-            "value": Math.floor(Math.random() * 10000),
-            "max": Math.floor(Math.random() * 10000),
-            "stat": "BlueLife"
-          },
-          "blue_damage": {
-            "base": 256,
-            "value": Math.floor(Math.random() * 10000),
-            "max": Math.floor(Math.random() * 10000),
-            "stat": "BlueDamage"
-          },
-          "green_damage": {
-            "base": 256,
-            "value": Math.floor(Math.random() * 10000),
-            "max": Math.floor(Math.random() * 10000),
-            "stat": "GreenDamage"
-          },
-          "speed": {
-            "base": 128,
-            "value": 128,
-            "max": Math.floor(Math.random() * 10000),
-            "stat": "Speed"
-          },
-          "green_life": {
-            "base": 1024,
-            "value": 1024,
-            "max": Math.floor(Math.random() * 10000),
-            "stat": "GreenLife"
-          },
-          "evasion": {
-            "base": 0,
-            "value": Math.floor(Math.random() * 10000),
-            "max": Math.floor(Math.random() * 10000),
-            "stat": "Evasion"
-          },
-          "skills": [
-            {
-              "skill": "Attack",
-              "self_targeting": false,
-              "cd": null
-            },
-            {
-              "skill": "Corrupt",
-              "self_targeting": true,
-              "cd": 1
-            }
-          ],
-          "effects": [
-          ],
-          "specs": [],
-          "colours": {
-            "red": 0,
-            "green": 0,
-            "blue": 2
-          },
-          "name": "Uc4L3lun"
         }
       ],
       "bot": true,