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

Merge branch 'develop' of ssh://git.mnml.gg:40022/~/mnml into develop

Browse Source
This commit is contained in:
Mashy 2019-09-16 15:57:13 +10:00
commit 660607dc60
7 changed files with 94 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/animations.test.js
View File

@ -1,8 +1,14 @@
require('./assets/styles/styles.less');
require('./assets/styles/styles.mobile.css');
require('./assets/styles/menu.less');
require('./assets/styles/nav.less');
require('./assets/styles/footer.less');
require('./assets/styles/account.less');
require('./assets/styles/controls.less');
require('./assets/styles/instance.less');
require('./assets/styles/vbox.less');
require('./assets/styles/game.less');
require('./assets/styles/player.less');
require('./assets/styles/styles.mobile.css');
require('./assets/styles/instance.mobile.css');
require('./assets/styles/game.css');
// kick it off
require('./src/animations.test.jsx');

12
client/assets/styles/styles.less
View File

@ -93,6 +93,18 @@ dl {
"main ctrl";
padding: 0.5em 1em;
&.animations-test {
grid-template-columns: 1fr 9fr 1fr;
grid-template-areas:
"nav hdr ctrl"
"nav main ctrl"
"nav main ctrl";
nav {
display: initial;
}
}
}
main {

16
client/src/animations.socket.jsx
View File

@ -6,6 +6,7 @@ const eachSeries = require('async/eachSeries');
const actions = require('./actions');
const { TIMES } = require('./constants');
const animations = require('./animations.utils');
const { removeTier } = require('./utils');
const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://mnml.gg/api/ws' : 'ws://localhost/api/ws';
@ -28,6 +29,7 @@ function createSocket(store) {
if (animating) return false;
store.dispatch(actions.setAnimating(true));
// stop fetching the game state til animations are done
return eachSeries(newRes, (r, cb) => {
if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
@ -37,15 +39,14 @@ function createSocket(store) {
const timeout = animations.getTime(sequence);
const anims = animations.getObjects(r, sequence, game, account);
const text = animations.getText(r, sequence);
store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r, game)));
store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r)));
if (sequence.includes('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource));
if (sequence.includes('END_SKILL')) {
if (sequence.includes('START_SKILL') && anims.animSource) store.dispatch(actions.setAnimSource(anims.animSource));
if (sequence.includes('END_SKILL') && anims.animTarget) {
store.dispatch(actions.setAnimTarget(anims.animTarget));
if (!['Banish', 'Invert'].includes(anims.animTarget.skill)) store.dispatch(actions.setAnimCb(cb));
if (!['Banish', 'Invert'].includes(removeTier(anims.animTarget.skill))) store.dispatch(actions.setAnimCb(cb));
}
if (sequence.includes('POST_SKILL')) {
if (sequence.includes('POST_SKILL' && text)) {
// timeout to prevent text classes from being added too soon
setTimeout(
() => store.dispatch(actions.setAnimText(text)),
@ -58,7 +59,7 @@ function createSocket(store) {
store.dispatch(actions.setAnimText(null));
store.dispatch(actions.setAnimFocus([]));
if (!sequence.includes('END_SKILL')
|| ['Banish', 'Invert'].includes(anims.animTarget.skill)) return cb();
|| ['Banish', 'Invert'].includes(removeTier(anims.animTarget.skill))) return cb();
return true;
}, timeout);
}, err => {
@ -70,7 +71,6 @@ function createSocket(store) {
store.dispatch(actions.setAnimating(false));
store.dispatch(actions.setSkip(false));
store.dispatch(actions.setResolution(null));
// set the game state so resolutions don't fire twice
store.dispatch(actions.setGame(game));

38
client/src/animations.test.jsx
View File

@ -55,7 +55,7 @@ document.fonts.load('16pt "Jura"').then(() => {
const Animations = () => (
<Provider store={store}>
<div id="mnml">
<div id="mnml" class="animations-test">
<nav>
{animationsNav(ws)}
</nav>
@ -69,24 +69,6 @@ document.fonts.load('16pt "Jura"').then(() => {
});
const SKILLS = [
'Absorb',
'Absorption',
'Amplify',
'Attack',
'Banish',
'Bash',
'Blast',
'Block',
'Break',
'Buff',
'Chaos',
'CounterAttack',
'Counter',
'Curse',
'Debuff',
'Decay',
'DecayTick',
'Electrify',
'Electrocute',
'ElectrocuteTick',
'Haste',
@ -113,4 +95,22 @@ const SKILLS = [
'Sustain',
'Triage',
'TriageTick',
'Absorb',
'Absorption',
'Amplify',
'Attack',
'Banish',
'Bash',
'Blast',
'Block',
'Break',
'Buff',
'Chaos',
'CounterAttack',
'Counter',
'Curse',
'Debuff',
'Decay',
'DecayTick',
'Electrify',
];

120
client/src/components/anims/strike.jsx
View File

@ -1,9 +1,9 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { TIMES, COLOURS } = require('../../constants');
const addState = connect(
function receiveState(state) {
@ -12,116 +12,74 @@ const addState = connect(
}
);
function laser(dimensions, colour) {
const { x, y, length } = dimensions;
return (
<rect
width="14"
height={length}
x={x}
y={y}
fill="url(#grad1)"
stroke-width="2"
stroke={colour}
filter="url(#strikeFilter)"
/>
);
}
class Strike extends Component {
constructor(props) {
super();
this.team = props.team;
this.props = props;
this.animations = [];
this.colour = props.colour;
const coord = [0, 50, 100, 150, 200];
const points = coord.map(pos => ({
x: pos + Math.random() * 40,
y: 50 + Math.random() * 100,
length: 150 + Math.random() * 150,
}));
this.charges = points.map(pos => laser(pos, this.colour));
}
render() {
// const { x, y } = (this.props && this.props.direction) || { x: 0, y: 0 };
// const angle = (Math.atan(y / x) * (180 / Math.PI)) + 90;
// console.log(x, -y);
// console.log(angle);
// can't get this shit to work
return (
<svg
class={'skill-animation'}
class='strike-anim'
version="1.1"
id="strike"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
<stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
</radialGradient>
</defs>
<filter id="strikeFilter">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
viewBox="0 0 400 400">
<filter id='strikeFilter'>
<feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" result="turbulence"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
{this.charges}
<g>
<rect x="200" y="400"
width="12" height="100" stroke-width="0" fill={COLOURS.RED} style={{ filter: 'url("#strikeFilter")' }}
/>
</g>
</svg>
);
}
componentDidMount() {
let rotate = 0; // Self target value
if (this.props.direction.y) {
if (!this.props.direction.x) rotate = this.props.direction.y > 0 ? 0 : 180;
else {
rotate = this.props.direction.y > 0
? -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI
: -Math.atan(this.props.direction.y / this.props.direction.x) * 180 / Math.PI + 180;
}
} else if (this.props.direction.x) {
rotate = this.props.direction.x > 0 ? 270 : 90;
}
anime.set('#strike', {
rotate,
});
anime.set('#strike', {
translateY: (window.screen.height) * 0.35 * this.props.direction.y,
translateX: 0,
});
this.animations.push(anime({
targets: '#strike',
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',
targets: ['#strike rect'],
easing: 'easeOutExpo',
y: [800, 100, 100],
x: [200, 0, 200],
height: [200, 10, 0],
width: [20, 400, 0],
delay: TIMES.TARGET_DELAY_MS / 2,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: '#strike',
translateY: 0,
translateX: 0,
loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: '#strikeFilter feDisplacementMap',
scale: 200,
loop: false,
delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4),
easing: 'easeInQuad',
targets: ['#strikeFilter feTurbulence', '#strikeFilter feDisplacementMap'],
baseFrequency: 2,
scale: 50,
numOctaves: 5,
easing: 'easeOutSine',
delay: TIMES.TARGET_DELAY_MS + (TIMES.TARGET_DURATION_MS / 3),
duration: TIMES.TARGET_DURATION_MS / 2,
}));
}
// 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 && this.props.animCb();
}
}
module.exports = addState(Strike);

12
client/src/test.game.js
View File

@ -35,7 +35,7 @@ function testGame(uuid) {
"constructs": [
{
"id": "82e8b940-411c-42a1-8fc2-484ec7207734",
"img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
"img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
"account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
"red_damage": {
"base": 256,
@ -109,7 +109,7 @@ function testGame(uuid) {
},
{
"id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
"img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
"img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
"account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
"red_damage": {
"base": 256,
@ -186,7 +186,7 @@ function testGame(uuid) {
{
"id": "ea302c35-d326-475c-a867-8ad5b162165a",
"account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
"img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
"img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
"red_damage": {
"base": 256,
"value": Math.floor(Math.random() * 10000),
@ -302,7 +302,7 @@ function testGame(uuid) {
{
"id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
"account": uuid,
"img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
"img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
"red_damage": {
"base": 256,
"value": Math.floor(Math.random() * 10000),
@ -389,7 +389,7 @@ function testGame(uuid) {
{
"id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
"account": uuid,
"img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
"img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
"red_damage": {
"base": 256,
"value": Math.floor(Math.random() * 10000),
@ -470,7 +470,7 @@ function testGame(uuid) {
{
"id": "5d49fe65-27f0-4372-90a3-334ef906a0f5",
"account": uuid,
"img": "8446736d-d682-4588-b8a0-5b7ba53bdb55",
"img": "b1be1dfe-f8b5-4467-8406-11f22ffb9e95",
"red_damage": {
"base": 256,
"value": Math.floor(Math.random() * 10000),

2
server/src/effect.rs
View File

@ -149,7 +149,7 @@ impl Effect {
},
_ => {
info!("{:?} does not have a mod effect", self);
warn!("{:?} does not have a mod effect", self);
return value;
},
}