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);