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

bigtime renaming

Browse Source
This commit is contained in:
ntr
2019-05-25 15:20:38 +10:00
parent 4800609df7
commit 760106e0e7
91 changed files with 1642 additions and 1615 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/cryp.spawn.button.jsx
+3 -3
View File
@@ -1,6 +1,6 @@
const preact = require('preact');
function renderSpawnButton({ account, sendCrypSpawn }) {
function renderSpawnButton({ account, sendConstructSpawn }) {
let name = '';
if (!account) return <div>...</div>;
@@ -13,7 +13,7 @@ function renderSpawnButton({ account, sendCrypSpawn }) {
<input
className="input"
type="text"
placeholder="cryp name"
placeholder="construct name"
onChange={e => (name = e.target.value)}
/>
</div>
@@ -21,7 +21,7 @@ function renderSpawnButton({ account, sendCrypSpawn }) {
<button
className="button"
type="submit"
onClick={() => sendCrypSpawn(name)}>
onClick={() => sendConstructSpawn(name)}>
Spawn 👾
</button>
</div>
client/src/components/cryp.spawn.container.js
+5 -5
View File
@@ -1,16 +1,16 @@
const { connect } = require('react-redux');
const CrypSpawnButton = require('./cryp.spawn.button');
const ConstructSpawnButton = require('./construct.spawn.button');
const addState = connect(
function receiveState(state) {
const { ws } = state;
function sendCrypSpawn(name) {
return ws.sendCrypSpawn(name);
function sendConstructSpawn(name) {
return ws.sendConstructSpawn(name);
}
return { account: state.account, sendCrypSpawn };
return { account: state.account, sendConstructSpawn };
}
);
module.exports = addState(CrypSpawnButton);
module.exports = addState(ConstructSpawnButton);
client/src/components/game.component.jsx
+25 -25
View File
@@ -1,7 +1,7 @@
const preact = require('preact');
const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils');
const { animationDivs } = require('../animations');
const GameCryp = require('./game.cryp');
const GameConstruct = require('./game.construct');
function GamePanel(props) {
const {
@@ -10,7 +10,7 @@ function GamePanel(props) {
resolution,
activeSkill,
setActiveSkill,
setActiveCryp,
setActiveConstruct,
selectSkillTarget,
sendInstanceState,
sendGameReady,
@@ -76,9 +76,9 @@ function GamePanel(props) {
</div>
);
function findCryp(id) {
const team = game.players.find(t => t.cryps.find(c => c.id === id));
if (team) return team.cryps.find(c => c.id === id);
function findConstruct(id) {
const team = game.players.find(t => t.constructs.find(c => c.id === id));
if (team) return team.constructs.find(c => c.id === id);
return null;
}
@@ -109,39 +109,39 @@ function GamePanel(props) {
);
function PlayerTeam(team) {
const cryps = team.cryps.map((c, i) => <GameCryp key={c.id} cryp={c} />);
const constructs = team.constructs.map((c, i) => <GameConstruct key={c.id} construct={c} />);
return (
<div className="team player">
{cryps}
{constructs}
</div>
);
}
function OpponentCryp(cryp, i) {
const ko = cryp.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, cryp);
function OpponentConstruct(construct, i) {
const ko = construct.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, construct);
const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
<figure key={j} alt={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
<figcaption>{construct[s.stat].value} / {construct[s.stat].max}</figcaption>
</figure>
));
const [combatText, combatClass] = getCombatText(cryp, resolution);
const [combatText, combatClass] = getCombatText(construct, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText
? <div className={combatTextClass}>{combatText}</div>
: null;
const effects = cryp.effects.length
? cryp.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
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.cryps.map(c => c.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const targeting = game.stack
.filter(s => playerTeamIds.includes(s.source_cryp_id) && s.target_cryp_id === cryp.id)
.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 = (
@@ -153,17 +153,17 @@ function GamePanel(props) {
return (
<div
key={i}
className={`game-cryp ${ko} ${classes}`}
className={`game-construct ${ko} ${classes}`}
style={ activeSkill ? { cursor: 'pointer' } : {}}
onClick={() => selectSkillTarget(cryp.id)} >
onClick={() => selectSkillTarget(construct.id)} >
<div className="stats">{stats}</div>
<h3 className="name" >{cryp.name}</h3>
<h3 className="name" >{construct.name}</h3>
<div className="effects">{effects}</div>
<div className="targeting">{targeting}</div>
<figure
className="img"
onClick={() => selectSkillTarget(cryp.id)} >
{crypAvatar(cryp.name, cryp.id)}
onClick={() => selectSkillTarget(construct.id)} >
{constructAvatar(construct.name, construct.id)}
{combatTextEl}
{anim}
</figure>
@@ -173,10 +173,10 @@ function GamePanel(props) {
function OpponentTeam(team) {
const cryps = team.cryps.map(OpponentCryp);
const constructs = team.constructs.map(OpponentConstruct);
return (
<div className="team opponent">
{cryps}
{constructs}
</div>
);
}
@@ -185,7 +185,7 @@ function GamePanel(props) {
function gameClick(e) {
e.stopPropagation();
setActiveCryp(null);
setActiveConstruct(null);
}
return (
client/src/components/game.container.jsx
+11 -11
View File
@@ -13,12 +13,12 @@ const addState = connect(
resolution,
showLog,
activeSkill,
activeCryp,
activeConstruct,
} = state;
function selectSkillTarget(targetCrypId) {
function selectSkillTarget(targetConstructId) {
if (activeSkill) {
return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
return ws.sendGameSkill(game.id, activeSkill.constructId, targetConstructId, activeSkill.skill);
}
return false;
}
@@ -34,7 +34,7 @@ const addState = connect(
// intercept self casting skills
if (activeSkill && activeSkill.skill.self_targeting) {
ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
}
return {
@@ -43,7 +43,7 @@ const addState = connect(
account,
resolution,
activeSkill,
activeCryp,
activeConstruct,
selectSkillTarget,
sendInstanceState,
sendGameReady,
@@ -51,13 +51,13 @@ const addState = connect(
},
function receiveDispatch(dispatch) {
function setActiveSkill(crypId, skill) {
dispatch(actions.setActiveSkill(crypId, skill));
// particlesJS(`particles-${crypId}`, config);
function setActiveSkill(constructId, skill) {
dispatch(actions.setActiveSkill(constructId, skill));
// particlesJS(`particles-${constructId}`, config);
}
function setActiveCryp(cryp) {
dispatch(actions.setActiveCryp(cryp));
function setActiveConstruct(construct) {
dispatch(actions.setActiveConstruct(construct));
}
function quit() {
@@ -73,7 +73,7 @@ const addState = connect(
dispatch(actions.setSkip(true));
}
return { setActiveSkill, setActiveCryp, quit, toggleLog, skip };
return { setActiveSkill, setActiveConstruct, quit, toggleLog, skip };
}
);
client/src/components/game.cryp.jsx
+22 -22
View File
@@ -3,7 +3,7 @@ const preact = require('preact');
const range = require('lodash/range');
const actions = require('../actions');
const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils');
const { animationDivs } = require('../animations');
const SkillBtn = require('./skill.btn');
@@ -18,16 +18,16 @@ const addState = connect(
activeSkill,
} = state;
function selectSkillTarget(targetCrypId) {
function selectSkillTarget(targetConstructId) {
if (activeSkill) {
return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
return ws.sendGameSkill(game.id, activeSkill.constructId, targetConstructId, activeSkill.skill);
}
return false;
}
// intercept self casting skills
if (activeSkill && activeSkill.skill.self_targeting) {
ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
}
return {
@@ -40,48 +40,48 @@ const addState = connect(
},
);
function GameCryp(props) {
function GameConstruct(props) {
const {
game,
account,
cryp,
construct,
resolution,
activeSkill,
setActiveCryp,
setActiveConstruct,
selectSkillTarget,
} = props;
const ko = cryp.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, cryp);
const ko = construct.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, construct);
const skills = range(0, 3)
.map(i => <SkillBtn key={i} cryp={cryp} i={i} />);
.map(i => <SkillBtn key={i} construct={construct} i={i} />);
const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => {
// i've seen this happen ;/
if (cryp[s.stat].value < 0) console.warn(cryp);
if (construct[s.stat].value < 0) console.warn(construct);
return <figure key={j} alt={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
<figcaption>{construct[s.stat].value} / {construct[s.stat].max}</figcaption>
</figure>
});
const [combatText, combatClass] = getCombatText(cryp, resolution);
const [combatText, combatClass] = getCombatText(construct, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText
? <div className={combatTextClass}>{combatText}</div>
: null;
const effects = cryp.effects.length
? cryp.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
const effects = construct.effects.length
? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
: <div>&nbsp;</div>;
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.cryps.map(c => c.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const targeting = game.stack
.filter(s => playerTeamIds.includes(s.source_cryp_id) && s.target_cryp_id === cryp.id)
.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 = (
@@ -93,9 +93,9 @@ function GameCryp(props) {
return (
<div
style={ activeSkill ? { cursor: 'pointer' } : {}}
className={`game-cryp ${ko} ${classes}`} >
className={`game-construct ${ko} ${classes}`} >
<h3 className="name">
{cryp.name}
{construct.name}
</h3>
<div className="skills">
{skills}
@@ -105,8 +105,8 @@ function GameCryp(props) {
</div>
<figure
className="img"
onClick={() => selectSkillTarget(cryp.id)} >
{crypAvatar(cryp.name, cryp.id)}
onClick={() => selectSkillTarget(construct.id)} >
{constructAvatar(construct.name, construct.id)}
{combatTextEl}
{anim}
</figure>
@@ -120,4 +120,4 @@ function GameCryp(props) {
);
}
module.exports = addState(GameCryp);
module.exports = addState(GameConstruct);
client/src/components/header.component.jsx
+1 -1
View File
@@ -23,7 +23,7 @@ function renderHeader(args) {
return (
<header>
<h1 className="header-title">
cryps.gg
mnml.gg
</h1>
{accountStatus}
</header>
client/src/components/info.component.jsx
+4 -4
View File
@@ -27,10 +27,10 @@ function Info(args) {
let red = 0;
let blue = 0;
let green = 0;
player.cryps.forEach(cryp => {
red += cryp.colours.red;
blue += cryp.colours.blue;
green += cryp.colours.green;
player.constructs.forEach(construct => {
red += construct.colours.red;
blue += construct.colours.blue;
green += construct.colours.green;
});
const teamColours = { red, blue, green };
client/src/components/instance.component.jsx
+2 -2
View File
@@ -3,7 +3,7 @@ const { connect } = require('react-redux');
const Vbox = require('./vbox.component');
const InfoContainer = require('./info.container');
const InstanceCrypsContainer = require('./instance.cryps');
const InstanceConstructsContainer = require('./instance.constructs');
const EquipmentContainer = require('./instance.equip');
const actions = require('../actions');
@@ -137,7 +137,7 @@ function Instance(args) {
<Vbox />
<InfoContainer />
<EquipmentContainer />
<InstanceCrypsContainer />
<InstanceConstructsContainer />
</main>
);
}
client/src/components/instance.create.form.jsx
+3 -3
View File
@@ -6,9 +6,9 @@ const addState = connect(
function receiveState(state) {
const { ws, team } = state;
function sendInstanceNew(sCryps, name, players) {
if (sCryps.length) {
return ws.sendInstanceNew(sCryps, name, players);
function sendInstanceNew(sConstructs, name, players) {
if (sConstructs.length) {
return ws.sendInstanceNew(sConstructs, name, players);
}
return false;
}
client/src/components/instance.cryps.jsx
+45 -45
View File
@@ -3,24 +3,24 @@ const preact = require('preact');
const range = require('lodash/range');
const shapes = require('./shapes');
const { SPECS, STATS, instanceCryp } = require('../utils');
const { SPECS, STATS, instanceConstruct } = require('../utils');
const actions = require('../actions');
const addState = connect(
function receiveState(state) {
const { ws, instance, account, itemInfo, itemEquip, activeCryp } = state;
const { ws, instance, account, itemInfo, itemEquip, activeConstruct } = state;
const player = instance.players.find(p => p.id === account.id);
function sendInstanceReady() {
return ws.sendInstanceReady(instance.id);
}
function sendVboxApply(crypId, i) {
return ws.sendVboxApply(instance.id, crypId, i);
function sendVboxApply(constructId, i) {
return ws.sendVboxApply(instance.id, constructId, i);
}
function sendUnequip(crypId, item) {
return ws.sendVboxUnequip(instance.id, crypId, item);
function sendUnequip(constructId, item) {
return ws.sendVboxUnequip(instance.id, constructId, item);
}
return {
@@ -31,7 +31,7 @@ const addState = connect(
sendVboxApply,
itemInfo,
itemEquip,
activeCryp,
activeConstruct,
sendUnequip,
};
},
@@ -45,8 +45,8 @@ const addState = connect(
dispatch(actions.setInfo(item));
}
function setActiveCryp(value) {
dispatch(actions.setActiveCryp(value));
function setActiveConstruct(value) {
dispatch(actions.setActiveConstruct(value));
}
function clearInfo() {
@@ -61,19 +61,19 @@ const addState = connect(
return dispatch(actions.setItemUnequip(v));
}
return { quit, clearInfo, setInfo, setActiveCryp, setItemUnequip, setItemEquip };
return { quit, clearInfo, setInfo, setActiveConstruct, setItemUnequip, setItemEquip };
}
);
function Cryp(props) {
function Construct(props) {
const {
activeCryp,
activeConstruct,
itemEquip,
cryp,
construct,
player,
sendVboxApply,
setActiveCryp,
setActiveConstruct,
setItemUnequip,
setItemEquip,
itemInfo,
@@ -84,9 +84,9 @@ function Cryp(props) {
function onClick(e) {
e.stopPropagation();
e.preventDefault();
if (itemEquip !== null) sendVboxApply(cryp.id, itemEquip);
if (itemEquip !== null) sendVboxApply(construct.id, itemEquip);
setItemEquip(null);
return setActiveCryp(cryp);
return setActiveConstruct(construct);
}
function hoverInfo(e, info) {
@@ -100,7 +100,7 @@ function Cryp(props) {
const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
const skills = range(0, 3).map(i => {
const skill = cryp.skills[i];
const skill = construct.skills[i];
const s = skill
? skill.skill
: (<span className="gray">+</span>);
@@ -108,15 +108,15 @@ function Cryp(props) {
function skillClick(e) {
if (!skill) return false;
setItemUnequip(skill.skill);
setActiveCryp(cryp);
setActiveConstruct(construct);
e.stopPropagation();
return true;
}
function skillDblClick(e) {
if (!skill) return false;
sendUnequip(cryp.id, skill.skill);
setActiveCryp(null);
sendUnequip(construct.id, skill.skill);
setActiveConstruct(null);
setItemUnequip(null);
e.stopPropagation();
e.preventDefault();
@@ -140,7 +140,7 @@ function Cryp(props) {
});
const specs = range(0, 6).map(i => {
const s = cryp.specs[i];
const s = construct.specs[i];
if (!s) {
const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
@@ -155,12 +155,12 @@ function Cryp(props) {
function specClick(e) {
e.stopPropagation();
setItemUnequip(s);
setActiveCryp(cryp);
setActiveConstruct(construct);
}
function specDblClick(e) {
sendUnequip(cryp.id, s);
setActiveCryp(null);
sendUnequip(construct.id, s);
setActiveConstruct(null);
setItemUnequip(null);
e.stopPropagation();
e.preventDefault();
@@ -183,14 +183,14 @@ function Cryp(props) {
const stats = Object.values(STATS).map(s => (
<figure key={s.stat} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour} stat`)}
<figcaption>{cryp[s.stat].value}</figcaption>
<figcaption>{construct[s.stat].value}</figcaption>
</figure>
));
const activeId = activeCryp ? activeCryp.id : false;
const crypClass = activeId === cryp.id ? 'instance-cryp-active' : 'instance-cryp';
const activeId = activeConstruct ? activeConstruct.id : false;
const constructClass = activeId === construct.id ? 'instance-construct-active' : 'instance-construct';
// const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
// const colours = mapValues(cryp.colours, c => {
// const cTotal = construct.colours.red + construct.colours.blue + construct.colours.green;
// const colours = mapValues(construct.colours, c => {
// if (cTotal === 0) return 245;
// return Math.floor(c / cTotal * 255);
// });
@@ -204,13 +204,13 @@ function Cryp(props) {
// const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
return (
<div key={cryp.id} className={crypClass} onClick={onClick} >
{instanceCryp(cryp.name, cryp.id)}
<h2 className="name" >{cryp.name}</h2>
<div className="skills" onMouseOver={e => hoverInfo(e, 'crypSkills')} >
<div key={construct.id} className={constructClass} onClick={onClick} >
{instanceConstruct(construct.name, construct.id)}
<h2 className="name" >{construct.name}</h2>
<div className="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
{skills}
</div>
<div className="specs" onMouseOver={e => hoverInfo(e, 'crypSpecs')} >
<div className="specs" onMouseOver={e => hoverInfo(e, 'constructSpecs')} >
{specs}
</div>
<div className="stats">
@@ -231,15 +231,15 @@ function Cryp(props) {
);
}
function InstanceCryps(props) {
function InstanceConstructs(props) {
const {
activeCryp,
activeConstruct,
itemEquip,
player,
instance,
// clearInfo,
setInfo,
setActiveCryp,
setActiveConstruct,
sendVboxApply,
itemInfo,
@@ -252,27 +252,27 @@ function InstanceCryps(props) {
if (!player) return false;
if (instance.phase === 'Lobby') return false;
const cryps = player.cryps.map((c, i) => Cryp({
cryp: c,
activeCryp,
const constructs = player.constructs.map((c, i) => Construct({
construct: c,
activeConstruct,
itemEquip,
setItemUnequip,
setItemEquip,
player,
sendVboxApply,
setInfo,
setActiveCryp,
setActiveConstruct,
itemInfo,
setVboxHighlight,
sendUnequip,
}));
const classes = `cryp-list`;
const classes = `construct-list`;
return (
<div className={classes} onClick={() => setActiveCryp(null)}>
{cryps}
<div className={classes} onClick={() => setActiveConstruct(null)}>
{constructs}
</div>
);
}
module.exports = addState(InstanceCryps);
module.exports = addState(InstanceConstructs);
client/src/components/instance.equip.jsx
+8 -8
View File
@@ -8,14 +8,14 @@ const { convertItem, SPECS } = require('./../utils');
const addState = connect(
function receiveState(state) {
const { account, activeCryp, itemInfo, info, ws, instance, itemUnequip } = state;
const { account, activeConstruct, itemInfo, info, ws, instance, itemUnequip } = state;
const player = instance.players.find(p => p.id === account.id);
function sendUnequip(crypId, item) {
return ws.sendVboxUnequip(instance.id, crypId, item);
function sendUnequip(constructId, item) {
return ws.sendVboxUnequip(instance.id, constructId, item);
}
return { player, itemInfo, instance, info, sendUnequip, activeCryp, itemUnequip };
return { player, itemInfo, instance, info, sendUnequip, activeConstruct, itemUnequip };
},
function receiveDispatch(dispatch) {
@@ -48,7 +48,7 @@ function Equipment(props) {
itemUnequip,
setItemEquip,
setItemUnequip,
activeCryp,
activeConstruct,
itemInfo,
sendUnequip,
@@ -65,7 +65,7 @@ function Equipment(props) {
const isSpec = fullInfo && fullInfo.spec;
function skillClick(e, i) {
if (itemUnequip && activeCryp) return false;
if (itemUnequip && activeConstruct) return false;
const value = vbox.bound[i];
setItemEquip(i);
return false;
@@ -74,9 +74,9 @@ function Equipment(props) {
function unequipClick(e) {
e.stopPropagation();
if (!itemUnequip) return false;
if (!activeCryp) return false;
if (!activeConstruct) return false;
setItemUnequip(null);
return sendUnequip(activeCryp.id, itemUnequip);
return sendUnequip(activeConstruct.id, itemUnequip);
}
function hoverInfo(e, info) {
client/src/components/list.jsx
+2 -2
View File
@@ -7,7 +7,7 @@ const InstanceCreateForm = require('./instance.create.form');
const addState = connect(
function receiveState(state) {
const { ws, cryps, team, instances, account } = state;
const { ws, constructs, team, instances, account } = state;
function sendInstanceJoin(instance) {
if (team.length) {
@@ -26,7 +26,7 @@ const addState = connect(
return {
account,
cryps,
constructs,
team,
sendInstanceJoin,
sendInstanceState,
client/src/components/menu.component.jsx
+21 -21
View File
@@ -3,7 +3,7 @@ const range = require('lodash/range');
const { NULL_UUID } = require('./../utils');
const { stringSort, crypAvatar } = require('./../utils');
const { stringSort, constructAvatar } = require('./../utils');
const SpawnButton = require('./spawn.button');
const InstanceCreateForm = require('./instance.create.form');
@@ -19,14 +19,14 @@ const COLOURS = [
function Menu(args) {
const {
account,
cryps,
constructs,
team,
setTeam,
sendInstanceState,
sendPlayerMmCrypsSet,
sendPlayerMmConstructsSet,
sendInstanceJoin,
sendInstanceList,
sendCrypSpawn,
sendConstructSpawn,
instances,
} = args;
@@ -61,7 +61,7 @@ function Menu(args) {
// <button
// className={'menu-instance-btn left'}
// disabled={instanceJoinHidden}
// onClick={() => sendPlayerMmCrypsSet()}>
// onClick={() => sendPlayerMmConstructsSet()}>
// Set Matchmaking Team
// </button>
// );
@@ -88,12 +88,12 @@ function Menu(args) {
);
}
function crypList() {
if (!cryps) return <div></div>;
function constructList() {
if (!constructs) return <div></div>;
// redux limitation + suggested workaround
// so much for dumb components
function selectCryp(id) {
function selectConstruct(id) {
// remove
const i = team.findIndex(sid => sid === id);
if (i > -1) {
@@ -108,37 +108,37 @@ function Menu(args) {
return setTeam(team);
}
const crypPanels = cryps.sort(idSort).map(cryp => {
const colour = team.indexOf(cryp.id);
const constructPanels = constructs.sort(idSort).map(construct => {
const colour = team.indexOf(construct.id);
const selected = colour > -1;
const borderColour = selected ? COLOURS[colour] : '#000000';
return (
<div
key={cryp.id}
className="menu-cryp-ctr">
key={construct.id}
className="menu-construct-ctr">
<div
className="menu-cryp"
className="menu-construct"
style={ { 'border-color': borderColour || 'whitesmoke' } }
onClick={() => selectCryp(cryp.id)} >
{crypAvatar(cryp.name)}
<h2>{cryp.name}</h2>
onClick={() => selectConstruct(construct.id)} >
{constructAvatar(construct.name)}
<h2>{construct.name}</h2>
</div>
</div>
);
});
const spawnButtonsNum = cryps.length < 3
? (3 - cryps.length)
const spawnButtonsNum = constructs.length < 3
? (3 - constructs.length)
: 1;
const spawnButtons = range(spawnButtonsNum)
.map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
.map(i => <SpawnButton key={i} i={i} spawn={name => sendConstructSpawn(name)} />);
return (
<div className="menu-cryps">
{crypPanels}
<div className="menu-constructs">
{constructPanels}
{spawnButtons}
</div>
);
client/src/components/menu.container.jsx
+10 -10
View File
@@ -5,7 +5,7 @@ const actions = require('./../actions');
const addState = connect(
function receiveState(state) {
const { ws, cryps, team, instances, account } = state;
const { ws, constructs, team, instances, account } = state;
function sendInstanceJoin(instance) {
if (team.length) {
@@ -14,15 +14,15 @@ const addState = connect(
return false;
}
function sendPlayerMmCrypsSet() {
function sendPlayerMmConstructsSet() {
if (team.length) {
return ws.sendPlayerMmCrypsSet(team);
return ws.sendPlayerMmConstructsSet(team);
}
return false;
}
function sendCrypSpawn(name) {
return ws.sendCrypSpawn(name);
function sendConstructSpawn(name) {
return ws.sendConstructSpawn(name);
}
function sendInstanceState(instance) {
@@ -35,20 +35,20 @@ const addState = connect(
return {
account,
cryps,
constructs,
team,
sendInstanceJoin,
sendInstanceState,
sendInstanceList,
sendCrypSpawn,
sendPlayerMmCrypsSet,
sendConstructSpawn,
sendPlayerMmConstructsSet,
instances,
};
},
function receiveDispatch(dispatch) {
function setTeam(crypIds) {
dispatch(actions.setTeam(crypIds));
function setTeam(constructIds) {
dispatch(actions.setTeam(constructIds));
}
return {
client/src/components/nav.jsx
+5 -5
View File
@@ -15,7 +15,7 @@ const addState = connect(
account,
instances,
team,
cryps,
constructs,
game,
} = state;
@@ -27,7 +27,7 @@ const addState = connect(
account,
instances,
team,
cryps,
constructs,
game,
sendInstanceState,
};
@@ -60,7 +60,7 @@ function Nav(args) {
account,
sendInstanceState,
team,
cryps,
constructs,
instances,
game,
@@ -81,8 +81,8 @@ function Nav(args) {
const teamElements = team.map((c, i) => {
if (c) {
const cryp = cryps.find(f => f.id === c);
return <button key={c} onClick={() => navTo('team')}>{cryp.name}</button>;
const construct = constructs.find(f => f.id === c);
return <button key={c} onClick={() => navTo('team')}>{construct.name}</button>;
}
return <button key={i} onClick={() => navTo('team')}>+</button>;
});
client/src/components/skill.btn.jsx
+11 -11
View File
@@ -17,8 +17,8 @@ const addState = connect(
},
function receiveDispatch(dispatch) {
function setActiveSkill(crypId, skill) {
dispatch(actions.setActiveSkill(crypId, skill));
function setActiveSkill(constructId, skill) {
dispatch(actions.setActiveSkill(constructId, skill));
}
return { setActiveSkill };
@@ -28,7 +28,7 @@ const addState = connect(
function Skill(props) {
const {
cryp,
construct,
game,
i,
mobile,
@@ -36,14 +36,14 @@ function Skill(props) {
setActiveSkill,
} = props;
const s = cryp.skills[i];
const ko = cryp.green_life.value === 0 ? 'ko' : '';
const s = construct.skills[i];
const ko = construct.green_life.value === 0 ? 'ko' : '';
if (!s) {
return (
<button
disabled='true'
className='cryp-skill-btn disabled'>
className='construct-skill-btn disabled'>
</button>
);
}
@@ -52,25 +52,25 @@ function Skill(props) {
? 'top'
: '';
const cdText = cryp.skills[i].cd > 0
const cdText = construct.skills[i].cd > 0
? `- ${s.cd}T`
: '';
const highlight = activeSkill
? activeSkill.crypId === cryp.id && activeSkill.skill === s.skill
? activeSkill.constructId === construct.id && activeSkill.skill === s.skill
: false;
function onClick(e) {
e.stopPropagation();
return setActiveSkill(cryp.id, s.skill);
return setActiveSkill(construct.id, s.skill);
}
const targeting = game.stack.some(stack => stack.source_cryp_id === cryp.id && stack.skill === s.skill);
const targeting = game.stack.some(stack => stack.source_construct_id === construct.id && stack.skill === s.skill);
return (
<button
disabled={!!cdText || ko}
className={`cryp-skill-btn ${side} ${(targeting || highlight) ? 'active' : ''}`}
className={`construct-skill-btn ${side} ${(targeting || highlight) ? 'active' : ''}`}
type="submit"
onClick={onClick}>
{s.skill} {cdText}
client/src/components/spawn.button.jsx
+2 -2
View File
@@ -31,9 +31,9 @@ class SpawnButton extends Component {
return (
<div
key={this.props.i}
className="menu-cryp-ctr spawn-btn">
className="menu-construct-ctr spawn-btn">
<div
className="menu-cryp"
className="menu-construct"
onClick={() => this.enable()} >
<h2>+</h2>
<input
client/src/components/targeting.arrows.jsx
+7 -7
View File
@@ -11,17 +11,17 @@ function TargetSvg(args) {
const playerTeam = game.players.find(t => t.id === account.id);
const otherTeam = game.players.find(t => t.id !== account.id);
const playerTeamIds = playerTeam.cryps.map(c => c.id);
const outgoing = game.stack.filter(stack => playerTeamIds.includes(stack.source_cryp_id));
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const outgoing = game.stack.filter(stack => playerTeamIds.includes(stack.source_construct_id));
function getPath(cast) {
const source = playerTeam.cryps.findIndex(c => c.id === cast.source_cryp_id);
const defensive = playerTeamIds.includes(cast.target_cryp_id);
const source = playerTeam.constructs.findIndex(c => c.id === cast.source_construct_id);
const defensive = playerTeamIds.includes(cast.target_construct_id);
const target = defensive
? playerTeam.cryps.findIndex(c => c.id === cast.target_cryp_id)
: otherTeam.cryps.findIndex(c => c.id === cast.target_cryp_id);
? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id)
: otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id);
const skillIndex = playerTeam.cryps[source].skills.findIndex(s => s.skill === cast.skill);
const skillIndex = playerTeam.constructs[source].skills.findIndex(s => s.skill === cast.skill);
const skillOffset = (100 * skillIndex) + 50;
const sourceY = 0;
client/src/components/team.jsx
+24 -24
View File
@@ -4,7 +4,7 @@ const range = require('lodash/range');
const actions = require('./../actions');
const { NULL_UUID } = require('./../utils');
const { stringSort, crypAvatar } = require('./../utils');
const { stringSort, constructAvatar } = require('./../utils');
const SpawnButton = require('./spawn.button');
const idSort = stringSort('id');
@@ -17,23 +17,23 @@ const COLOURS = [
const addState = connect(
function receiveState(state) {
const { ws, cryps, team, account } = state;
const { ws, constructs, team, account } = state;
function sendCrypSpawn(name) {
return ws.sendCrypSpawn(name);
function sendConstructSpawn(name) {
return ws.sendConstructSpawn(name);
}
return {
account,
cryps,
constructs,
team,
sendCrypSpawn,
sendConstructSpawn,
};
},
function receiveDispatch(dispatch) {
function setTeam(crypIds) {
dispatch(actions.setTeam(crypIds));
function setTeam(constructIds) {
dispatch(actions.setTeam(constructIds));
}
function navToList() {
@@ -53,19 +53,19 @@ const addState = connect(
function Team(args) {
const {
account,
cryps,
constructs,
team,
setTeam,
sendCrypSpawn,
sendConstructSpawn,
navToList,
} = args;
if (!cryps) return <div></div>;
if (!constructs) return <div></div>;
// redux limitation + suggested workaround
// so much for dumb components
function selectCryp(id) {
function selectConstruct(id) {
// remove
const i = team.findIndex(sid => sid === id);
if (i > -1) {
@@ -80,31 +80,31 @@ function Team(args) {
return setTeam(team);
}
const crypPanels = cryps.sort(idSort).map(cryp => {
const colour = team.indexOf(cryp.id);
const constructPanels = constructs.sort(idSort).map(construct => {
const colour = team.indexOf(construct.id);
const selected = colour > -1;
const borderColour = selected ? COLOURS[colour] : '#000000';
return (
<div
key={cryp.id}
className="menu-cryp-ctr">
key={construct.id}
className="menu-construct-ctr">
<div
className="menu-cryp"
className="menu-construct"
style={ { 'border-color': borderColour || 'whitesmoke' } }
onClick={() => selectCryp(cryp.id)} >
{crypAvatar(cryp.name, cryp.id)}
<h2>{cryp.name}</h2>
onClick={() => selectConstruct(construct.id)} >
{constructAvatar(construct.name, construct.id)}
<h2>{construct.name}</h2>
</div>
</div>
);
});
const spawnButtonsNum = (3 - cryps.length % 3);
const spawnButtonsNum = (3 - constructs.length % 3);
const spawnButtons = range(spawnButtonsNum)
.map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
.map(i => <SpawnButton key={i} i={i} spawn={name => sendConstructSpawn(name)} />);
const header = (
@@ -119,10 +119,10 @@ function Team(args) {
);
return (
<main className="menu-cryps">
<main className="menu-constructs">
{header}
<div className="list">
{crypPanels}
{constructPanels}
{spawnButtons}
</div>
</main>