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

Merge remote-tracking branch 'origin/develop' into develop

Browse Source
This commit is contained in:
Mashy
2019-07-23 18:07:39 +10:00
parent 4c68d11a28 12ff5aec66
commit 2dc929de40
15 changed files with 252 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/animations.socket.jsx
+11 -8
View File
@@ -28,12 +28,9 @@ function createSocket(store) {
if (animating) return false;
store.dispatch(actions.setAnimating(true));
return eachSeries(newRes, (r, cb) => {
if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
store.dispatch(actions.setResolution(r));
// convert server enum into anims keywords
// todo make serersideonly
const sequence = animations.getSequence(r);
@@ -41,23 +38,29 @@ function createSocket(store) {
const anims = animations.getObjects(r, sequence, game, account);
const text = animations.getText(r, sequence);
store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r)));
if (sequence.includes('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource));
if (sequence.includes('END_SKILL')) store.dispatch(actions.setAnimTarget(anims.animTarget));
if (sequence.includes('END_SKILL')) {
store.dispatch(actions.setAnimTarget(anims.animTarget));
if (!['Banish', 'Invert'].includes(anims.animTarget.skill)) store.dispatch(actions.setAnimCb(cb));
}
if (sequence.includes('POST_SKILL')) {
// timeout to prevent text classes from being added too soon
setTimeout(
() => store.dispatch(actions.setAnimText(text)),
timeout - 1000,
timeout - TIMES.POST_SKILL_DURATION_MS
);
}
return setTimeout(() => {
store.dispatch(actions.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null));
store.dispatch(actions.setAnimText(null));
return setTimeout(cb, 50);
store.dispatch(actions.setAnimFocus([]));
if (!sequence.includes('END_SKILL')
|| ['Banish', 'Invert'].includes(anims.animTarget.skill)) return cb();
return true;
}, timeout);
}, err => {
if (err) return console.error(err);
// clear animation state
client/src/animations.test.jsx
+37 -37
View File
@@ -69,48 +69,48 @@ document.fonts.load('16pt "Jura"').then(() => {
});
const SKILLS = [
'AbsorbI',
'AbsorptionI',
'AmplifyI',
'Absorb',
'Absorption',
'Amplify',
'Attack',
'BanishI',
'BashI',
'BlastI',
'Banish',
'Bash',
'Blast',
'Block',
'BreakI',
'Break',
'Buff',
'ChaosI',
'CounterAttackI',
'CounterI',
'CurseI',
'Chaos',
'CounterAttack',
'Counter',
'Curse',
'Debuff',
'DecayI',
'DecayTickI',
'ElectrifyI',
'ElectrocuteI',
'ElectrocuteTickI',
'HasteI',
'Decay',
'DecayTick',
'Electrify',
'Electrocute',
'ElectrocuteTick',
'Haste',
'HasteStrike',
'HealI',
'Heal',
'HybridBlast',
'HybridI',
'InterceptI',
'InvertI',
'LinkI',
'PurgeI',
'PurifyI',
'RechargeI',
'ReflectI',
'RestrictI',
'RuinI',
'SilenceI',
'SiphonI',
'SiphonTickI',
'SlayI',
'SleepI',
'StrikeI',
'Hybrid',
'Intercept',
'Invert',
'Link',
'Purge',
'Purify',
'Recharge',
'Reflect',
'Restrict',
'Ruin',
'Silence',
'Siphon',
'SiphonTick',
'Slay',
'Sleep',
'Strike',
'Stun',
'SustainI',
'TriageI',
'TriageTickI',
'Sustain',
'Triage',
'TriageTick',
];
client/src/components/animations.jsx
+2 -1
View File
@@ -3,6 +3,7 @@ const { Component } = require('preact');
const { connect } = require('preact-redux');
const Amplify = require('./anims/amplify');
const Attack = require('./anims/attack');
const Absorb = require('./anims/absorb');
const Bash = require('./anims/bash');
const Blast = require('./anims/blast');
@@ -69,7 +70,7 @@ class ConstructAnimation extends Component {
const chooseAnim = (skill) => {
switch (skill) {
// Attack base
case 'Attack': return <Strike colour={'#f5f5f5'} direction={direction}/>;
case 'Attack': return <Attack direction={direction}/>;
case 'Blast': return <Blast direction={direction}/>;
case 'Siphon': return <Siphon />;
case 'SiphonTick': return <SiphonTick />;
client/src/components/anims/attack.jsx
+67
View File
@@ -0,0 +1,67 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES, COLOURS } = require('../../constants');
const addState = connect(
function receiveState(state) {
const { animCb } = state;
return { animCb };
}
);
class Attack extends Component {
constructor(props) {
super();
this.props = props;
this.animations = [];
}
render() {
return (
<svg
class='attack-anim'
version="1.1"
id="attack"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 400 400">
<g>
<rect x="0" y="400" transform="skewX(45)"
width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
<rect x="200" y="400"
width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
<rect x="400" y="400" transform="skewX(-45)"
width="12" height="100" stroke-width="0" fill={COLOURS.RED}/>
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#attack rect'],
easing: 'easeOutExpo',
y: [400, 200],
height: [100, 10, 0],
width: [12, 5, 0],
delay: () => anime.random(TIMES.TARGET_DELAY_MS, TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS / 2),
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();
}
this.props.animCb();
}
}
module.exports = addState(Attack);
client/src/components/anims/blast.jsx
+36 -47
View File
@@ -2,9 +2,9 @@ const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const times = require('lodash/times');
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const { TIMES, COLOURS } = require('../../constants');
const addState = connect(
function receiveState(state) {
@@ -30,76 +30,65 @@ function projectile(x, y, radius, colour) {
class Blast extends Component {
constructor(props) {
super();
this.team = props.team;
this.animations = [];
const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 20, '#00aabb'));
}
render() {
return (
<svg
class={'skill-animation'}
id='blast'
class="skill-animation"
version="1.1"
id="blast"
transform-box='fill-box'
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
// {this.charges}
viewBox="0 0 300 300">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.6" />
<stop offset="100%" style={'stop-color:#00aabb;stop-opacity:1'} />
</radialGradient>
<filter id="blastFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<filter id="explosion">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
<g>
{times(50, () => (
<g>
<rect filter="url(#blastFilter)" class="blue" x="150" y="200" width="3" height="5" />
<rect filter="url(#blastFilter)" class="white" x="150" y="200" width="1" height="3" />
</g>
))}
</g>
</svg>
);
}
componentDidMount() {
anime.set('#blast', {
translateX: -200 * this.props.direction.x,
translateY: -300 * this.props.direction.y,
});
this.animations.push(anime({
targets: '#blast',
targets: ['#blast'],
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.5, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
easing: 'easeInOutSine',
}));
anime.set('#explosion feDisplacementMap', {
scale: 1,
});
this.animations.push(anime({
targets: '#blast',
translateY: 0,
translateX: 0,
loop: false,
targets: ['#blast g'],
transform: () => `
translate(${anime.random(-100, 100)} ${anime.random(-100, 100)})
`,
style: { rotate: anime.random(-180, 180) },
easing: 'easeOutCubic',
delay: TIMES.TARGET_DELAY_MS,
duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: '#explosion feDisplacementMap',
scale: 200,
loop: false,
delay: TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 2,
duration: TIMES.TARGET_DURATION_MS * 1 / 2,
easing: 'easeInQuad',
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();
client/src/components/anims/break.jsx
+2 -1
View File
@@ -106,7 +106,8 @@ class Break extends Component {
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
} this.props.animCb();
}
this.props.animCb();
}
}
client/src/components/instance.constructs.jsx
+1 -1
View File
@@ -144,7 +144,7 @@ function Construct(props) {
if (!s) {
const equipping = specList.includes(vbox.bound[itemEquip]);
const classes = `${equipping ? 'equip-spec' : 'gray'} empty`;
const classes = `${equipping ? 'equipping' : 'gray'} empty`;
return (
<button key={i} class={classes} disabled={!equipping} >
{shapes.None()}
client/src/components/shapes.jsx
+6 -7
View File
@@ -33,7 +33,7 @@ module.exports = {
RedPower: () => circle(['red']),
GreenPower: () => circle(['green']),
BluePower: () => circle(['blue']),
Speed: () => triangle(['white']),
SpeedStat: () => triangle(['white']),
// specs
@@ -58,12 +58,11 @@ module.exports = {
<figcaption>Life</figcaption>
</figure>,
// Speed:
// <figure>
// {triangle(['white'])}
// <figcaption>Speed</figcaption>
// </figure>,
Speed: () =>
<figure>
{triangle(['white'])}
<figcaption>Speed</figcaption>
</figure>,
// Lifes Upgrades
LifeGG: () =>
client/src/components/svgs/diamond.jsx
+3 -3
View File
@@ -4,9 +4,9 @@ module.exports = function triangle(classes) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200" class={classes} transform="rotate(45)" >
<rect x="10" y="10" width="180" height="180"/>
<rect x="40" y="40" width="120" height="120"/>
<rect x="70" y="70" width="60" height="60"/>
<rect x="25" y="25" width="175" height="175"/>
<rect x="55" y="55" width="115" height="115"/>
<rect x="85" y="85" width="55" height="55"/>
</svg>
);
};
client/src/utils.jsx
+1 -1
View File
@@ -63,7 +63,7 @@ const STATS = {
colour: 'blue',
svg: shapes.circle,
},
Speed: {
SpeedStat: {
stat: 'speed',
colour: 'white',
svg: shapes.triangle,