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

good

Browse Source
This commit is contained in:
ntr 2019-07-19 18:24:46 +10:00
parent 18ac220006
commit 8d8a79c712
12 changed files with 114 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/actions.jsx
View File

@ -1,5 +1,6 @@
export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', value });
export const setAnimating = value => ({ type: 'SET_ANIMATING', value });
export const setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value });
export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value });
export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });

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

@ -24,7 +24,11 @@ function createSocket(store) {
}
function onDevResolutions(newRes) {
const { game: currentGame, account } = store.getState();
const { game, account, animating } = store.getState();
if (animating) return false;
store.dispatch(actions.setAnimating(true));
return eachSeries(newRes, (r, cb) => {
if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
@ -32,28 +36,26 @@ function createSocket(store) {
// todo make serersideonly
const sequence = animations.getSequence(r);
const timeout = animations.getTime(sequence);
const anims = animations.getObjects(r, sequence, currentGame, account);
console.log(sequence, timeout, anims);
const anims = animations.getObjects(r, sequence, game, account);
store.dispatch(actions.setAnimSource(anims.animSource));
store.dispatch(actions.setAnimTarget(anims.animTarget));
return setTimeout(cb, timeout);
// return setTimeout(sCb, timeout);
// }, err => {
// if (err) console.error(err);
// // Clear the anim classes
// store.dispatch(actions.setResolution(null));
// // store.dispatch(actions.setAvatarAnimation({ id, source: false, target: false }));
// // Finished this resolution small delay for reset
// return setTimeout(cb, 5);
// });
return setTimeout(() => {
store.dispatch(actions.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null));
return setTimeout(cb, 50);
}, 3000);
}, err => {
if (err) return console.error(err);
store.dispatch(actions.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null));
store.dispatch(actions.setGame(currentGame));
store.dispatch(actions.setAnimating(false));
// stop skipping resolutions
store.dispatch(actions.setSkip(false));
// ws.sendGameState(currentGame.id);
return true;
});
}

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

@ -20,10 +20,10 @@ const testAccount = {
// Redux Store
const store = createStore(
combineReducers(reducers)
combineReducers(reducers),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);
store.subscribe(() => console.log(store.getState()));
store.dispatch(actions.setAccount(testAccount));
store.dispatch(actions.setGame(testGame));

4
client/src/animations.utils.jsx
View File

@ -68,8 +68,8 @@ function getObjects(resolution, stages, game, account) {
}
function getSequence(resolution) {
if (!resolution.event) return false;
if (resolution.event[0] === 'Inversion') return false;
if (!resolution.event) return [];
if (resolution.event[0] === 'Inversion') return [];
if (['Skill', 'AoeSkill'].includes(resolution.event[0])) return ['START_SKILL', 'END_SKILL'];
if (resolution.event[0] === 'Ko') return ['POST_SKILL'];

3
client/src/app.jsx
View File

@ -15,7 +15,8 @@ const Mnml = require('./components/mnml');
// Redux Store
const store = createStore(
combineReducers(reducers)
combineReducers(reducers),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);
document.fonts.load('16pt "Jura"').then(() => {

1
client/src/components/animations.jsx
View File

@ -123,7 +123,6 @@ class ConstructAnimation extends Component {
};
const anim = chooseAnim(skill);
console.log(anim);
if (!anim) return false;
return (

4
client/src/components/anims/source.cast.jsx
View File

@ -6,8 +6,8 @@ function sourceCast(id, direction) {
const { x, y } = direction;
return anime({
targets: [document.getElementById(id)],
translateX: x * 200,
translateY: y * 200,
translateX: [0, x * 200],
translateY: [0, y * 200],
easing: 'easeInOutElastic',
direction: 'alternate',
duration: TIMES.SOURCE_DURATION_MS,

76
client/src/components/construct.jsx
View File

@ -2,7 +2,7 @@ const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const { match } = require('./../utils');
// const { match } = require('./../utils');
const banish = require('./anims/banish');
const idleAnimation = require('./anims/idle');
@ -37,16 +37,15 @@ class ConstructAvatar extends Component {
}
componentDidMount() {
console.log(this.props.construct.name, 'mounted');
const { animSource, animTarget, construct } = this.props;
// back to idle
if (!animTarget && !animSource) {
if (!this.idle) {
this.idle = idleAnimation(this.props.construct.id);
this.animations.push(this.idle);
}
componentDidUpdate(newProps) {
const { animSource, animTarget, construct } = newProps;
// back to idle
if (!animTarget || !animSource) {
return this.idle.play();
}
@ -54,7 +53,7 @@ class ConstructAvatar extends Component {
const selectAnim = () => {
if (isSource) {
console.log(construct.name, 'source anim');
console.warn(construct.name, animSource);
return sourceCast(animSource.constructId, animSource.direction);
}
@ -66,13 +65,41 @@ class ConstructAvatar extends Component {
};
const anim = selectAnim();
if (anim) {
if (!anim) return false;
this.idle.pause();
this.animations.push(anim);
return true;
}
return false;
componentDidUpdate(prevProps) {
const { animSource, animTarget, construct } = this.props;
// back to idle
if (!animTarget && !animSource) {
return this.idle.play();
}
const isSource = animSource && animSource.constructId === construct.id;
const selectAnim = () => {
if (isSource) {
return sourceCast(animSource.constructId, animSource.direction);
}
switch (animTarget.skill) {
case 'banish': return banish(construct.id);
case 'invert': return invert(construct.id);
default: return null;
}
};
const anim = selectAnim();
if (!anim) return false;
this.idle.pause();
this.animations.push(anim);
return true;
}
resetAnimations() {
@ -85,14 +112,31 @@ class ConstructAvatar extends Component {
this.resetAnimations();
}
shouldComponentUpdate({ animTarget, animSource, construct }) {
const updated = (animTarget !== this.props.animTarget) || (animSource !== this.props.animSource);
if (!updated) return false;
shouldComponentUpdate({ animSource, construct }) {
if (animSource === this.props.animSource) {
// console.warn(construct.name, 'thinks its same props')
return false;
}
const isSource = animSource && animSource.constructId === construct.id;
const isTarget = animTarget && animTarget.constructId === construct.id;
// something has changed
// what do?
return isSource || isTarget;
// this is the source
if (animSource && animSource.constructId === construct.id) {
// console.warn(construct.name, 'should update')
return true;
}
// this is the target
// if (animTarget && animTarget.constructId === construct.id) return true;
// we were previously doing src anim
const prevSrc = this.props.animSource && this.props.animSource.constructId === construct.id;
if (prevSrc && !animSource) return true;
// console.warn(construct.name, 'not updating');
return false;
}
}

10
client/src/components/targeting.arrows.jsx
View File

@ -6,8 +6,8 @@ const { connect } = require('preact-redux');
const throttle = require('lodash/throttle');
const addState = connect(
({ game, account, animSource, animTarget }) =>
({ game, account, animSource, animTarget })
({ game, account, animTarget, animating }) =>
({ game, account, animTarget, animating })
);
class TargetSvg extends Component {
@ -24,12 +24,14 @@ class TargetSvg extends Component {
}
render(props, state) {
const { game, account, animSource, animTarget } = props;
const { game, account, animating, animTarget } = props;
const { width, height } = state;
// resolutions happening
// just put skill name up
if (animSource || animTarget) {
if (animating) {
if (!animTarget) return false;
return (
<svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" class="targeting-arrows">
<text

5
client/src/constants.jsx
View File

@ -1,15 +1,16 @@
const SOURCE_DURATION_MS = 1000;
const TARGET_DELAY_MS = 500;
const TARGET_DURATION_MS = 1500;
const POST_SKILL_DELAY_MS = 2000;
const POST_SKILL_DURATION_MS = 1000;
const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS;
const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS + POST_SKILL_DURATION_MS;
module.exports = {
TIMES: {
SOURCE_DURATION_MS,
TARGET_DELAY_MS,
TARGET_DURATION_MS,
POST_SKILL_DELAY_MS,
POST_SKILL_DURATION_MS,
SOURCE_AND_TARGET_TOTAL_DURATION,
},

30
client/src/events.jsx
View File

@ -42,10 +42,14 @@ function registerEvents(store) {
}
function setGame(game) {
const { game: currentGame, account, ws } = store.getState();
const { game: currentGame, account, ws, animating } = store.getState();
if (animating) return false;
if (game && currentGame) {
if (game.resolved.length !== currentGame.resolved.length) {
store.dispatch(actions.setAnimating(true));
// stop fetching the game state til animations are done
const newRes = game.resolved.slice(currentGame.resolved.length);
return eachSeries(newRes, (r, cb) => {
@ -57,30 +61,23 @@ function registerEvents(store) {
const timeout = animations.getTime(sequence);
const anims = animations.getObjects(r, sequence, game, account);
console.log(sequence, timeout, anims);
store.dispatch(actions.setAnimSource(anims.animSource));
store.dispatch(actions.setAnimTarget(anims.animTarget));
return setTimeout(cb, timeout);
// return setTimeout(sCb, timeout);
// }, err => {
// if (err) console.error(err);
// // Clear the anim classes
// store.dispatch(actions.setResolution(null));
// // store.dispatch(actions.setAvatarAnimation({ id, source: false, target: false }));
// // Finished this resolution small delay for reset
// return setTimeout(cb, 5);
// });
return setTimeout(() => {
store.dispatch(actions.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null));
return setTimeout(cb, 50);
}, 3000);
}, err => {
if (err) return console.error(err);
store.dispatch(actions.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null));
store.dispatch(actions.setAnimating(false));
// stop skipping resolutions
store.dispatch(actions.setSkip(false));
// update the game
store.dispatch(actions.setGame(game));
// get the latest state and restart polling
ws.sendGameState(currentGame.id);
return true;
});
@ -88,7 +85,6 @@ function registerEvents(store) {
}
return store.dispatch(actions.setGame(game));
return console.log('EVENT ->', 'game', game);
}
function setAccount(account) {

1
client/src/reducers.jsx
View File

@ -15,6 +15,7 @@ module.exports = {
activeConstruct: createReducer(null, 'SET_ACTIVE_CONSTRUCT'),
activeItem: createReducer(null, 'SET_ACTIVE_VAR'),
activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'),
animating: createReducer(false, 'SET_ANIMATING'),
animSource: createReducer(null, 'SET_ANIM_SOURCE'),
animTarget: createReducer(null, 'SET_ANIM_TARGET'),
combiner: createReducer([null, null, null], 'SET_COMBINER'),