Merge branch 'anims-change' of ssh://mnml.gg:40022/~/mnml into anims-change

client/src/components/animations.jsx

@@ -24,11 +24,12 @@ const Heal = require('./anims/heal');
 const Hybrid = require('./anims/hybrid');
 const Intercept = require('./anims/intercept');
 const Invert = require('./anims/invert');
+const Link = require('./anims/link');
 const Purify = require('./anims/purify');
 const Recharge = require('./anims/recharge');
 const Refl = require('./anims/reflect');
 const Restrict = require('./anims/restrict');
-const Link = require('./anims/link');
+const Ruin = require('./anims/ruin');
 const Siphon = require('./anims/siphon');
 const SiphonTick = require('./anims/siphon.tick');
 const Slay = require('./anims/slay');
@@ -62,7 +63,6 @@ function animations(props) {
     if (!resolution.target) return false;
 
     // source animation
-    if (resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
     const playerTeam = game.players.find(t => t.id === account.id);
     const playerTeamIds = playerTeam.constructs.map(c => c.id);
     const otherTeam = game.players.find(t => t.id !== account.id);
@@ -71,8 +71,8 @@ function animations(props) {
     const sourceIsPlayer = playerTeamIds.includes(construct.id);
     const targetIsPlayer = playerTeamIds.includes(resolution.target.id);
 
+    if (resolution.source.id === construct.id && resolution.stages.includes('START_SKILL')) {
         const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer);
-
         const y = sameTeam
             ? 0
             : targetIsPlayer
@@ -98,8 +98,9 @@ function animations(props) {
 
         });
     }
-
+    const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
-    if (resolution.target.id !== construct.id) return false;
+    if (!((resolution.target.id === construct.id)
+        || (resolution.event[0] === 'AoeSkill' && targetTeam.includes(construct.id)))) return false;
 
     // target animation
     const anim = text => {
@@ -145,7 +146,7 @@ function animations(props) {
         case 'Absorb': return <Absorb />;
         case 'Sleep': return <Sleep />;
         case 'Break': return <Break />;
-        case 'Ruin': return false;
+        case 'Ruin': return <Ruin />;
 
         // Block Base
         case 'Block': return <Block />;

client/src/components/anims/ruin.jsx

@@ -0,0 +1,85 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+const { TIMES } = require('../../constants');
+
+// logarithmic spiral lifted from
+// https://upload.wikimedia.org/wikipedia/commons/5/5b/Logarithmic_spiral_(1).svg
+
+class Ruin extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        const path = 'M0,100 C100,100 100,100 200,100';
+
+        return (
+            <svg
+                class='skill-animation blue'
+                version="1.1"
+                id="ruin"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="-291 -291 582 582">
+                <defs>
+                    <filter id="ruinFilter">
+                        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+                        <feMerge>
+                            <feMergeNode />
+                            <feMergeNode in="SourceGraphic" />
+                        </feMerge>
+                    </filter>
+                </defs>
+                <g filter="url(#ruinFilter)" class="blue" >
+                    <path
+                        d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
+                    />
+                    <path
+                        d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
+                        transform="rotate(120)"
+                        style="opacity: 0.75"
+                    />
+                    <path
+                        d="M3.6 0c.23-2.93-1.9-4.9-4.8-4.77S-6.37-1.87-6.33 1.3s2.92 7.1 8.03 7 9.4-4.78 9.2-10.5-5-11.95-13.4-12.1S-18.77-6.88-18.85 3.3-10.05 24.97 4.8 24.74 32.78 11.38 32.5-6.5 16.15-42.7-7.8-42.7-55.7-22.02-56.2 9.7s27.3 65 72 64 82.32-42.78 81-92.3S55.41-126.63-23-127.4-168.4-56.97-167.6 30.3s65.85 166.15 161.27 186S246.55 187.18 284.83 0"
+                        transform="rotate(240)"
+                        style="opacity: 0.5"
+                    />
+                </g>
+            </svg>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#ruin'],
+            opacity: [
+                { value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+                { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
+            ],
+            easing: 'easeInOutSine',
+        }));
+
+        this.animations.push(anime({
+            targets: ['#ruin'],
+            rotate: 180,
+            easing: 'linear',
+            loop: true,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
+        }));
+    }
+
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
+    }
+}
+
+module.exports = Ruin;

client/src/components/game.construct.jsx

@@ -58,7 +58,7 @@ function GameConstruct(props) {
 
 
     const ko = construct.green_life.value === 0 ? 'ko' : '';
-    const classes = eventClasses(resolution, construct);
+    const classes = eventClasses(game, account, resolution, construct);
 
     const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
         <div key={j} alt={STATS[s].stat}>

client/src/utils.jsx

@@ -73,39 +73,34 @@ const STATS = {
     },
 };
 
-function eventClasses(resolution, construct) {
+function eventClasses(game, account, resolution, construct) {
     if (!resolution) return '';
     const postSkill = resolution.stages.includes('POST_SKILL');
     const source = construct.id === resolution.source.id;
     const target = construct.id === resolution.target.id;
     // not involved at all. blur them
-    if (!(source || target)) return 'unfocus';
-
-    // not the target. just ignore for now
-    // if (construct.id !== resolution.target.id) return '';
-
     const [type, event] = resolution.event;
 
+    if (type === 'AoeSkill') {
+        const playerTeam = game.players.find(t => t.id === account.id);
+        const playerTeamIds = playerTeam.constructs.map(c => c.id);
+        const otherTeam = game.players.find(t => t.id !== account.id);
+        const otherTeamIds = otherTeam.constructs.map(c => c.id);
+        const targetIsPlayer = playerTeamIds.includes(resolution.target.id);
+
+        const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
+
+        if (targetTeam.includes(construct.id)) return '';
+    }
+
+    if (!(source || target)) return 'unfocus';
+
     if (type === 'Ko') {
         if (target) return 'ko';
     }
 
-    if (type === 'Disable') {
-        const { skill, disable } = event;
-    }
-
-    if (type === 'Immunity') {
-        const { skill, immunity } = event;
-    }
-
-    if (type === 'TargetKo') {
-        const { skill } = event;
-    }
-
     if (type === 'Damage') {
-        const { skill, amount, mitigation, colour } = event;
+        const { colour } = event;
-        // Highlight the flow of damage from source -> target
-        // Deal damage to construct and return effect
         if (target && postSkill) {
             construct.green_life.value = resolution.target.green;
             if (colour === 'Red') {
@@ -120,44 +115,28 @@ function eventClasses(resolution, construct) {
                 construct.green_life.value = resolution.target.green;
                 return 'green-damage';
             }
-
         }
     }
 
     if (type === 'Healing') {
-        const { skill, amount, overhealing } = event;
         if (target && postSkill) {
             construct.green_life.value = resolution.target.green;
             return 'green-damage';
-
         }
     }
 
-    if (type === 'Inversion') {
-        const { skill } = event;
-    }
-
-    if (type === 'Reflection') {
-        const { skill } = event;
-    }
-
     if (type === 'Effect') {
-        const { skill, effect, duration, construct_effects: constructEffects } = event;
+        const { construct_effects: constructEffects } = event;
         if (target && postSkill) construct.effects = constructEffects;
     }
 
-    if (type === 'Skill') {
-        const { skill } = event;
-        // Highlight the flow of damage from source -> target
-    }
-
     if (type === 'Removal') {
-        const { effect, construct_effects: constructEffects } = event;
+        const { construct_effects: constructEffects } = event;
         if (target && postSkill) construct.effects = constructEffects;
     }
 
     if (type === 'Recharge') {
-        const { skill, red, blue } = event;
+        const { red, blue } = event;
         if (target && postSkill) {
             if (red > 0 && blue > 0) {
                 construct.red_life.value = resolution.target.red;
@@ -175,17 +154,13 @@ function eventClasses(resolution, construct) {
         }
     }
 
-    if (type === 'Evasion') {
-        const { skill, evasion_rating } = event;
-    }
-
     return '';
 }
 
 function getCombatSequence(resolution) {
     if (!resolution.event) return false;
     if (resolution.event[0] === 'Inversion') return false;
-    if (resolution.event[0] === 'Skill') return [['START_SKILL', 'END_SKILL']];
+    if (['Skill', 'AoeSkill'].includes(resolution.event[0])) return [['START_SKILL', 'END_SKILL']];
     if (resolution.event[0] === 'Ko') return [['POST_SKILL']];
 
     switch (resolution.stages) {

server/src/skill.rs

@@ -9,11 +9,16 @@ use game::{Game};
 use effect::{Effect, Colour, Cooldown};
 
 pub fn dev_resolve(a_id: Uuid, b_id: Uuid, skill: Skill) -> Resolutions {
+    let mut resolutions = vec![];
+
     let mut a = Construct::new();
     a.id = a_id;
     let mut b = Construct::new();
     b.id = b_id;
-    return resolve(skill, &mut a, &mut b, vec![]);
+    if skill.aoe() { // Send an aoe skill event for anims
+        resolutions.push(Resolution::new(&a, &b).event(Event::AoeSkill { skill }));
+    }
+    return resolve(skill, &mut a, &mut b, resolutions);
 }
 
 pub fn resolution_steps(cast: &Cast, game: &mut Game) -> Resolutions {
@@ -31,7 +36,7 @@ pub fn pre_resolve(cast: &Cast, game: &mut Game, mut resolutions: Resolutions) -
 
     if skill.aoe() { // Send an aoe skill event for anims
         resolutions.push(Resolution::new(&source,
-            &game.construct_by_id(cast.target_construct_id).unwrap().clone()).event(Event::Skill { skill }));
+            &game.construct_by_id(cast.target_construct_id).unwrap().clone()).event(Event::AoeSkill { skill }));
     }
 
     for target_id in targets {
@@ -460,6 +465,7 @@ pub enum Event {
     Recharge    { skill: Skill, red: u64, blue: u64 },
     Inversion   { skill: Skill },
     Reflection  { skill: Skill },
+    AoeSkill    { skill: Skill },
     Skill       { skill: Skill },
     Effect      { skill: Skill, effect: Effect, duration: u8, construct_effects: Vec<ConstructEffect> },
     Removal     { effect: Effect, construct_effects: Vec<ConstructEffect> },