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

clear dom anim classes with small delay between resolutions

Browse Source
This commit is contained in:
Mashy 2019-07-08 15:29:45 +10:00
parent 41eb476c31
commit 2acb4d276f
5 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,7 +59,7 @@ const { TIMES } = require('../constants');
function animations(props) { function animations(props) {
const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props; const { game, account, resolution, player, construct, avatarAnimation, setAvatarAnimation } = props;
if (!resolution) return false; if (!resolution || resolution === 'clear') return false;
const [, event] = resolution.event; const [, event] = resolution.event;
if (!event || !event.skill) return false; if (!event || !event.skill) return false;
if (!resolution.target) return false; if (!resolution.target) return false;

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

@ -55,7 +55,6 @@ class Strike extends Component {
<feGaussianBlur stdDeviation="4"/> <feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/> <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter> </filter>
{this.charges} {this.charges}
</svg> </svg>

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

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

7
client/src/events.jsx
View File

@ -71,7 +71,6 @@ function registerEvents(store) {
stagedR.sequence = sequence; stagedR.sequence = sequence;
stagedR.stages = stages; stagedR.stages = stages;
stagedR.id = id; stagedR.id = id;
let timeout = 0; let timeout = 0;
if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) { if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) {
timeout = TIMES.SOURCE_AND_TARGET_TOTAL_DURATION; timeout = TIMES.SOURCE_AND_TARGET_TOTAL_DURATION;
@ -83,8 +82,10 @@ function registerEvents(store) {
return setTimeout(sCb, timeout); return setTimeout(sCb, timeout);
}, err => { }, err => {
if (err) console.error(err); if (err) console.error(err);
// Finished this resolution // Clear the anim classes
return cb(); store.dispatch(actions.setResolution('clear'));
// Finished this resolution small delay for reset
return setTimeout(cb, 5);
}); });
}, err => { }, err => {
if (err) return console.error(err); if (err) return console.error(err);

4
client/src/utils.jsx
View File

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