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

Merge branch 'anims-fixed' into anims-change

Browse Source
This commit is contained in:
ntr 2019-07-02 00:00:32 +10:00
commit 9bcfd6de15
15 changed files with 82 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,7 +206,6 @@
font-size: 2em;
font-family: 'Jura';
position: absolute;
object-fit: contain;
top: 15%;
}

26
client/src/animations.socket.jsx
View File

@ -28,16 +28,24 @@ function createSocket(store) {
return eachSeries(newRes, (r, cb) => {
if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
// Create sub events for combat animations
store.dispatch(actions.setResolution(r));
// const sequence = getCombatSequence(r);
const sequence = getCombatSequence(r);
return eachSeries(sequence, (stages, sCb) => {
const stagedR = Object.create(r);
stagedR.stages = stages;
let timeout = 0;
if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) {
timeout = (TIMES.TARGET_DURATION_MS + TIMES.TARGET_DELAY_MS);
} else if (stages.includes('START_SKILL')) timeout = TIMES.SOURCE_DURATION_MS;
else if (stages.includes('END_SKILL')) timeout = TIMES.TARGET_DURATION_MS;
else if (stages.includes('POST_SKILL')) timeout = TIMES.POST_SKILL_DURATION_MS;
store.dispatch(actions.setResolution(stagedR));
// sequence.forEach(stage => {
// const stagedR = Object.create(r);
// stagedR.stage = stage;
// store.dispatch(actions.setResolution(stagedR));
// });
setTimeout(cb, TIMES.RESOLUTION_TOTAL_MS);
return setTimeout(sCb, timeout);
}, err => {
if (err) console.error(err);
// Finished this resolution
return cb();
});
}, err => {
if (err) return console.error(err);
store.dispatch(actions.setResolution(null));

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

@ -25,7 +25,7 @@ const SiphonTick = require('./anims/siphon.tick');
// const Test = require('./anims/test');
const { removeTier } = require('../utils');
const { removeTier, getCombatText } = require('../utils');
const colours = {
red: '#a52a2a',
@ -37,23 +37,18 @@ const colours = {
white: '#FFFFFF',
};
const SOURCE_ANIM_MS = 1000;
const TARGET_ANIM_DELAY_MS = 500;
const TARGET_ANIM_MS = 1000;
const SOURCE_ANIM_MS = 850;
function animations(props) {
const { resolution, stage, player, construct, game, account } = props;
const { game, account, resolution, player, construct } = props;
if (!resolution) return false;
const [type, event] = resolution.event;
const [, event] = resolution.event;
if (!event.skill) return false;
if (!resolution.target) return false;
console.log(resolution);
const { stages } = resolution;
// source animation
if (resolution.source.id === construct.id) {
if (resolution.source.id === construct.id && stages.includes('START_SKILL')) {
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const otherTeam = game.players.find(t => t.id !== account.id);
@ -95,30 +90,30 @@ function animations(props) {
// target animation
const anim = text => {
console.log(text);
if (!text) return false;
if (!text || !stages.includes('END_SKILL')) return false;
const skill = removeTier(text);
if (skill === 'Bash' && type === 'Damage') return false;
// if (skill === 'Bash' && type === 'Damage') return false;
switch (skill) {
case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
case 'Attack': return <Strike id={construct.id} team={player} colour={colours.white}/>;
case 'Amplify': return <Amplify/>;
case 'Banish': return banish(construct.id);
case 'Bash': return <Bash />;
case 'Block': return <Block />;
case 'Buff': return <Buff />;
case 'Curse': return <Curse />;
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
case 'Blast': return <Blast id={construct.id} team={player}/>;
case 'Debuff': return <Debuff />;
case 'Decay': return <Decay />;
case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
case 'Slay': return <Slay id={construct.id} team={player} colour={colours.yellow}/>;
case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Strike': return <Strike id={construct.id} team={player} colour={colours.red}/>;
case 'Chaos': return <Chaos id={construct.id} team={player}/>;
case 'Slay': return <Slay id={construct.id} team={player} />;
case 'Heal': return <Heal id={construct.id} team={player} />;
case 'Hex': return <Hex />;
case 'Haste': return <Haste />;
case 'Invert': return invert(construct.id);
case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Siphon': return <Siphon id={construct.id} team={player} />;
case 'SiphonTick': return <SiphonTick id={construct.id} team={player} />;
case 'Stun': return <Stun />;
default: return false;
}
@ -127,13 +122,14 @@ function animations(props) {
const combatAnim = anim(event.skill);
if (combatAnim) {
return (
<div class={`combat-anim`}>
<div class={'combat-anim'}>
{combatAnim}
</div>
);
}
return (<div></div>);
return (
<div></div>);
}
module.exports = animations;

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

@ -5,7 +5,7 @@ const anime = require('animejs').default;
const dagger = require('../svgs/dagger');
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
class Attack extends Component {
constructor(props) {

2
client/src/components/anims/blast.jsx
View File

@ -5,7 +5,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {

2
client/src/components/anims/chaos.jsx
View File

@ -5,7 +5,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {
return (

2
client/src/components/anims/heal.jsx
View File

@ -5,7 +5,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {

2
client/src/components/anims/siphon.jsx
View File

@ -4,7 +4,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
class AttackCharge extends Component {
render() {

2
client/src/components/anims/siphon.tick.jsx
View File

@ -4,7 +4,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {

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

@ -5,7 +5,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {

2
client/src/components/anims/strike.jsx
View File

@ -4,7 +4,7 @@ const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
const duration = TIMES.TARGET_DURATION_MS;
function laser(dimensions, colour) {

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

@ -2,7 +2,6 @@ const { connect } = require('preact-redux');
const preact = require('preact');
const range = require('lodash/range');
const actions = require('../actions');
const { STATS, eventClasses, getCombatText } = require('../utils');
const { ConstructAvatar } = require('./construct');
const animations = require('./animations');
@ -75,20 +74,12 @@ function GameConstruct(props) {
let crypSkills = <div> &nbsp; </div>;
if (player) crypSkills = (<div class="skills"> {skills} </div>);
const [combatText, combatClass] = getCombatText(construct, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const stage = resolution ? resolution.stage : false;
const combatInfo = animations({ game, account, resolution, stage, player, construct });
const effects = construct.effects.length
? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
: <div>&nbsp;</div>;
const combatAnim = animations({ game, account, resolution, player, construct });
const combatText = getCombatText(resolution, construct);
return (
<div
onClick={() => selectSkillTarget(construct.id)}
@ -98,10 +89,11 @@ function GameConstruct(props) {
{crypSkills}
<div class="stats"> {stats} </div>
<ConstructAvatar name={construct.name} id={construct.id} />
{combatInfo}
{combatAnim}
<div class={'combat-text'}> {combatText} </div>
<div class="effects"> {effects} </div>
</div>
);
}
module.exports = addState(GameConstruct);
module.exports = addState(GameConstruct);

7
client/src/constants.jsx
View File

@ -7,6 +7,7 @@ const FADE_DURATION_MS = 500;
const RESOLUTION_TOTAL_MS = SOURCE_DURATION_MS + TARGET_DURATION_MS + FADE_DURATION_MS;
const FADE_DELAY_MS = RESOLUTION_TOTAL_MS - FADE_DURATION_MS;
// const RESOLUTION_TOTAL_MS = 20000;
const POST_SKILL_DURATION_MS = 1000;
module.exports = {
TIMES: {
@ -18,11 +19,7 @@ module.exports = {
FADE_DURATION_MS,
RESOLUTION_TOTAL_MS,
START_SKILL: 2000,
END_SKILL: 2000,
POST_SKILL: 2000,
DELAY: 150,
POST_SKILL_DURATION_MS,
},
COLOURS: {

112
client/src/utils.jsx
View File

@ -75,9 +75,7 @@ const STATS = {
function eventClasses(resolution, construct) {
if (!resolution) return '';
const startSkill = resolution.stage === 'START_SKILL';
const endSkill = resolution.stage === 'END_SKILL';
const postSkill = resolution.stage === 'POST_SKILL';
const postSkill = resolution.stages.includes('POST_SKILL');
const source = construct.id === resolution.source.id;
const target = construct.id === resolution.target.id;
// not involved at all. blur them
@ -107,9 +105,6 @@ function eventClasses(resolution, construct) {
if (type === 'Damage') {
const { skill, amount, mitigation, colour } = event;
// Highlight the flow of damage from source -> target
if (source && startSkill) return 'active-skill';
if (target && endSkill) return 'active-skill';
// Deal damage to construct and return effect
if (target && postSkill) {
construct.green_life.value = resolution.target.green;
@ -131,8 +126,6 @@ function eventClasses(resolution, construct) {
if (type === 'Healing') {
const { skill, amount, overhealing } = event;
if (source && startSkill) return 'active-skill';
if (target && endSkill) return 'active-skill';
if (target && postSkill) {
construct.green_life.value = resolution.target.green;
return 'green-damage';
@ -150,29 +143,21 @@ function eventClasses(resolution, construct) {
if (type === 'Effect') {
const { skill, effect, duration, construct_effects: constructEffects } = event;
if (source && startSkill) return 'active-skill';
if (target && endSkill) return 'active-skill';
if (target && postSkill) construct.effects = constructEffects;
}
if (type === 'Skill') {
const { skill } = event;
// Highlight the flow of damage from source -> target
if (source && startSkill) return 'active-skill';
if (target && endSkill) return 'active-skill';
}
if (type === 'Removal') {
const { effect, construct_effects: constructEffects } = event;
if (source && startSkill) return 'active-skill';
if (target && endSkill) return 'active-skill';
if (target && postSkill) construct.effects = constructEffects;
}
if (type === 'Recharge') {
const { skill, red, blue } = event;
if (source && startSkill) return 'active-skill';
if (target && endSkill) return 'active-skill';
if (target && postSkill) {
if (red > 0 && blue > 0) {
construct.red_life.value = resolution.target.red;
@ -200,116 +185,79 @@ function eventClasses(resolution, construct) {
function getCombatSequence(resolution) {
if (!resolution.event) return false;
if (resolution.event[0] === 'Inversion') return false;
if (resolution.event[0] === 'Skill') return ['START_SKILL', 'END_SKILL'];
if (resolution.event[0] === 'Ko') return ['POST_SKILL'];
if (resolution.event[0] === 'Skill') return [['START_SKILL', 'END_SKILL']];
if (resolution.event[0] === 'Ko') return [['POST_SKILL']];
switch (resolution.stages) {
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 1: return [['START_SKILL', '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', 'DELAY', 'END_SKILL', 'POST_SKILL'];
default: return [['START_SKILL', 'END_SKILL'], ['POST_SKILL']];
}
}
function getCombatText(construct, resolution) {
if (!resolution) return ['', ''];
function getCombatText(resolution, construct) {
if (!resolution) return false;
if (!resolution.stages.includes('POST_SKILL')) return false;
if (construct.id !== resolution.target.id) return false;
const [type, event] = resolution.event;
const source = construct.id === resolution.source.id;
const target = construct.id === resolution.target.id;
const startSkill = resolution.stage === 'START_SKILL';
const endSkill = resolution.stage === 'END_SKILL';
const postSkill = resolution.stage === 'POST_SKILL';
if (type === 'Ko') {
if (postSkill && target) return ['KO!', ''];
return 'KO!';
}
if (type === 'Disable') {
const { skill, disable } = event;
if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return [`${skill}`, ''];
if (postSkill && target) return [`${disable}`, ''];
const { disable } = event;
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 (type === 'TargetKo') {
const { skill } = event;
if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return [`${skill}`, ''];
return 'IMMUNE';
}
if (type === 'Damage') {
const { skill, mitigation, colour } = event;
const { mitigation, colour } = event;
let { amount } = event;
if (colour === 'Green') amount *= -1;
const mitigationText = mitigation
? `(${mitigation})`
: '';
if (startSkill && source) return [`${skill}`, `${skill.toLowerCase()}-cast`];
if (endSkill && target) return [`${skill}`, `${skill.toLowerCase()}-hit`];
if (postSkill && target) return [`${amount} ${mitigationText}`, ''];
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)`, ''];
const { amount, overhealing } = event;
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', ''];
return 'INVERT';
}
if (type === 'Reflection') {
const { skill } = event;
if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return [`${skill}`, ''];
if (postSkill && target) return ['REFLECT', ''];
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`, ''];
const { effect, duration } = event;
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 (type === 'Skill' || type === 'AoeSkill') {
const { skill } = event;
if (startSkill && source) return [`${skill}`, ''];
if (endSkill && target) return [`${skill}`, ''];
const { red, blue } = event;
return [`+${red}R ${blue}B`, ''];
}
if (type === 'Removal') {
const { effect } = event;
if (postSkill && target) return [`-${effect}`, ''];
return `-${effect}`;
}
return '';
return false;
}
function convertItem(v) {

2
server/Cargo.toml
View File

@ -36,4 +36,4 @@ stripe-rust = { version = "0.10.4", features = ["webhooks"] }
[patch.crates-io]
# stripe-rust = { git = "https://github.com/margh/stripe-rs.git" }
stripe-rust = { path = "/home/ntr/code/stripe-rs" }
stripe-rust = { git = "https://github.com/margh/stripe-rs.git" }