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

Merge branch 'master' of ssh://mnml.gg:40022/~/mnml

Browse Source
This commit is contained in:
ntr
2019-05-31 12:26:03 +10:00
parent ca036ed9e0 0601006504
commit 1571a39c24
5 changed files with 105 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/game.component.jsx
+4 -60
View File
@@ -2,17 +2,14 @@ const preact = require('preact');
const { STATS, eventClasses, getCombatText, ConstructAvatar } = require('../utils');
// const { animationDivs } = require('../animations');
const GameConstruct = require('./game.construct');
const shapes = require('./shapes');
function GamePanel(props) {
const {
game,
account,
resolution,
activeSkill,
setActiveSkill,
setActiveConstruct,
selectSkillTarget,
sendInstanceState,
sendGameReady,
showLog,
@@ -109,8 +106,8 @@ function GamePanel(props) {
);
function PlayerTeam(team) {
const constructs = team.constructs.map((c, i) => <GameConstruct key={c.id} construct={c} />);
const constructs = team.constructs.map(c =>
<GameConstruct key={c.id} construct={c} player={true} />);
return (
<div className="team player">
{constructs}
@@ -118,62 +115,9 @@ function GamePanel(props) {
);
}
function OpponentConstruct(construct, i) {
const ko = construct.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, construct);
const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
<div key={j} alt={STATS[s].stat}>
{shapes[s]()}
<div className="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
<div className="value" >{construct[STATS[s].stat].value}</div>
</div>
));
const [combatText, combatClass] = getCombatText(construct, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText
? <div className={combatTextClass}>{combatText}</div>
: null;
const effects = construct.effects.length
? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
: <div>&nbsp;</div>;
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const targeting = game.stack
.filter(s => playerTeamIds.includes(s.source_construct_id) && s.target_construct_id === construct.id)
.map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
// const anim = (
// <div className="anim-container">
// {animationDivs(combatClass)}
// </div>
// );
return (
<div
key={i}
className={`game-construct ${ko} ${classes}`}
style={ activeSkill ? { cursor: 'pointer' } : {}}
onClick={() => selectSkillTarget(construct.id)} >
<div className="stats">{stats}</div>
<h3 className="name" >{construct.name}</h3>
<div className="effects">{effects}</div>
<div className="targeting">{targeting}</div>
<figure
className="img"
onClick={() => selectSkillTarget(construct.id)} >
<ConstructAvatar name={construct.name} id={construct.id} />
{combatTextEl}
</figure>
</div>
);
}
function OpponentTeam(team) {
const constructs = team.constructs.map(OpponentConstruct);
const constructs = team.constructs.map(c =>
<GameConstruct key={c.id} construct={c} player={false} />);
return (
<div className="team opponent">
{constructs}
client/src/components/game.construct.jsx
+19 -24
View File
@@ -3,7 +3,7 @@ const preact = require('preact');
const range = require('lodash/range');
const actions = require('../actions');
const { STATS, eventClasses, getCombatText, ConstructAvatar } = require('../utils');
const { STATS, eventClasses, getCombatText, ConstructAvatar, constructHealth } = require('../utils');
const { animationDivs } = require('../animations');
const shapes = require('./shapes');
@@ -46,6 +46,7 @@ function GameConstruct(props) {
game,
account,
construct,
player,
resolution,
activeSkill,
setActiveConstruct,
@@ -54,18 +55,23 @@ function GameConstruct(props) {
const ko = construct.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, construct);
const skills = range(0, 3)
.map(i => <SkillBtn key={i} construct={construct} i={i} />);
const life = constructHealth(resolution, construct);
const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
<div key={j} alt={STATS[s].stat}>
{shapes[s]()}
<div className="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
<div className="value" >{construct[STATS[s].stat].value}</div>
<div className="max" >{life[s]} / {construct[STATS[s].stat].max}</div>
<div className="value" >{life[s]}</div>
</div>
));
const skills = range(0, 3)
.map(i => <SkillBtn key={i} construct={construct} i={i} />);
let crypSkills = <div> &nbsp; </div>;
if (player) crypSkills = (<div className="skills"> {skills} </div>);
const [combatText, combatClass] = getCombatText(construct, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText
@@ -93,30 +99,19 @@ function GameConstruct(props) {
<div
style={ activeSkill ? { cursor: 'pointer' } : {}}
className={`game-construct ${ko} ${classes}`} >
<h3 className="name">
{construct.name}
</h3>
<div className="skills">
{skills}
</div>
<div className="targeting">
{targeting}
</div>
<h3 className="name"> {construct.name} </h3>
{crypSkills}
<div className="targeting"> {targeting} </div>
<div className="stats"> {stats} </div>
<figure
className="img"
onClick={() => selectSkillTarget(construct.id)} >
<ConstructAvatar name={construct.name} id={construct.id} />
{combatTextEl}
{anim}
</figure>
<div className="effects">
{effects}
</div>
<div className="stats">
{stats}
</div>
<div className="effects"> {effects} </div>
</div>
);
}
module.exports = addState(GameConstruct);
module.exports = addState(GameConstruct);
client/src/events.jsx
+1 -4
View File
@@ -3,7 +3,7 @@ const eachSeries = require('async/eachSeries');
const actions = require('./actions');
const { TIMES } = require('./constants');
const { getCombatSequence, resoConstructHealth } = require('./utils');
const { getCombatSequence } = require('./utils');
function registerEvents(store) {
@@ -49,9 +49,6 @@ function registerEvents(store) {
if (skip) return sCb();
const stagedR = Object.create(r);
stagedR.stage = stage;
// Apply damage for each construct
if (stage === 'POST_SKILL') resoConstructHealth(stagedR, currentGame);
store.dispatch(actions.setResolution(stagedR));
return setTimeout(sCb, TIMES[stage]);
client/src/utils.jsx
+62 -30
View File
@@ -158,38 +158,71 @@ const STATS = {
};
function resoConstructHealth(resolution, currentGame) {
if (!resolution) return false;
function constructHealth(resolution, construct) {
if (!resolution) {
return {
RedLife: construct.red_life.value,
GreenLife: construct.green_life.value,
BlueLife: construct.blue_life.value,
};
}
const [type, event] = resolution.event;
const modifyHealth = construct => {
if (construct.id !== resolution.target.id) return false; // not target
const [type, event] = resolution.event;
if (type === 'Damage') {
const { amount, mitigation, colour } = event;
construct.green_life.value -= amount;
if (colour === 'Red') {
construct.red_life.value -= mitigation;
}
if (colour === 'Blue') {
construct.blue_life.value -= mitigation;
}
if (construct.id !== resolution.target.id) {
if (construct.id === resolution.source.id) {
return {
RedLife: resolution.source.red,
GreenLife: resolution.source.green,
BlueLife: resolution.source.blue,
};
}
return {
RedLife: construct.red_life.value,
GreenLife: construct.green_life.value,
BlueLife: construct.blue_life.value,
};
}
if (type === 'Healing') {
const { amount } = event;
construct.green_life.value += amount;
let RedLife = resolution.target.red;
let BlueLife = resolution.target.blue;
let GreenLife = resolution.target.green;
if (resolution.stage === 'POST_SKILL') {
return { RedLife, GreenLife, BlueLife };
}
if (type === 'Damage') {
const { amount, mitigation, colour } = event;
GreenLife = construct.green_life.max < GreenLife + amount
? construct.green_life.max
: GreenLife + amount;
if (colour === 'Red') {
RedLife = construct.red_life.max < RedLife + mitigation
? construct.red_life.max
: RedLife + mitigation;
}
if (type === 'Recharge') {
const { red, blue } = event;
construct.red_life.value += red;
construct.blue_life.value += blue;
if (colour === 'Blue') {
BlueLife = construct.blue_life.max < BlueLife + mitigation
? construct.blue_life.max
: BlueLife + mitigation;
}
return true;
};
currentGame.players.forEach(player => player.constructs.forEach(modifyHealth));
return true;
}
if (type === 'Healing') {
const { amount } = event;
GreenLife = GreenLife - amount < 0 ? 0 : GreenLife - amount;
}
if (type === 'Recharge') {
const { red, blue } = event;
RedLife = RedLife - red < 0 ? 0 : RedLife - red;
BlueLife = BlueLife - red < 0 ? 0 : BlueLife - blue;
}
return { RedLife, GreenLife, BlueLife };
}
function eventClasses(resolution, construct) {
@@ -297,8 +330,7 @@ function eventClasses(resolution, construct) {
function getCombatSequence(event) {
if (!event) return false;
// Skip combat animations depending on event type, expandable in future
const dotTicks = ['DecayTick', 'CorruptionTick', 'TriageTick', 'SiphonTick', 'StrangleTick'];
if (['Inversion'].includes(event[0])) return false;
if (['Skill', 'AoeSkill'].includes(event[0])) return ['START_SKILL', 'END_SKILL'];
if (['Immunity'].includes(event[0])) return ['START_SKILL', 'POST_SKILL'];
if (['Removal'].includes(event[0])) return ['POST_SKILL'];
@@ -325,7 +357,7 @@ function getCombatSequence(event) {
if (['Ko'].includes(event[0])
|| (event[1].skill.includes('Throw') && event[1].effect === 'Vulnerable')) return ['POST_SKILL'];
if (dotTicks.includes(event[1].skill)) return ['END_SKILL', 'POST_SKILL'];
if (['Tick'].includes(event[1].skill)) return ['END_SKILL', 'POST_SKILL'];
return ['START_SKILL', 'END_SKILL', 'POST_SKILL'];
}
@@ -456,7 +488,7 @@ module.exports = {
eventClasses,
getCombatSequence,
getCombatText,
resoConstructHealth,
constructHealth,
NULL_UUID,
STATS,
COLOURS,