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

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

@ -128,11 +128,11 @@ function getText(resolution) {
let { amount } = event; let { amount } = event;
let css = ''; let css = '';
if (colour === 'Green') { if (colour === 'Green') {
css = 'green-damage'; css = 'green';
amount *= -1; amount *= -1;
} }
if (colour === 'Red') css = 'red-damage'; if (colour === 'Red') css = 'red';
if (colour === 'Blue') css = 'blue-damage'; if (colour === 'Blue') css = 'blue';
const mitigationText = mitigation const mitigationText = mitigation
? `(${mitigation})` ? `(${mitigation})`
@ -142,7 +142,7 @@ function getText(resolution) {
if (type === 'Healing') { if (type === 'Healing') {
const { amount, overhealing } = event; const { amount, overhealing } = event;
return { text: `${amount} (${overhealing} OH)`, css: 'green-damage' }; return { text: `${amount} (${overhealing} OH)`, css: 'green' };
} }
if (type === 'Inversion') { if (type === 'Inversion') {
@ -160,9 +160,9 @@ function getText(resolution) {
if (type === 'Recharge') { if (type === 'Recharge') {
const { red, blue } = event; const { red, blue } = event;
if (red > 0 && blue > 0) return { text: [`+${red}R +${blue}B`, ''], css: 'rb-damage' }; if (red > 0 && blue > 0) return { text: [`+${red}R +${blue}B`, ''], css: 'rb' };
if (red > 0) return { text: [`+${red}R`, ''], css: 'red-damage' }; if (red > 0) return { text: [`+${red}R`, ''], css: 'red' };
if (blue > 0) return { text: [`+${blue}B`, ''], css: 'blue-damage' }; if (blue > 0) return { text: [`+${blue}B`, ''], css: 'blue' };
return nullText; return nullText;
} }
@ -178,12 +178,14 @@ function getText(resolution) {
const { green, red, blue } = resolution.target; const { green, red, blue } = resolution.target;
const { text, css, effects } = generatePostSkill(); const { text, css, effects } = generatePostSkill();
const skill = resolution.event[1] ? resolution.event[1].skill : null;
return { return {
css, css,
text, text,
effects, effects,
life: { green, red, blue }, life: { green, red, blue },
constructId: resolution.target.id, 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 { connect } = require('preact-redux');
const { TIMES } = require('../../constants'); const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.TARGET_DURATION_MS;
const addState = connect( const addState = connect(
function receiveState(state) { function receiveState(state) {
@ -95,17 +92,17 @@ class Slay extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: '#slay', targets: '#slay',
opacity: [ 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, value: 0,
delay: TIMES.TARGET_DURATION_MS * 0.7 + TIMES.POST_SKILL_DURATION_MS * 0.8, delay: TIMES.TARGET_DURATION_MS + TIMES.POST_SKILL_DURATION_MS * 0.2,
duration: TIMES.POST_SKILL_DURATION_MS * 0.2, duration: TIMES.POST_SKILL_DURATION_MS * 0.3,
}], }],
translateY: 0, translateY: 0,
translateX: 0, translateX: 0,
loop: false, loop: false,
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2), duration: (TIMES.TARGET_DURATION_MS * 0.5),
easing: 'easeInQuad', easing: 'easeInQuad',
})); }));
@ -113,15 +110,15 @@ class Slay extends Component {
targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'], targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
baseFrequency: 10, baseFrequency: 10,
scale: 100, scale: 100,
delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2), delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 0.5),
duration: (duration * 1 / 2), duration: (TIMES.TARGET_DURATION_MS * 0.5),
easing: 'easeInQuad', easing: 'easeInQuad',
})); }));
this.animations.push(anime({ this.animations.push(anime({
targets: '#sword', targets: '#sword',
opacity: 0, 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'); const projectiles = document.querySelectorAll('#slay circle');
@ -130,7 +127,7 @@ class Slay extends Component {
targets: proj, targets: proj,
cx: Math.random() * 250 + 25, cx: Math.random() * 250 + 25,
cy: Math.random() * 200 - 100, 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), duration: (TIMES.POST_SKILL_DURATION_MS * 0.3),
easing: 'easeInQuad', 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 range = require('lodash/range');
const reactStringReplace = require('react-string-replace'); const reactStringReplace = require('react-string-replace');
const { STATS } = require('../utils'); const { STATS, removeTier } = require('../utils');
const { ConstructAvatar, ConstructText } = require('./construct'); const { ConstructAvatar, ConstructText } = require('./construct');
const shapes = require('./shapes'); const shapes = require('./shapes');
const { INFO } = require('./../constants'); const { INFO } = require('./../constants');
@ -12,19 +12,38 @@ const actions = require('../actions');
const SkillBtn = require('./skill.btn'); const SkillBtn = require('./skill.btn');
const addStateText = connect( const addStateText = connect(({ animText, itemInfo }) => ({ animText, itemInfo }));
function receiveState(state) {
const { animText } = state;
return { animText };
}
);
function combatText(props) { class combatText extends preact.Component {
const { construct, animText } = props; shouldComponentUpdate(newProps) {
const text = animText && animText.constructId === construct.id if (newProps.animText !== this.props.animText) return true;
? <h1 class="combat-text"><span>{animText.text}</span></h1> return false;
: null; }
return text;
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); const ConstructAnimationText = addStateText(combatText);
@ -137,6 +156,7 @@ class GameConstruct extends Component {
const koEvent = animText ? animText.text === 'KO!' && animText.constructId === construct.id : false; const koEvent = animText ? animText.text === 'KO!' && animText.constructId === construct.id : false;
const ko = construct.green_life.value === 0 && !koEvent ? 'ko' : ''; const ko = construct.green_life.value === 0 && !koEvent ? 'ko' : '';
const classes = eventClasses(animating, animFocus, construct, animText); const classes = eventClasses(animating, animFocus, construct, animText);
const cssClass = ['ko-transition', 'unfocus'].includes(classes) ? classes : null;
const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => ( const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
<div key={j} alt={STATS[s].stat}> <div key={j} alt={STATS[s].stat}>
@ -187,7 +207,7 @@ class GameConstruct extends Component {
setTutorialGameClear(activeSkill, tutorialGame); setTutorialGameClear(activeSkill, tutorialGame);
}} }}
style={ activeSkill ? { cursor: 'pointer' } : {}} style={ activeSkill ? { cursor: 'pointer' } : {}}
class={`game-construct ${ko} ${classes}`} > class={`game-construct ${ko} ${cssClass}`}>
<div class="left"> <div class="left">
{crypSkills} {crypSkills}
{effectBox()} {effectBox()}

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

@ -81,21 +81,7 @@ class TargetSvg extends Component {
// resolutions happening // resolutions happening
// just put skill name up // just put skill name up
if (animating) { if (animating) return false;
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>
);
}
const playerTeam = game.players.find(t => t.id === account.id); const playerTeam = game.players.find(t => t.id === account.id);
const otherTeam = 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 SOURCE_DURATION_MS = 1000; // Time for SOURCE ONLY
const TARGET_DELAY_MS = 500; // Used for Source + Target const TARGET_DELAY_MS = 500; // Used for Source + Target
const TARGET_DURATION_MS = 1500; // Time for TARGET ONLY 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 const SOURCE_AND_TARGET_TOTAL_DURATION = TARGET_DELAY_MS + TARGET_DURATION_MS; // SOURCE + TARGET time
module.exports = { module.exports = {