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 ";
transition-property: all;
transition-duration: 0.5s;
transition-duration: 0.25s;
transition-delay: 0;
transition-timing-function: ease;
}
@ -310,3 +310,73 @@ CRYP DAMAGE
.resolving .skills button {
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>
));
const combatText = getCombatText(cryp, resolution);
const [combatText, combatClass] = getCombatText(cryp, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText
? <div className="combat-text">{combatText}</div>
? <div className={combatTextClass}>{combatText}</div>
: null;
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
? <div className="combat-text">{combatText}</div>
? <div className={combatTextClass}>{combatText}</div>
: null;
const effects = cryp.effects.length

62
client/src/utils.jsx
View File

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