ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added stages back in

Browse Source
This commit is contained in:
Mashy
2019-07-01 18:36:44 +10:00
parent c7120d795f
commit 0e19156f3a
23 changed files with 109 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/animations.jsx
+32 -23
View File
@@ -24,7 +24,7 @@ const SiphonTick = require('./anims/siphon.tick');
// const Test = require('./anims/test');
const { removeTier } = require('../utils');
const { removeTier, getCombatText } = require('../utils');
const colours = {
red: '#a52a2a',
@@ -36,23 +36,20 @@ const colours = {
white: '#FFFFFF',
};
const SOURCE_ANIM_MS = 1000;
const TARGET_ANIM_DELAY_MS = 500;
const TARGET_ANIM_MS = 1000;
const SOURCE_ANIM_MS = 850;
function animations(props) {
const { resolution, stage, player, construct, game, account } = props;
const { game, account, resolution, player, construct } = props;
console.log(resolution);
if (!resolution) return false;
const [type, event] = resolution.event;
const [, event] = resolution.event;
if (!event.skill) return false;
if (!resolution.target) return false;
console.log(resolution);
const { stages } = resolution;
console.log(stages);
// source animation
if (resolution.source.id === construct.id) {
if (resolution.source.id === construct.id && 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);
@@ -92,46 +89,58 @@ function animations(props) {
if (resolution.target.id !== construct.id) return false;
// target animation
console.log(stages);
const anim = text => {
console.log(text);
if (!text) return false;
if (!text || !stages.includes('END_SKILL')) return false;
const skill = removeTier(text);
if (skill === 'Bash' && type === 'Damage') return false;
// if (skill === 'Bash' && type === 'Damage') return false;
switch (skill) {
case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
case 'Attack': return <Strike id={construct.id} team={player} colour={colours.white}/>;
case 'Amplify': return <Amplify/>;
case 'Banish': return banish(construct.id);
case 'Bash': return <Bash />;
case 'Block': return <Block />;
case 'Buff': return <Buff />;
case 'Curse': return <Curse />;
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
case 'Blast': return <Blast id={construct.id} team={player}/>;
case 'Debuff': return <Debuff />;
case 'Decay': return <Decay />;
case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
case 'Slay': return <Slay id={construct.id} team={player} colour={colours.yellow}/>;
case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Strike': return <Strike id={construct.id} team={player} colour={colours.red}/>;
case 'Chaos': return <Chaos id={construct.id} team={player}/>;
case 'Slay': return <Slay id={construct.id} team={player} />;
case 'Heal': return <Heal id={construct.id} team={player} />;
case 'Hex': return <Hex />;
case 'Haste': return <Haste />;
case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Siphon': return <Siphon id={construct.id} team={player} />;
case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;
case 'Stun': return <Stun />;
default: return false;
}
};
const combatAnim = anim(event.skill);
if (combatAnim) {
return (
<div class={`combat-anim`}>
<div class={'combat-anim'}>
{combatAnim}
</div>
);
}
return (<div></div>);
if (stages.includes('POST_SKILL')) {
const combatText = getCombatText(resolution);
return (
<div class={'combat-text'}>
{combatText}
</div>
);
}
return (
<div></div>);
}
module.exports = animations;
client/src/components/anims/attack.jsx
+1 -1
View File
@@ -5,7 +5,7 @@ const anime = require('animejs').default;
const dagger = require('../svgs/dagger');
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
class Attack extends Component {
constructor(props) {
client/src/components/anims/banish.jsx
+1 -1
View File
@@ -10,7 +10,7 @@ function banish(id) {
scaleY: 0,
fill: '#fff',
easing: 'easeInOutElastic',
duration: TIMES.START_SKILL,
duration: TIMES.TARGET_DURATION_MS,
});
}
client/src/components/anims/blast.jsx
+1 -1
View File
@@ -5,7 +5,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {
client/src/components/anims/block.jsx
+1 -1
View File
@@ -45,7 +45,7 @@ class Block extends Component {
opacity: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
client/src/components/anims/buff.jsx
+4 -4
View File
@@ -38,28 +38,28 @@ class Buff extends Component {
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#buff .buff-one'],
points: '0,190 100,10 190,190',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#buff .buff-two'],
points: '40,170 100,50 160,170',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#buff .buff-three'],
points: '70,150 100,90 130,150',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
client/src/components/anims/chaos.jsx
+1 -1
View File
@@ -5,7 +5,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {
return (
client/src/components/anims/curse.jsx
+1 -1
View File
@@ -35,7 +35,7 @@ class Curse extends Component {
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
client/src/components/anims/debuff.jsx
+4 -4
View File
@@ -39,28 +39,28 @@ class Debuff extends Component {
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#debuff .debuff-one'],
points: '0,190 100,10 190,190',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#debuff .debuff-two'],
points: '40,170 100,50 160,170',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#debuff .debuff-three'],
points: '70,150 100,90 130,150',
easing: 'easeOutExpo',
duration: TIMES.START_SKILL,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
client/src/components/anims/decay.jsx
+2 -2
View File
@@ -41,7 +41,7 @@ class Decay extends Component {
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
@@ -50,7 +50,7 @@ class Decay extends Component {
opacity: 0,
easing: 'linear',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.START_SKILL,
duration: TIMES.TARGET_DURATION_MS,
}));
}
client/src/components/anims/haste.jsx
+1 -1
View File
@@ -46,7 +46,7 @@ class Haste extends Component {
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
client/src/components/anims/heal.jsx
+1 -1
View File
@@ -5,7 +5,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {
client/src/components/anims/hex.jsx
+1 -1
View File
@@ -43,7 +43,7 @@ class Hex extends Component {
opacity: 1,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
client/src/components/anims/siphon.jsx
+1 -1
View File
@@ -4,7 +4,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
class AttackCharge extends Component {
render() {
client/src/components/anims/siphon.tick.jsx
+1 -1
View File
@@ -4,7 +4,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {
client/src/components/anims/slay.jsx
+1 -1
View File
@@ -5,7 +5,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {
client/src/components/anims/strike.jsx
+1 -1
View File
@@ -4,7 +4,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function laser(dimensions, colour) {
client/src/components/anims/stun.jsx
+3 -3
View File
@@ -49,7 +49,7 @@ class Stun extends Component {
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
@@ -57,8 +57,8 @@ class Stun extends Component {
rotate: 180,
easing: 'linear',
duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
@@ -67,7 +67,7 @@ class Stun extends Component {
strokeWidth: 0,
easing: 'easeInOutSine',
direction: 'alternate',
duration: TIMES.START_SKILL,
duration: TIMES.TARGET_DURATION_MS,
}));
}
client/src/components/game.construct.jsx
+2 -10
View File
@@ -75,19 +75,11 @@ function GameConstruct(props) {
let crypSkills = <div> &nbsp; </div>;
if (player) crypSkills = (<div class="skills"> {skills} </div>);
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({ 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 combatInfo = animations({ game, account, resolution, player, construct });
return (
<div
@@ -104,4 +96,4 @@ function GameConstruct(props) {
);
}
module.exports = addState(GameConstruct);
module.exports = addState(GameConstruct);