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

messing with anims full Pepega

Browse Source
This commit is contained in:
Mashy 2019-06-14 00:10:51 +10:00
parent 23083dc0f5
commit b0faf0c33b
5 changed files with 37 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/assets/styles/game.css
View File

@ -29,8 +29,7 @@
} }
.opponent .combat-text { .opponent .combat-text {
left: 40%; top: 40%;
top: 65%;
} }
.opponent .game-construct { .opponent .game-construct {
@ -204,8 +203,12 @@
font-size: 2em; font-size: 2em;
font-family: 'Jura'; font-family: 'Jura';
position: absolute; position: absolute;
top: 40%; object-fit: contain;
left: 40%; top: 15%;
}
.combat-text svg {
height: 7em;
} }
.game-construct.active-skill { .game-construct.active-skill {

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

@ -5,14 +5,20 @@ const Attack = require('./anims/attack');
function animations(props) { function animations(props) {
const { combatTextClass, combatText, stage, player, construct } = props; const { combatTextClass, combatText, stage, player, construct } = props;
if (combatText === 'Attack') { const anim = text => {
return ( switch (text) {
<div class={combatTextClass}> case 'Attack': return <Attack id={construct.id} stage={stage} team={player}/>;
<Attack id={construct.id} stage={stage} team={player}/> default: return text;
</div> }
); };
if (combatText) {
const combatAnim = anim(combatText);
return <div class={combatTextClass}>
{combatAnim}
</div>;
} }
if (combatText) return <div construct={construct} class={combatTextClass}>{combatText}</div>;
return (<div>&nbsp;</div>); return (<div>&nbsp;</div>);
} }

28
client/src/components/anims/attack.jsx
View File

@ -10,22 +10,24 @@ class Attack extends Component {
constructor(props) { constructor(props) {
super(); super();
this.props = props; this.props = props;
this.graphic = (
<g>
<polygon class='blue' points={'0,0 100,50 300,400'}/>
<polygon class='blue' points={'40,170 100,50 160,170'}/>
<polygon class='blue' points={'70,150 100,50 130,150'}/>
</g>
);
} }
render() { render() {
return ( return (
<svg <svg
id={this.props.id} class={`attack-anim-${this.props.id}`}
class={`attack-anim skill-animation ${this.props.stage}`}
version="1.1" version="1.1"
id="Layer_1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300"> viewBox="0 0 300 400">
<g> ${this.graphic}
<polygon class='blue' points={'0,190 100,50 190,190'}/>
<polygon class='blue' points={'40,170 100,50 160,170'}/>
<polygon class='blue' points={'70,150 100,50 130,150'}/>
</g>
</svg> </svg>
); );
} }
@ -35,22 +37,20 @@ class Attack extends Component {
if ((!this.props.team && this.props.stage === 'START_SKILL') if ((!this.props.team && this.props.stage === 'START_SKILL')
|| (this.props.team && this.props.stage === 'END_SKILL')) { || (this.props.team && this.props.stage === 'END_SKILL')) {
anime.set('.attack-anim', { anime.set('.attack-anim', {
translateY: -250, rotateX: 0,
rotateX: 180,
}); });
value = '+=250px'; value = '+=250px',
} }
if ((!this.props.team && this.props.stage === 'END_SKILL') if ((!this.props.team && this.props.stage === 'END_SKILL')
|| (this.props.team && this.props.stage === 'START_SKILL')) { || (this.props.team && this.props.stage === 'START_SKILL')) {
anime.set('.attack-anim', { anime.set('.attack-anim', {
translateY: 0,
rotateX: 0, rotateX: 0,
}); });
value = '-=250px'; value = '-=250px',
} }
anime({ anime({
targets: ['.attack-anim'], targets: [`.attack-anim-${this.props.id} polygon`],
translateY: { translateY: {
value, value,
duration, duration,

1
client/src/constants.jsx
View File

@ -3,6 +3,7 @@ module.exports = {
START_SKILL: 700, START_SKILL: 700,
END_SKILL: 700, END_SKILL: 700,
POST_SKILL: 1000, POST_SKILL: 1000,
DELAY: 150,
}, },
INFO: { INFO: {

4
client/src/utils.jsx
View File

@ -204,14 +204,14 @@ function getCombatSequence(resolution) {
if (resolution.event[0] === 'Ko') return ['POST_SKILL']; if (resolution.event[0] === 'Ko') return ['POST_SKILL'];
switch (resolution.stages) { switch (resolution.stages) {
case 1: return ['START_SKILL', 'END_SKILL']; case 1: return ['START_SKILL', 'DELAY', 'END_SKILL'];
case 2: return ['START_SKILL', 'POST_SKILL']; case 2: return ['START_SKILL', 'POST_SKILL'];
case 3: return ['START_SKILL']; case 3: return ['START_SKILL'];
case 4: return ['END_SKILL', 'POST_SKILL']; case 4: return ['END_SKILL', 'POST_SKILL'];
case 5: return ['END_SKILL']; case 5: return ['END_SKILL'];
case 6: return ['POST_SKILL']; case 6: return ['POST_SKILL'];
case 7: return false; case 7: return false;
default: return ['START_SKILL', 'END_SKILL', 'POST_SKILL']; default: return ['START_SKILL', 'DELAY', 'END_SKILL', 'POST_SKILL'];
} }
} }