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

move skill into combat text

Browse Source
This commit is contained in:
Mashy 2019-11-28 12:01:05 +10:00
parent d1dd2b30b6
commit 5e1b63108c
6 changed files with 60 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/assets/styles/game.less
View File

@ -40,7 +40,7 @@
.combat-text {
left: 15%;
top: 60%;
top: 40%;
}
}
@ -158,6 +158,11 @@
.combat-text {
position: absolute;
z-index: 10;
svg {
display: inline;
height: 1em;
margin-right: 0.1em
}
span {
background-color: black;
}
@ -214,7 +219,7 @@
}
&.ko-transition {
animation: target-ko 1s ease-in-out 0s 1;
animation: target-ko 1.1s ease-in-out 0s 1;
}
&.ko {

16
client/src/animations.utils.jsx
View File

@ -128,11 +128,11 @@ function getText(resolution) {
let { amount } = event;
let css = '';
if (colour === 'Green') {
css = 'green-damage';
css = 'green';
amount *= -1;
}
if (colour === 'Red') css = 'red-damage';
if (colour === 'Blue') css = 'blue-damage';
if (colour === 'Red') css = 'red';
if (colour === 'Blue') css = 'blue';
const mitigationText = mitigation
? `(${mitigation})`
@ -142,7 +142,7 @@ function getText(resolution) {
if (type === 'Healing') {
const { amount, overhealing } = event;
return { text: `${amount} (${overhealing} OH)`, css: 'green-damage' };
return { text: `${amount} (${overhealing} OH)`, css: 'green' };
}
if (type === 'Inversion') {
@ -160,9 +160,9 @@ function getText(resolution) {
if (type === 'Recharge') {
const { red, blue } = event;
if (red > 0 && blue > 0) return { text: [`+${red}R +${blue}B`, ''], css: 'rb-damage' };
if (red > 0) return { text: [`+${red}R`, ''], css: 'red-damage' };
if (blue > 0) return { text: [`+${blue}B`, ''], css: 'blue-damage' };
if (red > 0 && blue > 0) return { text: [`+${red}R +${blue}B`, ''], css: 'rb' };
if (red > 0) return { text: [`+${red}R`, ''], css: 'red' };
if (blue > 0) return { text: [`+${blue}B`, ''], css: 'blue' };
return nullText;
}
@ -178,12 +178,14 @@ function getText(resolution) {
const { green, red, blue } = resolution.target;
const { text, css, effects } = generatePostSkill();
const skill = resolution.event[1] ? resolution.event[1].skill : null;
return {
css,
text,
effects,
life: { green, red, blue },
constructId: resolution.target.id,
skill,
};
}

19
client/src/components/anims/slay.jsx
View File

@ -4,9 +4,6 @@ const anime = require('animejs').default;
const { connect } = require('preact-redux');
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.TARGET_DURATION_MS;
const addState = connect(
function receiveState(state) {
@ -95,17 +92,17 @@ class Slay extends Component {
this.animations.push(anime({
targets: '#slay',
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{
value: 0,
delay: TIMES.TARGET_DURATION_MS * 0.7 + TIMES.POST_SKILL_DURATION_MS * 0.8,
duration: TIMES.POST_SKILL_DURATION_MS * 0.2,
delay: TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS * 0.2,
duration: TIMES.POST_SKILL_DURATION_MS * 0.3,
}],
translateY: 0,
translateX: 0,
loop: false,
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2),
duration: (TIMES.TARGET_DURATION_MS * 0.5),
easing: 'easeInQuad',
}));
@ -113,15 +110,15 @@ class Slay extends Component {
targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
baseFrequency: 10,
scale: 100,
delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
duration: (duration * 1 / 2),
delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.5),
duration: (TIMES.TARGET_DURATION_MS * 0.5),
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: '#sword',
opacity: 0,
delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS),
}));
const projectiles = document.querySelectorAll('#slay circle');
@ -130,7 +127,7 @@ class Slay extends Component {
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 200 - 100,
delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS * 0.2),
duration: (TIMES.POST_SKILL_DURATION_MS * 0.3),
easing: 'easeInQuad',
}));

48
client/src/components/game.construct.jsx
View File

@ -4,7 +4,7 @@ const preact = require('preact');
const range = require('lodash/range');
const reactStringReplace = require('react-string-replace');
const { STATS } = require('../utils');
const { STATS, removeTier } = require('../utils');
const { ConstructAvatar, ConstructText } = require('./construct');
const shapes = require('./shapes');
const { INFO } = require('./../constants');
@ -12,19 +12,38 @@ const actions = require('../actions');
const SkillBtn = require('./skill.btn');
const addStateText = connect(
function receiveState(state) {
const { animText } = state;
return { animText };
}
);
const addStateText = connect(({ animText, itemInfo }) => ({ animText, itemInfo }));
function combatText(props) {
const { construct, animText } = props;
const text = animText && animText.constructId === construct.id
? <h1 class="combat-text"><span>{animText.text}</span></h1>
: null;
return text;
class combatText extends preact.Component {
shouldComponentUpdate(newProps) {
if (newProps.animText !== this.props.animText) return true;
return false;
}
render(props) {
const { construct, animText, itemInfo } = props;
if (animText && animText.constructId === construct.id) {
const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animText.skill));
const itemSourceInfo = itemSource.length
? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
: false;
const itemRegEx = /(Red|Blue|Green)/;
const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
return (
<div class="combat-text">
<h2>
<span>{animText.skill}</span>
</h2>
<span>{itemSourceDescription}</span>
<h1 class={animText.css}>
<span>{animText.text}</span>
</h1>
</div>
);
}
return null;
}
}
const ConstructAnimationText = addStateText(combatText);
@ -137,6 +156,7 @@ class GameConstruct extends Component {
const koEvent = animText ? animText.text === 'KO!' && animText.constructId === construct.id : false;
const ko = construct.green_life.value === 0 && !koEvent ? 'ko' : '';
const classes = eventClasses(animating, animFocus, construct, animText);
const cssClass = ['ko-transition', 'unfocus'].includes(classes) ? classes : null;
const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
<div key={j} alt={STATS[s].stat}>
@ -187,7 +207,7 @@ class GameConstruct extends Component {
setTutorialGameClear(activeSkill, tutorialGame);
}}
style={ activeSkill ? { cursor: 'pointer' } : {}}
class={`game-construct ${ko} ${classes}`} >
class={`game-construct ${ko} ${cssClass}`}>
<div class="left">
{crypSkills}
{effectBox()}

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

@ -81,21 +81,7 @@ class TargetSvg extends Component {
// resolutions happening
// just put skill name up
if (animating) {
if (!animSkill) return false;
const itemSource = itemInfo.combos.filter(c => c.item === removeTier(animSkill));
const itemSourceInfo = itemSource.length
? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
: false;
const itemRegEx = /(Red|Blue|Green)/;
const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
return (
<div class="resolving-skill">
<h1>{animSkill}</h1>
<div>{itemSourceDescription}</div>
</div>
);
}
if (animating) return false;
const playerTeam = game.players.find(t => t.id === account.id);
const otherTeam = game.players.find(t => t.id !== account.id);

2
client/src/constants.jsx
View File

@ -3,7 +3,7 @@ const preact = require('preact');
const SOURCE_DURATION_MS = 1000; // Time for SOURCE ONLY
const TARGET_DELAY_MS = 500; // Used for Source + Target
const TARGET_DURATION_MS = 1500; // Time for TARGET ONLY
const POST_SKILL_DURATION_MS = 1000; // Time for all POST
const POST_SKILL_DURATION_MS = 1100; // Time for all POST
const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS; // SOURCE + TARGET time
module.exports = {