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

shitty animations

Browse Source
This commit is contained in:
ntr 2019-05-21 12:15:34 +10:00
parent c327dacf74
commit 36f260a811
4 changed files with 108 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,7 +68,7 @@
"stats stats "; "stats stats ";
transition-property: all; transition-property: all;
transition-duration: 0.5s; transition-duration: 0.25s;
transition-delay: 0; transition-delay: 0;
transition-timing-function: ease; transition-timing-function: ease;
} }
@ -310,3 +310,73 @@ CRYP DAMAGE
.resolving .skills button { .resolving .skills button {
display: none; display: none;
} }
/*
COMBAT ANIMATIONS
*/
/* ----------------------------------------------
* Generated by Animista on 2019-5-21 11:38:30
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
.attack-cast {
-webkit-animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes attack-cast {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-5em);
transform: translateY(-5em);
opacity: 0;
}
}
@keyframes attack-cast {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-5em);
transform: translateY(-5em);
opacity: 0;
}
}
.attack-hit {
-webkit-animation: attack-hit 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: attack-hit 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes attack-hit {
0% {
-webkit-transform: translateY(-1000px) translateX(1000px);
transform: translateY(-1000px) translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0) translateX(0);
transform: translateY(0) translateX(0);
opacity: 1;
}
}
@keyframes attack-hit {
0% {
-webkit-transform: translateY(-1000px) translateX(1000px);
transform: translateY(-1000px) translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0) translateX(0);
transform: translateY(0) translateX(0);
opacity: 1;
}
}

5
client/src/components/game.component.jsx
View File

@ -127,9 +127,10 @@ function GamePanel(props) {
</figure> </figure>
)); ));
const combatText = getCombatText(cryp, resolution); const [combatText, combatClass] = getCombatText(cryp, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText const combatTextEl = combatText
? <div className="combat-text">{combatText}</div> ? <div className={combatTextClass}>{combatText}</div>
: null; : null;
const effects = cryp.effects.length const effects = cryp.effects.length

5
client/src/components/game.cryp.jsx
View File

@ -66,9 +66,10 @@ function GameCryp(props) {
}); });
const combatText = getCombatText(cryp, resolution); const [combatText, combatClass] = getCombatText(cryp, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText const combatTextEl = combatText
? <div className="combat-text">{combatText}</div> ? <div className={combatTextClass}>{combatText}</div>
: null; : null;
const effects = cryp.effects.length const effects = cryp.effects.length

62
client/src/utils.jsx
View File

@ -280,7 +280,7 @@ function getCombatSequence(event) {
} }
function getCombatText(cryp, resolution) { function getCombatText(cryp, resolution) {
if (!resolution) return ''; if (!resolution) return ['', ''];
const [type, event] = resolution.event; const [type, event] = resolution.event;
@ -291,27 +291,27 @@ function getCombatText(cryp, resolution) {
const postSkill = resolution.stage === 'POST_SKILL'; const postSkill = resolution.stage === 'POST_SKILL';
if (type === 'Ko') { if (type === 'Ko') {
if (postSkill && target) return 'KO!'; if (postSkill && target) return ['KO!', ''];
} }
if (type === 'Disable') { if (type === 'Disable') {
const { skill, disable } = event; const { skill, disable } = event;
if (startSkill && source) return `${skill}`; if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return `${skill}`; if (endSkill && target) return [`${skill}`, ''];
if (postSkill && target) return `${disable}`; if (postSkill && target) return [`${disable}`, ''];
} }
if (type === 'Immunity') { if (type === 'Immunity') {
const { skill, immunity } = event; const { skill, immunity } = event;
if (startSkill && source) return `${skill}`; if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return `${skill}`; if (endSkill && target) return [`${skill}`, ''];
if (postSkill && target) return 'IMMUNE'; if (postSkill && target) return ['IMMUNE', ''];
} }
if (type === 'TargetKo') { if (type === 'TargetKo') {
const { skill } = event; const { skill } = event;
if (startSkill && source) return `${skill}`; if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return `${skill}`; if (endSkill && target) return [`${skill}`, ''];
} }
if (type === 'Damage') { if (type === 'Damage') {
@ -319,55 +319,55 @@ function getCombatText(cryp, resolution) {
const mitigationText = mitigation const mitigationText = mitigation
? `(${mitigation})` ? `(${mitigation})`
: ''; : '';
if (startSkill && source) return `${skill}`; if (startSkill && source) return [`${skill}`, `${skill.toLowerCase()}-cast`];
if (endSkill && target) return `${skill}`; if (endSkill && target) return [`${skill}`, `${skill.toLowerCase()}-hit`];
if (postSkill && target) return `${amount} ${mitigationText}`; if (postSkill && target) return [`${amount} ${mitigationText}`, ''];
} }
if (type === 'Healing') { if (type === 'Healing') {
const { skill, amount, overhealing } = event; const { skill, amount, overhealing } = event;
if (startSkill && source) return `${skill}`; if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return `${skill}`; if (endSkill && target) return [`${skill}`, ''];
if (postSkill && target) return `${amount} (${overhealing} OH)`; if (postSkill && target) return [`${amount} (${overhealing} OH)`, ''];
} }
if (type === 'Inversion') { if (type === 'Inversion') {
const { skill } = event; const { skill } = event;
if (startSkill && source) return `${skill}`; if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return `${skill}`; if (endSkill && target) return [`${skill}`, ''];
if (postSkill && target) return 'INVERT'; if (postSkill && target) return ['INVERT', ''];
} }
if (type === 'Reflection') { if (type === 'Reflection') {
const { skill } = event; const { skill } = event;
if (startSkill && source) return `${skill}`; if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return `${skill}`; if (endSkill && target) return [`${skill}`, ''];
if (postSkill && target) return 'REFLECT'; if (postSkill && target) return ['REFLECT', ''];
} }
if (type === 'Effect') { if (type === 'Effect') {
const { skill, effect, duration } = event; const { skill, effect, duration } = event;
if (startSkill && source) return `${skill}`; if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return `${skill}`; if (endSkill && target) return [`${skill}`, ''];
if (postSkill && target) return `+ ${effect} ${duration}T`; if (postSkill && target) return [`+ ${effect} ${duration}T`, ''];
} }
if (type === 'Recharge') { if (type === 'Recharge') {
const { skill, red, blue } = event; const { skill, red, blue } = event;
if (startSkill && source) return `${skill}`; if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return `${skill}`; if (endSkill && target) return [`${skill}`, ''];
if (postSkill && target) return `+${red}R ${blue}B`; if (postSkill && target) return [`+${red}R ${blue}B`, ''];
} }
if (type === 'Skill' || type === 'AoeSkill') { if (type === 'Skill' || type === 'AoeSkill') {
const { skill } = event; const { skill } = event;
if (startSkill && source) return `${skill}`; if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return `${skill}`; if (endSkill && target) return [`${skill}`, ''];
} }
if (type === 'Removal') { if (type === 'Removal') {
const { effect } = event; const { effect } = event;
if (postSkill && target) return `-${effect}`; if (postSkill && target) return [`-${effect}`, ''];
} }