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

put animation skill into state

Browse Source
This commit is contained in:
Mashy 2019-10-05 13:14:44 +10:00
parent c8dddcc094
commit 5fb7f157b4
7 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/animations.test.js
View File

@ -9,6 +9,6 @@ require('./assets/styles/vbox.less');
require('./assets/styles/game.less'); require('./assets/styles/game.less');
require('./assets/styles/player.less'); require('./assets/styles/player.less');
require('./assets/styles/styles.mobile.css'); require('./assets/styles/styles.mobile.css');
require('./assets/styles/instance.mobile.css'); require('./assets/styles/instance.mobile.less');
require('./src/animations.test.jsx'); require('./src/animations.test.jsx');

2
client/package.json
View File

@ -41,7 +41,7 @@
"babel-plugin-module-resolver": "^3.2.0", "babel-plugin-module-resolver": "^3.2.0",
"babel-preset-es2015": "^6.24.1", "babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1", "babel-preset-react": "^6.24.1",
"eslint": "^5.6.0", "eslint": "^5.16.0",
"eslint-config-airbnb-base": "^13.1.0", "eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.14.0", "eslint-plugin-import": "^2.14.0",
"eslint-plugin-react": "^7.11.1", "eslint-plugin-react": "^7.11.1",

1
client/src/actions.jsx
View File

@ -4,6 +4,7 @@ export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', valu
export const setAnimating = value => ({ type: 'SET_ANIMATING', value }); export const setAnimating = value => ({ type: 'SET_ANIMATING', value });
export const setAnimCb = value => ({ type: 'SET_ANIM_CB', value }); export const setAnimCb = value => ({ type: 'SET_ANIM_CB', value });
export const setAnimFocus = value => ({ type: 'SET_ANIM_FOCUS', value }); export const setAnimFocus = value => ({ type: 'SET_ANIM_FOCUS', value });
export const setAnimSkill = value => ({ type: 'SET_ANIM_SKILL', value });
export const setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value }); export const setAnimSource = value => ({ type: 'SET_ANIM_SOURCE', value });
export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value }); export const setAnimTarget = value => ({ type: 'SET_ANIM_TARGET', value });
export const setAnimText = value => ({ type: 'SET_ANIM_TEXT', value }); export const setAnimText = value => ({ type: 'SET_ANIM_TEXT', value });

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

@ -36,7 +36,7 @@ function getObjects(resolution, stages, game, account) {
const i = sourceIsPlayer const i = sourceIsPlayer
? playerTeamIds.findIndex(c => c === resolution.source.id) ? playerTeamIds.findIndex(c => c === resolution.source.id)
: otherTeamIds.findIndex(c => c === resolution.source.id); : otherTeamIds.findIndex(c => c === resolution.source.id);
const j = targetIsPlayer const j = targetIsPlayer
? playerTeamIds.findIndex(c => c === resolution.target.id) ? playerTeamIds.findIndex(c => c === resolution.target.id)
: otherTeamIds.findIndex(c => c === resolution.target.id); : otherTeamIds.findIndex(c => c === resolution.target.id);
@ -68,6 +68,7 @@ function getObjects(resolution, stages, game, account) {
return { return {
animSource, animSource,
animTarget, animTarget,
animSkill: event.skill,
}; };
} }

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

@ -9,8 +9,8 @@ const shapes = require('./shapes');
const { removeTier } = require('../utils'); const { removeTier } = require('../utils');
const addState = connect( const addState = connect(
({ game, account, animTarget, animating, itemInfo }) => ({ game, account, animSkill, animating, itemInfo }) =>
({ game, account, animTarget, animating, itemInfo }) ({ game, account, animSkill, animating, itemInfo })
); );
class TargetSvg extends Component { class TargetSvg extends Component {
@ -28,15 +28,15 @@ class TargetSvg extends Component {
} }
render(props, state) { render(props, state) {
const { game, account, animating, animTarget, itemInfo } = props; const { game, account, animating, animSkill, itemInfo } = props;
const { width, height } = state; const { width, height } = state;
if (!game) return false; // game will be null when battle ends if (!game) return false; // game will be null when battle ends
// resolutions happening // resolutions happening
// just put skill name up // just put skill name up
if (animating) { if (animating) {
if (!animTarget) return false; if (!animSkill) return false;
const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animTarget.skill)); const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animSkill));
const itemSourceInfo = itemSource.length const itemSourceInfo = itemSource.length
? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}` ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
: false; : false;
@ -44,7 +44,7 @@ class TargetSvg extends Component {
const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]()); const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
return ( return (
<div class="resolving-skill"> <div class="resolving-skill">
<h1>{animTarget.skill}</h1> <h1>{animSkill}</h1>
<div> {itemSourceDescription} </div> <div> {itemSourceDescription} </div>
</div> </div>
); );

6
client/src/events.jsx
View File

@ -73,6 +73,7 @@ function registerEvents(store) {
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, game)));
if (anims.animSkill) store.dispatch(actions.setAnimSkill(anims.animSkill));
if (sequence.includes('START_SKILL') && anims.animSource) store.dispatch(actions.setAnimSource(anims.animSource)); if (sequence.includes('START_SKILL') && anims.animSource) store.dispatch(actions.setAnimSource(anims.animSource));
if (sequence.includes('END_SKILL') && anims.animTarget) { if (sequence.includes('END_SKILL') && anims.animTarget) {
@ -87,17 +88,18 @@ function registerEvents(store) {
); );
} }
return setTimeout(() => { return setTimeout(() => {
const animSkill = anims.animTarget ? removeTier(anims.animTarget.skill) : false; store.dispatch(actions.setAnimSkill(null));
store.dispatch(actions.setAnimSource(null)); store.dispatch(actions.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null)); store.dispatch(actions.setAnimTarget(null));
store.dispatch(actions.setAnimText(null)); store.dispatch(actions.setAnimText(null));
store.dispatch(actions.setAnimFocus([])); store.dispatch(actions.setAnimFocus([]));
if (!sequence.includes('END_SKILL') || (animSkill && ['Banish', 'Invert'].includes(animSkill))) return cb(); if (!sequence.includes('END_SKILL') || (anims.animSkill && ['Banish', 'Invert'].includes(anims.animSkill))) return cb();
return true; return true;
}, timeout); }, timeout);
}, err => { }, err => {
if (err) return console.error(err); if (err) return console.error(err);
// clear animation state // clear animation state
store.dispatch(actions.setAnimSkill(null));
store.dispatch(actions.setAnimSource(null)); store.dispatch(actions.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null)); store.dispatch(actions.setAnimTarget(null));
store.dispatch(actions.setAnimText(null)); store.dispatch(actions.setAnimText(null));

7
client/src/reducers.jsx
View File

@ -1,10 +1,8 @@
function createReducer(defaultState, actionType) { function createReducer(defaultState, actionType) {
return function reducer(state = defaultState, action) { return function reducer(state = defaultState, action) {
switch (action.type) { switch (action.type) {
case actionType: case actionType: return action.value;
return action.value; default: return state;
default:
return state;
} }
}; };
} }
@ -18,6 +16,7 @@ module.exports = {
animating: createReducer(false, 'SET_ANIMATING'), animating: createReducer(false, 'SET_ANIMATING'),
animCb: createReducer(null, 'SET_ANIM_CB'), animCb: createReducer(null, 'SET_ANIM_CB'),
animSkill: createReducer(null, 'SET_ANIM_SKILL'),
animSource: createReducer(null, 'SET_ANIM_SOURCE'), animSource: createReducer(null, 'SET_ANIM_SOURCE'),
animFocus: createReducer(null, 'SET_ANIM_FOCUS'), animFocus: createReducer(null, 'SET_ANIM_FOCUS'),
animTarget: createReducer(null, 'SET_ANIM_TARGET'), animTarget: createReducer(null, 'SET_ANIM_TARGET'),