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

animText -> resolution

Browse Source
This commit is contained in:
Mashy 2019-12-09 08:57:32 +10:00
parent 912b2c9059
commit 445a641b8d
9 changed files with 43 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/actions.jsx
View File

@ -1,12 +1,11 @@
export const setAccount = value => ({ type: 'SET_ACCOUNT', value }); export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
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 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 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 setResolution = value => ({ type: 'SET_RESOLUTION', value });
export const setDemo = value => ({ type: 'SET_DEMO', value }); export const setDemo = value => ({ type: 'SET_DEMO', value });

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

@ -51,10 +51,10 @@ function createSocket(store) {
if (r.stages.includes('POST_SKILL') && text) { if (r.stages.includes('POST_SKILL') && text) {
// timeout to prevent text classes from being added too soon // timeout to prevent text classes from being added too soon
if (timeout === TIMES.POST_SKILL_DURATION_MS) { if (timeout === TIMES.POST_SKILL_DURATION_MS) {
store.dispatch(actions.setAnimText(text)); store.dispatch(actions.setResolution(text));
} else { } else {
setTimeout( setTimeout(
() => store.dispatch(actions.setAnimText(text)), () => store.dispatch(actions.setResolution(text)),
timeout - TIMES.POST_SKILL_DURATION_MS timeout - TIMES.POST_SKILL_DURATION_MS
); );
} }
@ -64,7 +64,7 @@ function createSocket(store) {
store.dispatch(actions.setAnimSkill(null)); 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.setResolution(null));
store.dispatch(actions.setAnimFocus([])); store.dispatch(actions.setAnimFocus([]));
if (r.stages.includes('END_SKILL') && animations.isCbAnim(anims.animSkill)) return true; if (r.stages.includes('END_SKILL') && animations.isCbAnim(anims.animSkill)) return true;
return cb(); return cb();
@ -75,7 +75,7 @@ function createSocket(store) {
store.dispatch(actions.setAnimSkill(null)); 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.setResolution(null));
store.dispatch(actions.setAnimating(false)); store.dispatch(actions.setAnimating(false));
store.dispatch(actions.setGameEffectInfo(null)); store.dispatch(actions.setGameEffectInfo(null));

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

@ -7,7 +7,7 @@ function setAnimations(r, store, account) {
store.dispatch(actions.setAnimFocus(focus)); store.dispatch(actions.setAnimFocus(focus));
if (type === 'Cast') { if (type === 'Cast') {
store.dispatch(actions.setAnimText(null)); store.dispatch(actions.setResolution(null));
const { construct, player, direction: [x, y] } = variant; const { construct, player, direction: [x, y] } = variant;
const animY = y && player === account.id ? -1 : y; const animY = y && player === account.id ? -1 : y;
@ -22,7 +22,7 @@ function setAnimations(r, store, account) {
} }
if (type.includes('Hit')) { if (type.includes('Hit')) {
store.dispatch(actions.setAnimText(null)); store.dispatch(actions.setResolution(null));
const { construct, player, direction: [x, y] } = variant; const { construct, player, direction: [x, y] } = variant;
const animY = y && player === account.id ? -1 : y; const animY = y && player === account.id ? -1 : y;
@ -38,14 +38,14 @@ function setAnimations(r, store, account) {
return setTimeout(() => store.dispatch(actions.setAnimTarget(null)), TIMES.TARGET_DURATION_MS); return setTimeout(() => store.dispatch(actions.setAnimTarget(null)), TIMES.TARGET_DURATION_MS);
} }
return store.dispatch(actions.setAnimText(r)); return store.dispatch(actions.setResolution(r));
} }
function clearAnimations(store) { function clearAnimations(store) {
store.dispatch(actions.setAnimSkill(null)); 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.setResolution(null));
store.dispatch(actions.setAnimating(false)); store.dispatch(actions.setAnimating(false));
store.dispatch(actions.setGameEffectInfo(null)); store.dispatch(actions.setGameEffectInfo(null));
store.dispatch(actions.setAnimFocus(null)); store.dispatch(actions.setAnimFocus(null));

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

@ -13,8 +13,8 @@ const { ConstructAnimation } = require('./animations');
const addState = connect( const addState = connect(
function receiveState(state) { function receiveState(state) {
const { animSource, animTarget, animText } = state; const { animSource, animTarget, resolution } = state;
return { animSource, animTarget, animText }; return { animSource, animTarget, resolution };
} }
); );
@ -62,9 +62,9 @@ class ConstructAvatar extends Component {
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
const { animSource, animTarget, animText, construct } = this.props; const { animSource, animTarget, resolution, construct } = this.props;
// a different text object and text construct // a different text object and text construct
if (animText && animText !== prevProps.animText && animText.constructId === construct.id) { if (resolution && resolution !== prevProps.resolution && resolution.constructId === construct.id) {
return wiggle(construct.id, this.idle); return wiggle(construct.id, this.idle);
} }
@ -86,10 +86,10 @@ class ConstructAvatar extends Component {
shouldComponentUpdate(newProps) { shouldComponentUpdate(newProps) {
const { animSource, animTarget, animText, construct, mouseOver } = newProps; const { animSource, animTarget, resolution, construct, mouseOver } = newProps;
if (animSource !== this.props.animSource) return true; if (animSource !== this.props.animSource) return true;
if (animTarget !== this.props.animTarget) return true; if (animTarget !== this.props.animTarget) return true;
if (animText !== this.props.animText) return true; if (resolution !== this.props.resolution) return true;
if (construct !== this.props.construct) return true; if (construct !== this.props.construct) return true;
if (mouseOver !== this.props.mouseOver) return true; if (mouseOver !== this.props.mouseOver) return true;
return false; return false;

18
client/src/components/game.construct.anim.text.jsx
View File

@ -7,17 +7,17 @@ const shapes = require('./shapes');
const { removeTier } = require('../utils'); const { removeTier } = require('../utils');
const { TIMES } = require('./../constants'); const { TIMES } = require('./../constants');
const addState = connect(({ animText, itemInfo }) => ({ animText, itemInfo })); const addState = connect(({ resolution, itemInfo }) => ({ resolution, itemInfo }));
class AnimText extends preact.Component { class AnimText extends preact.Component {
shouldComponentUpdate(newProps) { shouldComponentUpdate(newProps) {
if (newProps.animText !== this.props.animText) return true; if (newProps.resolution !== this.props.resolution) return true;
return false; return false;
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
const { animText, construct } = this.props; const { resolution, construct } = this.props;
if (animText && animText !== prevProps.animText && animText.event[1].construct === construct.id) { if (resolution && resolution !== prevProps.resolution && resolution.event[1].construct === construct.id) {
anime({ anime({
targets: '.combat-text', targets: '.combat-text',
top: '40%', top: '40%',
@ -28,10 +28,10 @@ class AnimText extends preact.Component {
} }
render() { render() {
const { construct, animText, itemInfo } = this.props; const { construct, resolution, itemInfo } = this.props;
if (animText && animText.event[1].construct === construct.id) { if (resolution && resolution.event[1].construct === construct.id) {
const itemSourceDescription = () => { const itemSourceDescription = () => {
const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animText.skill)); const itemSource = itemInfo.combos.filter(c => c.item === removeTier(resolution.skill));
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;
@ -40,7 +40,7 @@ class AnimText extends preact.Component {
}; };
const generateAnimText = () => { const generateAnimText = () => {
const [type, event] = animText.event; const [type, event] = resolution.event;
if (type === 'Ko') return <h1><span>KO!</span></h1>; if (type === 'Ko') return <h1><span>KO!</span></h1>;
if (type === 'Disable') { if (type === 'Disable') {
const { disable } = event; const { disable } = event;
@ -82,7 +82,7 @@ class AnimText extends preact.Component {
return ( return (
<div class="combat-text"> <div class="combat-text">
<h2><span>{animText.skill}</span></h2> <h2><span>{resolution.skill}</span></h2>
<span>{itemSourceDescription()}</span> <span>{itemSourceDescription()}</span>
{generateAnimText()} {generateAnimText()}
</div> </div>

10
client/src/components/game.construct.effect.box.jsx
View File

@ -7,7 +7,7 @@ const shapes = require('./shapes');
const { INFO } = require('./../constants'); const { INFO } = require('./../constants');
const addState = connect( const addState = connect(
({ animText, itemInfo, gameSkillInfo }) => ({ animText, itemInfo, gameSkillInfo }), ({ resolution, itemInfo, gameSkillInfo }) => ({ resolution, itemInfo, gameSkillInfo }),
function receiveDispatch(dispatch) { function receiveDispatch(dispatch) {
function setGameEffectInfo(info) { function setGameEffectInfo(info) {
@ -21,8 +21,8 @@ const addState = connect(
class GameConstructEffects extends preact.Component { class GameConstructEffects extends preact.Component {
shouldComponentUpdate(newProps) { shouldComponentUpdate(newProps) {
if (newProps.animText && newProps.animText !== this.props.animText) { if (newProps.resolution && newProps.resolution !== this.props.resolution) {
const [type, info] = newProps.animText.event; const [type, info] = newProps.resolution.event;
if (info.construct === this.props.construct.id if (info.construct === this.props.construct.id
&& (type === 'Effect' || type === 'Removal')) return true; && (type === 'Effect' || type === 'Removal')) return true;
} }
@ -32,7 +32,7 @@ class GameConstructEffects extends preact.Component {
render() { render() {
const { const {
animText, resolution,
construct, construct,
gameSkillInfo, gameSkillInfo,
setGameEffectInfo, setGameEffectInfo,
@ -56,7 +56,7 @@ class GameConstructEffects extends preact.Component {
</div>); </div>);
} }
const effects = animText ? animText.event[1].display.effects : construct.effects; const effects = resolution ? resolution.event[1].display.effects : construct.effects;
const renderEffects = effects.length const renderEffects = effects.length
? effects.map(c => ? effects.map(c =>

10
client/src/components/game.construct.jsx
View File

@ -17,7 +17,7 @@ const addState = connect(
activeSkill, activeSkill,
animFocus, animFocus,
animText, resolution,
} = state; } = state;
function selectSkillTarget(targetConstructId) { function selectSkillTarget(targetConstructId) {
@ -30,7 +30,7 @@ const addState = connect(
return { return {
activeSkill, activeSkill,
animFocus, animFocus,
animText, resolution,
selectSkillTarget, selectSkillTarget,
}; };
} }
@ -40,7 +40,7 @@ class GameConstruct extends preact.Component {
shouldComponentUpdate(newProps) { shouldComponentUpdate(newProps) {
if (newProps.activeSkill !== this.props.activeSkill) return true; if (newProps.activeSkill !== this.props.activeSkill) return true;
if (newProps.animFocus !== this.props.animFocus) return true; if (newProps.animFocus !== this.props.animFocus) return true;
if (newProps.animText !== this.props.animText) return true; if (newProps.resolution !== this.props.resolution) return true;
if (newProps.construct !== this.props.construct) return true; if (newProps.construct !== this.props.construct) return true;
return false; return false;
} }
@ -50,13 +50,13 @@ class GameConstruct extends preact.Component {
// Changing state variables // Changing state variables
activeSkill, activeSkill,
animFocus, animFocus,
animText, resolution,
selectSkillTarget, selectSkillTarget,
construct, construct,
player, player,
} = this.props; } = this.props;
const koEvent = animText && animText.text === 'KO!' && animText.constructId === construct.id; const koEvent = resolution && resolution.text === 'KO!' && resolution.constructId === construct.id;
const ko = construct.green_life.value === 0 && !koEvent ? 'ko' : ''; const ko = construct.green_life.value === 0 && !koEvent ? 'ko' : '';
const cssClass = () => { const cssClass = () => {

12
client/src/components/game.construct.life.jsx
View File

@ -3,12 +3,12 @@ const { connect } = require('preact-redux');
const shapes = require('./shapes'); const shapes = require('./shapes');
const addState = connect(({ animText }) => ({ animText })); const addState = connect(({ resolution }) => ({ resolution }));
class GameConstructLife extends preact.Component { class GameConstructLife extends preact.Component {
shouldComponentUpdate(newProps) { shouldComponentUpdate(newProps) {
if (newProps.animText && newProps.animText !== this.props.animText) { if (newProps.resolution && newProps.resolution !== this.props.resolution) {
const [type, info] = newProps.animText.event; const [type, info] = newProps.resolution.event;
if (info.construct === this.props.construct.id if (info.construct === this.props.construct.id
&& (type === 'Damage' || type === 'Healing' || type === 'Recharge')) return true; && (type === 'Damage' || type === 'Healing' || type === 'Recharge')) return true;
} }
@ -17,7 +17,7 @@ class GameConstructLife extends preact.Component {
} }
render() { render() {
const { construct, animText } = this.props; const { construct, resolution } = this.props;
const lifeBars = (redLife, greenLife, blueLife) => { const lifeBars = (redLife, greenLife, blueLife) => {
return ( return (
<div class="stats"> <div class="stats">
@ -37,8 +37,8 @@ class GameConstructLife extends preact.Component {
); );
}; };
if (animText) { if (resolution) {
const { red, blue, green } = animText.event[1].display; const { red, blue, green } = resolution.event[1].display;
return lifeBars(red, green, blue); return lifeBars(red, green, blue);
} }

4
client/src/reducers.jsx
View File

@ -14,12 +14,12 @@ module.exports = {
activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'), activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'),
animating: createReducer(false, 'SET_ANIMATING'), animating: createReducer(false, 'SET_ANIMATING'),
animCb: createReducer(null, 'SET_ANIM_CB'),
animSkill: createReducer(null, 'SET_ANIM_SKILL'), 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'),
animText: createReducer(null, 'SET_ANIM_TEXT'),
resolution: createReducer(null, 'SET_RESOLUTION'),
demo: createReducer(null, 'SET_DEMO'), demo: createReducer(null, 'SET_DEMO'),