diff --git a/client/cryps.css b/client/cryps.css index 4b98de1e..3ee86ce6 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -634,6 +634,11 @@ table td svg { height: 100%; } +.cryp-box .effects { + height: 100%; + font-size: 1.5em; +} + .cryp-skill-btn { flex: 1 1 100%; font-size: 16pt; @@ -708,14 +713,8 @@ table td svg { padding: 0; } -.team-opponent .cryp-box-top { - flex-flow: column; - justify-content: center; - align-items: stretch; -} - -.team-opponent .cryp-box-top figure { - flex: 1; +.team-opponent .cryp-box .img { + order: 5; } /*.logs { diff --git a/client/package.json b/client/package.json index a7b4f1de..659493d8 100644 --- a/client/package.json +++ b/client/package.json @@ -12,6 +12,8 @@ "author": "", "license": "UNLICENSED", "dependencies": { + "anime": "^0.1.2", + "animejs": "^3.0.1", "async": "^2.6.2", "borc": "^2.0.3", "bulma-toast": "^1.2.0", diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 809fef49..d3604a3a 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -153,11 +153,18 @@ function GamePanel(props) { className={`cryp-box ${ko} ${classes}`} style={ activeSkill ? { cursor: 'pointer' } : {}} onClick={() => selectSkillTarget(cryp.id)} > -
- {crypAvatar(cryp.name)} - {combatTextEl} -
{cryp.name}
-
+
+
selectSkillTarget(cryp.id)} > + {crypAvatar(cryp.name)} + {combatTextEl} +
{cryp.name}
+
+
+ {cryp.effects.map(c => {c.effect} - {c.duration}T)} +
+
{stats}
diff --git a/client/src/events.jsx b/client/src/events.jsx index 69beee55..c272ab88 100644 --- a/client/src/events.jsx +++ b/client/src/events.jsx @@ -1,5 +1,7 @@ const toast = require('izitoast'); const eachSeries = require('async/eachSeries'); +const anime = require('animejs').default; +const range = require('lodash/range'); const actions = require('./actions'); const { TIMES } = require('./constants'); @@ -9,12 +11,31 @@ function registerEvents(store) { // timeout handlers store.subscribe(() => { - const { game, instance, ws} = store.getState(); + const { game, instance, cryps, ws} = store.getState(); if (!game) ws.clearGameStateTimeout(); if (!instance) ws.clearInstanceStateTimeout(); }); + + // cryp animations + function crypAnimations() { + const cryps = document.querySelectorAll('img'); + if (!cryps.length) return window.requestAnimationFrame(crypAnimations); + return anime({ + targets: 'img', + translateX: () => anime.random(-20, 20), + translateY: () => anime.random(-20, 20), + rotate: () => anime.random(-90, 90), + duration: () => anime.random(5000, 6000), + direction: 'alternate', + easing: 'linear', + loop: true, + }); + } + setInterval(crypAnimations, 5000); + crypAnimations(); + function setCryps(cryps) { console.log('EVENT ->', 'cryps', cryps); } diff --git a/server/src/skill.rs b/server/src/skill.rs old mode 100644 new mode 100755 index 84bd5783..4ad50e93 --- a/server/src/skill.rs +++ b/server/src/skill.rs @@ -75,7 +75,7 @@ pub fn resolve(skill: Skill, source: &mut Cryp, target: &mut Cryp, mut resolutio Skill::Strike => strike(source, target, resolutions, Skill::Strike), Skill::StrikeII => strike(source, target, resolutions, Skill::StrikeII), Skill::StrikeIII => strike(source, target, resolutions, Skill::StrikeIII), - + Skill::Stun => stun(source, target, resolutions, Skill::Stun), Skill::Taunt => taunt(source, target, resolutions, Skill::Taunt), Skill::Throw => throw(source, target, resolutions, Skill::Throw), // no damage stun, adds vulnerable @@ -969,10 +969,10 @@ fn slay(source: &mut Cryp, target: &mut Cryp, mut results: Resolutions, skill: S for e in slay_events { match e { Event::Damage { amount, mitigation: _, colour: _, skill: _ } => { - let heal = source.deal_green_damage(skill, amount); results.push(Resolution::new(source, target).event(e)); - for e in heal { - results.push(Resolution::new(source, source).event(e)); + let heal = source.deal_green_damage(skill, amount); + for h in heal { + results.push(Resolution::new(source, source).event(h)); }; }, _ => results.push(Resolution::new(source, target).event(e)), @@ -1154,10 +1154,10 @@ fn siphon_tick(source: &mut Cryp, target: &mut Cryp, mut results: Resolutions, s for e in siphon_events { match e { Event::Damage { amount, mitigation: _, colour: _, skill: _ } => { - let heal = source.deal_green_damage(Skill::Siphon, amount); results.push(Resolution::new(source, target).event(e)); - for e in heal { - results.push(Resolution::new(source, source).event(e)); + let heal = source.deal_green_damage(Skill::Siphon, amount); + for h in heal { + results.push(Resolution::new(source, source).event(h)); }; }, _ => results.push(Resolution::new(source, target).event(e)), @@ -1407,8 +1407,6 @@ mod tests { }, _ => panic!("not healing"), }; - - }