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

wip fixed source cast

Browse Source
This commit is contained in:
Mashy 2019-07-08 13:46:43 +10:00
parent f24b5afd5c
commit 41eb476c31
8 changed files with 84 additions and 50 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);

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

@ -58,7 +58,7 @@ const colours = {
const { TIMES } = require('../constants');
function animations(props) {
const { game, account, resolution, player, construct } = props;
const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props;
if (!resolution) return false;
const [, event] = resolution.event;
if (!event || !event.skill) return false;
@ -90,15 +90,18 @@ 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 !== resolution.id) {
console.log(avatarAnimation);
setAvatarAnimation(resolution.id);
anime({
targets: [document.getElementById(construct.id)],
translateY: y * 200,
translateX: x * 200,
easing: 'easeInOutElastic',
direction: 'alternate',
duration: TIMES.SOURCE_DURATION_MS,
});
}
}
const targetTeam = targetIsPlayer ? playerTeamIds : otherTeamIds;
if (!((resolution.target.id === construct.id)
@ -116,7 +119,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 />;

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

@ -63,15 +63,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 +72,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 +95,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() {

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

@ -1,5 +1,6 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const anime = require('animejs').default;
@ -38,6 +39,13 @@ function clearAnimation(id) {
animations[id] = false;
}
const addState = connect(
function receiveState(state) {
const { avatarAnimation } = state;
return { avatarAnimation };
}
);
class ConstructAvatar extends Component {
render() {
return (
@ -53,6 +61,11 @@ class ConstructAvatar extends Component {
animateConstruct(this.props.id);
}
componentWillReceiveProps(nextProps) {
// console.log(this.props);
// console.log(nextProps);
}
componentWillUnmount() {
clearAnimation(this.props.id);
}
@ -81,6 +94,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

3
client/src/events.jsx
View File

@ -60,14 +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')) {

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