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

strike stuff

Browse Source
This commit is contained in:
ntr 2019-09-16 15:26:44 +10:00
parent 0edfe55387
commit 50f2afd657
4 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -97,7 +97,7 @@ dl {
&.animations-test { &.animations-test {
grid-template-columns: 1fr 9fr 1fr; grid-template-columns: 1fr 9fr 1fr;
grid-template-areas: grid-template-areas:
"hdr hdr ctrl" "nav hdr ctrl"
"nav main ctrl" "nav main ctrl"
"nav main ctrl"; "nav main ctrl";

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

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

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

@ -20,6 +20,12 @@ class Strike extends Component {
} }
render() { 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 ( return (
<svg <svg
class='strike-anim' class='strike-anim'
@ -32,8 +38,9 @@ class Strike extends Component {
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter> </filter>
<g> <g>
<rect x="200" y="400" <rect x="200" y="400"
width="12" height="100" stroke-width="0" fill={COLOURS.RED} style={{ filter: 'url("#strikeFilter")' }} /> width="12" height="100" stroke-width="0" fill={COLOURS.RED} style={{ filter: 'url("#strikeFilter")' }}
/>
</g> </g>
</svg> </svg>
); );
@ -43,11 +50,11 @@ class Strike extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#strike rect'], targets: ['#strike rect'],
easing: 'easeOutExpo', easing: 'easeOutExpo',
y: [400, 200, 200], y: [800, 100, 100],
x: [200, 0, 200], x: [200, 0, 200],
height: [200, 10, 0], height: [200, 10, 0],
width: [20, 400, 0], width: [20, 400, 0],
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS / 2,
duration: TIMES.TARGET_DURATION_MS, duration: TIMES.TARGET_DURATION_MS,
})); }));

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

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