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

wip

Browse Source
This commit is contained in:
ntr
2019-06-29 19:47:42 +10:00
parent 911d0d5703
commit 3e525f0d45
11 changed files with 278 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/animations.jsx
+76 -54
View File
@@ -1,4 +1,5 @@
const preact = require('preact');
const anime = require('animejs').default;
const AttackCharge = require('./anims/attack.charge');
@@ -27,71 +28,92 @@ 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;
if (!resolution) return false;
const [type, event] = resolution.event;
if (!event.skill) return false;
if (!resolution.target) return false;
// source animation
if (resolution.source.id === construct.id) {
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
playerTeamIds.sort();
const otherTeam = game.players.find(t => t.id !== account.id);
const otherTeamIds = otherTeam.constructs.map(c => c.id);
otherTeamIds.sort();
const sourceIsPlayer = playerTeamIds.includes(construct.id);
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,
});
}
if (resolution.target.id !== construct.id) return false;
// target animation
const anim = text => {
if (stage === 'START_SKILL') {
const skill = removeTier(text);
switch (skill) {
// Attack Base
case 'Attack': return <AttackCharge id={construct.id} team={player} colour={colours.white}/>;
case 'Strike': return <AttackCharge id={construct.id} team={player} colour={colours.red}/>;
case 'Heal': return <AttackCharge id={construct.id} team={player} colour={colours.green}/>;
case 'Blast': return <AttackCharge id={construct.id} team={player} colour={colours.blue}/>;
case 'Chaos': return <AttackCharge id={construct.id} team={player} colour={colours.purple}/>;
case 'Slay': return <AttackCharge id={construct.id} team={player} colour={colours.yellow}/>;
case 'Siphon': return <AttackCharge id={construct.id} team={player} colour={colours.cyan}/>;
// Stun Base
// Block Base
// Buff Base
// Debuff Base
default: return false;
}
} else if (stage === 'END_SKILL') {
const skill = removeTier(text);
switch (skill) {
case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
case 'Amplify': return <Amplify/>;
case 'Banish': return banish(construct.id);
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
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 'Hex': return <Hex/>;
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}/>;
default: return false;
}
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}/>;
case 'Amplify': return <Amplify/>;
case 'Banish': return banish(construct.id);
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
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 'Hex': return <Hex/>;
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}/>;
default: return false;
}
return false;
};
if (combatText) {
const combatAnim = anim(combatText);
if (combatAnim) {
return (
<div class='combat-anim'>
{combatAnim}
</div>
);
}
const combatAnim = anim(event.skill);
console.log(combatAnim);
if (combatAnim) {
return (
<div class={combatTextClass}>
{combatText}
<div class={`combat-anim`}>
{combatAnim}
</div>
);
}
/*
return (
<div class={combatTextClass}>
<Test id={construct.id} stage={stage} team={player}/>
</div>
);
*/
return (<div></div>);
}
client/src/components/anims/amplify.jsx
+54
View File
@@ -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
+26 -28
View File
@@ -35,37 +35,35 @@ 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,
anime.set(daggers, {
y: 250,
});
y = -150;
if (!this.props.team) {
anime.set('.attack-anim', {
rotate: 180,
});
} else {
anime.set('.attack-anim', {
rotate: 0,
});
y = -150;
if (!this.props.team) {
anime.set('.attack-anim', {
rotate: 180,
});
} else {
anime.set('.attack-anim', {
rotate: 0,
});
}
}
if (this.props.stage === 'END_SKILL') {
anime.set(daggers, {
y: 400,
});
y = -150;
if (!this.props.team) {
anime.set('.attack-anim', {
rotate: 0,
});
} else {
anime.set('.attack-anim', {
rotate: 180,
});
}
}
// if (this.props.stage === 'END_SKILL') {
// anime.set(daggers, {
// y: 400,
// });
// y = -150;
// if (!this.props.team) {
// anime.set('.attack-anim', {
// rotate: 0,
// });
// } else {
// anime.set('.attack-anim', {
// rotate: 180,
// });
// }
// }
anime({
targets: daggers,
client/src/components/anims/banish.jsx
+17
View File
@@ -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
+13 -13
View File
@@ -59,19 +59,19 @@ class Heal extends Component {
}
componentDidMount() {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 90,
});
} else {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 270,
});
}
anime.set('.skill-anim', {
translateY: -200,
translateX: 0,
});
// if (!this.props.team) {
// anime.set('.skill-anim', {
// rotate: Math.random() * 180 + 90,
// });
// } else {
// anime.set('.skill-anim', {
// rotate: Math.random() * 180 + 270,
// });
// }
// anime.set('.skill-anim', {
// translateY: -200,
// translateX: 0,
// });
anime.set('#explosion feDisplacementMap', {
scale: 100,
});
client/src/components/game.construct.jsx
+4 -3
View File
@@ -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