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

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

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

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

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

1
client/src/constants.jsx
View File

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

4
client/src/utils.jsx
View File

@ -204,14 +204,14 @@ function getCombatSequence(resolution) {
if (resolution.event[0] === 'Ko') return ['POST_SKILL'];
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 3: return ['START_SKILL'];
case 4: return ['END_SKILL', 'POST_SKILL'];
case 5: return ['END_SKILL'];
case 6: return ['POST_SKILL'];
case 7: return false;
default: return ['START_SKILL', 'END_SKILL', 'POST_SKILL'];
default: return ['START_SKILL', 'DELAY', 'END_SKILL', 'POST_SKILL'];
}
}