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

Merge branch 'anims-change' into develop

Browse Source
This commit is contained in:
ntr 2019-07-09 13:04:32 +10:00
commit 2c0c8cc28b
10 changed files with 124 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
client/src/actions.jsx
View File

@ -1,26 +1,27 @@
export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
export const setConstructDeleteId = value => ({ type: 'SET_CONSTRUCT_DELETE_ID', value });
export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
export const setSkip = value => ({ type: 'SET_SKIP', value });
export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
export const setInstances = value => ({ type: 'SET_INSTANCES', value });
export const setNav = value => ({ type: 'SET_NAV', value });
export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
export const setInstance = value => ({ type: 'SET_INSTANCE', value });
export const setInstanceList = value => ({ type: 'SET_INSTANCE_LIST', value });
export const setPing = value => ({ type: 'SET_PING', value });
export const setPlayer = value => ({ type: 'SET_PLAYER', value });
export const setGame = value => ({ type: 'SET_GAME', value });
export const setResolution = value => ({ type: 'SET_RESOLUTION', value });
export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });
export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', value });
export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });
export const setAvatarAnimation = value => ({ type: 'SET_AVATAR_ANIMATION', value });
export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
export const setConstructDeleteId = value => ({ type: 'SET_CONSTRUCT_DELETE_ID', value });
export const setGame = value => ({ type: 'SET_GAME', value });
export const setInfo = value => ({ type: 'SET_INFO', value });
export const setInstance = value => ({ type: 'SET_INSTANCE', value });
export const setInstanceList = value => ({ type: 'SET_INSTANCE_LIST', value });
export const setInstances = value => ({ type: 'SET_INSTANCES', value });
export const setItemEquip = value => ({ type: 'SET_ITEM_EQUIP', value });
export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
export const setItemUnequip = value => ({ type: 'SET_ITEM_UNEQUIP', value });
export const setNav = value => ({ type: 'SET_NAV', value });
export const setPing = value => ({ type: 'SET_PING', value });
export const setPlayer = value => ({ type: 'SET_PLAYER', value });
export const setReclaiming = value => ({ type: 'SET_RECLAIMING', value });
export const setResolution = value => ({ type: 'SET_RESOLUTION', value });
export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
export const setSkip = value => ({ type: 'SET_SKIP', value });
export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
export const setWs = value => ({ type: 'SET_WS', value });

2
client/src/app.jsx
View File

@ -20,7 +20,7 @@ const store = createStore(
document.fonts.load('16pt "Jura"').then(() => {
const events = registerEvents(store);
store.subscribe(() => console.log(store.getState()));
// store.subscribe(() => console.log(store.getState()));
setupKeys(store);
const ws = createSocket(events);

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

@ -58,8 +58,8 @@ const colours = {
const { TIMES } = require('../constants');
function animations(props) {
const { game, account, resolution, player, construct } = props;
if (!resolution) return false;
const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props;
if (!resolution || resolution === 'clear') return false;
const [, event] = resolution.event;
if (!event || !event.skill) return false;
if (!resolution.target) return false;
@ -90,15 +90,9 @@ function animations(props) {
: otherTeamIds.findIndex(c => c === resolution.target.id);
const x = j - i;
anime({
targets: [document.getElementById(construct.id)],
translateY: y * 200,
translateX: x * 200,
easing: 'easeInOutElastic',
direction: 'alternate',
duration: TIMES.SOURCE_DURATION_MS,
});
if (avatarAnimation.id !== resolution.id) {
setAvatarAnimation({ id: resolution.id, animTargetId: construct.id, x, y });
}
}
const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
if (!((resolution.target.id === construct.id)
@ -116,7 +110,7 @@ function animations(props) {
case 'Blast': return <Blast />;
case 'Siphon': return <Siphon />;
case 'SiphonTick': return <SiphonTick />;
case 'Strike': return <Strike colour={colours.red}/>;
case 'Strike': return <Strike colour={colours.red} id={resolution.id}/>;
case 'Chaos': return <Chaos />;
case 'Slay': return <Slay />;
case 'Heal': return <Heal />;

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

@ -55,7 +55,6 @@ class Strike extends Component {
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
</svg>
@ -63,15 +62,6 @@ class Strike extends Component {
}
componentDidMount() {
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',
}));
if (!this.props.team) {
anime.set('#strike', {
rotate: Math.random() * 180 + 90,
@ -81,15 +71,22 @@ class Strike extends Component {
rotate: Math.random() * 180 + 270,
});
}
anime.set('#strike', {
translateY: -200,
translateX: 0,
});
anime.set('#strikeFilter feDisplacementMap', {
scale: 1,
});
anime({
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',
}));
this.animations.push(anime({
targets: '#strike',
translateY: 0,
translateX: 0,
@ -97,14 +94,14 @@ class Strike extends Component {
delay: TIMES.TARGET_DELAY_MS,
duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
easing: 'easeInQuad',
});
anime({
}));
this.animations.push(anime({
targets: '#strikeFilter feDisplacementMap',
scale: 200,
loop: false,
delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 1 / 4),
easing: 'easeInQuad',
});
}));
}
componentWillUnmount() {

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

@ -1,8 +1,10 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
const { TIMES } = require('../constants');
const genAvatar = name => {
let hash = 0;
if (name.length === 0) return hash;
@ -38,7 +40,20 @@ function clearAnimation(id) {
animations[id] = false;
}
const addState = connect(
function receiveState(state) {
const { avatarAnimation } = state;
return { avatarAnimation };
}
);
class ConstructAvatar extends Component {
constructor() {
super();
this.animId = 0;
this.animations = [];
}
render() {
return (
<div
@ -50,7 +65,25 @@ class ConstructAvatar extends Component {
}
componentDidMount() {
animateConstruct(this.props.id);
this.idle = animateConstruct(this.props.id);
}
componentWillReceiveProps(nextProps) {
if (nextProps.avatarAnimation.id !== this.animId && nextProps.avatarAnimation.animTargetId === this.props.id) {
this.animId = nextProps.avatarAnimation.id;
this.idle.pause();
const anim = anime({
targets: [document.getElementById(this.props.id)],
translateY: nextProps.avatarAnimation.y * 200,
translateX: nextProps.avatarAnimation.x * 200,
easing: 'easeInOutElastic',
direction: 'alternate',
duration: TIMES.SOURCE_DURATION_MS,
});
anim.finished.then(this.idle.play);
}
// console.log(this.props);
// console.log(nextProps);
}
componentWillUnmount() {
@ -81,6 +114,6 @@ class ConstructImg extends Component {
}
module.exports = {
ConstructAvatar,
ConstructAvatar: addState(ConstructAvatar),
ConstructImg,
};

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

@ -10,6 +10,9 @@ const shapes = require('./shapes');
const SkillBtn = require('./skill.btn');
const actions = require('../actions');
const addState = connect(
function receiveState(state) {
const {
@ -18,6 +21,7 @@ const addState = connect(
account,
resolution,
activeSkill,
avatarAnimation,
} = state;
function selectSkillTarget(targetConstructId) {
@ -31,15 +35,26 @@ const addState = connect(
if (activeSkill && activeSkill.skill.self_targeting) {
ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
}
return {
game,
account,
resolution,
activeSkill,
avatarAnimation,
selectSkillTarget,
};
},
function receiveDispatch(dispatch) {
function setAvatarAnimation(c) {
return dispatch(actions.setAvatarAnimation(c));
}
return {
setAvatarAnimation,
};
}
);
@ -52,7 +67,8 @@ function GameConstruct(props) {
player,
resolution,
activeSkill,
setActiveConstruct,
avatarAnimation,
setAvatarAnimation,
selectSkillTarget,
} = props;
@ -77,8 +93,7 @@ function GameConstruct(props) {
const effects = construct.effects.length
? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
: <div>&nbsp;</div>;
const combatAnim = animations({ game, account, resolution, player, construct });
const combatAnim = animations({ game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation });
const combatText = getCombatText(resolution, construct);
return (
<div

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

@ -81,23 +81,29 @@ class TargetSvg extends Component {
return <path d={path} />;
}
const arrows = resolution
? null
: outgoing.map(getPath);
if (resolution === 'clear') return false;
if (!resolution) {
return (
<svg id="targeting"
viewBox={`0 0 ${width} ${height}`}
preserveAspectRatio="none"
class="targeting-arrows">
{outgoing.map(getPath)}
</svg>
);
}
let skill = '';
if (resolution) {
if (resolution.event[1]) ([, { skill }] = resolution.event);
}
const resolutionText = resolution
? <text x={`${(width / 2) - 50}`} y={`${(height / 2) + 16}`} font-family="Jura" font-size="2em"> {skill} </text>
: null;
return (
<svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" class="targeting-arrows">
{arrows}
{resolutionText}
<text
x={`${(width / 2) - 50}`}
y={`${(height / 2) + 16}`}
font-family="Jura"
font-size="2em">
{skill}
</text>
</svg>
);
}

11
client/src/events.jsx
View File

@ -60,15 +60,17 @@ function registerEvents(store) {
// stop fetching the game state til animations are done
ws.clearGameStateTimeout();
const newRes = game.resolved.slice(currentGame.resolved.length);
let id = game.resolved.length - currentGame.resolved.length;
return eachSeries(newRes, (r, cb) => {
if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
// Create sub events for combat animations
const sequence = getCombatSequence(r);
id += 1;
return eachSeries(sequence, (stages, sCb) => {
const stagedR = Object.create(r);
stagedR.sequence = sequence;
stagedR.stages = stages;
stagedR.id = id;
let timeout = 0;
if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) {
timeout = TIMES.SOURCE_AND_TARGET_TOTAL_DURATION;
@ -80,11 +82,14 @@ function registerEvents(store) {
return setTimeout(sCb, timeout);
}, err => {
if (err) console.error(err);
// Finished this resolution
return cb();
// Clear the anim classes
store.dispatch(actions.setResolution('clear'));
// Finished this resolution small delay for reset
return setTimeout(cb, 5);
});
}, err => {
if (err) return console.error(err);
store.dispatch(actions.setAvatarAnimation({ id: -1 }));
store.dispatch(actions.setResolution(null));
// stop skipping resolutions
store.dispatch(actions.setSkip(false));

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'),
avatarAnimation: createReducer({ id: -1 }, 'SET_AVATAR_ANIMATION'),
combiner: createReducer([null, null, null], 'SET_COMBINER'),
constructs: createReducer([], 'SET_CONSTRUCTS'),
constructDeleteId: createReducer(null, 'SET_CONSTRUCT_DELETE_ID'),

4
client/src/utils.jsx
View File

@ -74,7 +74,7 @@ const STATS = {
};
function eventClasses(game, account, resolution, construct) {
if (!resolution) return '';
if (!resolution || resolution === 'clear') return '';
const postSkill = resolution.stages.includes('POST_SKILL');
const source = construct.id === resolution.source.id;
const target = construct.id === resolution.target.id;
@ -176,7 +176,7 @@ function getCombatSequence(resolution) {
}
function getCombatText(resolution, construct) {
if (!resolution) return false;
if (!resolution || resolution === 'clear') return false;
if (!resolution.stages.includes('POST_SKILL')) return false;
if (construct.id !== resolution.target.id) return false;