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

2019-07-05 17:37:42 +10:00 · 2019-07-05 17:37:42 +10:00 · 020ca2445b
commit 020ca2445b
parent cbda6bc196 1bc73694ce
5 changed files with 128 additions and 61 deletions
--- a/client/src/components/animations.jsx
+++ b/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) {

        });
    }
-
-    if (resolution.target.id !== construct.id) return false;
+    const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
+    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 />;
--- a/client/src/components/anims/ruin.jsx
+++ b/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;
--- a/client/src/components/game.construct.jsx
+++ b/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}>
--- a/client/src/utils.jsx
+++ b/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;
-        // Highlight the flow of damage from source -> target
-        // Deal damage to construct and return effect
+        const { colour } = event;
        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) {
--- a/server/src/skill.rs
+++ b/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> },