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

Merge branch 'horizontal-vbox' of ssh://cryps.gg:40022/~/cryps into horizontal-vbox

Browse Source
This commit is contained in:
ntr
2019-05-14 14:02:05 +10:00
parent a4bd7abe7a 2318ff3974
commit e628f615b1
9 changed files with 442 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/info.component.jsx
+10 -7
View File
@@ -55,10 +55,12 @@ function Info(args) {
}
if (type === 'skill') {
const skillInfo = SKILLS[value.skill];
const description = skillInfo ? skillInfo.description : '?????';
return (
<div className="info-skill">
<div> {value.skill} </div>
<div> {SKILLS[value.skill].description} </div>
<div> {description} </div>
<button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
unequip
</button>
@@ -165,11 +167,11 @@ function Info(args) {
if (activeCryp) return false;
if (!player) return false;
if (combiner[0] !== null) {
if (!(combiner.every(u => u === null))) {
const filteredCombos = vboxInfo.combos
.filter(combo => combiner.every(u => u === null
|| combo.units.includes(player.vbox.bound[u])));
if (filteredCombos.length > 6) return false;
return (
<table>
<tbody>
@@ -183,11 +185,12 @@ function Info(args) {
</table>
);
}
const vboxCombos = vboxInfo.combos.filter(c => c.units.includes(info[1]));
if (vboxCombos.length > 6) return false;
return (
<table>
<tbody>
{vboxInfo.combos.filter(c => c.units.includes(info[1])).map((c, i) =>
{vboxCombos.map((c, i) =>
<tr key={i} >
<td className="highlight" >{convertVar(c.var)}</td>
{c.units.map((u, j) => <td key={j} >{convertVar(u)}</td>)}
@@ -206,12 +209,12 @@ function Info(args) {
return (
<div className={classes} >
<InfoCryp />
<CrypVar />
<Combos />
<ScoreBoard />
</div>
);
}
// <InfoCryp /> not required anymore
// <ScoreBoard /> Takes up too much space maybe a context switch
module.exports = Info;
client/src/components/instance.component.jsx
+3 -1
View File
@@ -3,6 +3,7 @@ const preact = require('preact');
const VboxContainer = require('./vbox.container');
const InfoContainer = require('./info.container');
const InstanceCrypsContainer = require('./instance.cryps');
const EquipmentContainer = require('./instance.equip');
function InstanceComponent(args) {
const {
@@ -88,10 +89,11 @@ function InstanceComponent(args) {
<div>&nbsp;</div>
</div>
{actionBtn}
{timer}
</div>
{timer}
<VboxContainer />
<InstanceCrypsContainer />
<EquipmentContainer />
<InfoContainer />
</main>
);
client/src/components/instance.cryps.jsx
+82 -21
View File
@@ -3,12 +3,12 @@ const preact = require('preact');
const range = require('lodash/range');
const shapes = require('./shapes');
const { SPECS, crypAvatar } = require('../utils');
const { SPECS, STATS, crypAvatar } = require('../utils');
const actions = require('../actions');
const addState = connect(
function receiveState(state) {
const { ws, instance, player, account, vboxHidden, vboxInfo } = state;
const { ws, instance, player, account, vboxHidden, vboxInfo, activeVar } = state;
function sendInstanceReady() {
return ws.sendInstanceReady(instance.id);
@@ -18,7 +18,7 @@ const addState = connect(
return ws.sendVboxApply(instance.id, crypId, i);
}
return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo };
return { instance, player, account, sendInstanceReady, sendVboxApply, vboxHidden, vboxInfo, activeVar };
},
function receiveDispatch(dispatch) {
@@ -49,11 +49,14 @@ const addState = connect(
function Cryp(props) {
const {
activeVar,
cryp,
player,
sendVboxApply,
setInfo,
setActiveCryp,
vboxInfo,
setVboxHighlight,
vboxInfo,
} = props;
function setHighlight(type) {
@@ -62,6 +65,17 @@ function Cryp(props) {
return false;
}
function onClick(e) {
e.stopPropagation();
e.preventDefault();
if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
return setActiveCryp(cryp);
}
const { vbox } = player;
const skillList = vboxInfo.vars.filter(v => v.skill).map(v => v.v);
const specList = vboxInfo.vars.filter(v => v.spec).map(v => v.v);
const skills = range(0, 3).map(i => {
const skill = cryp.skills[i];
const s = skill
@@ -69,36 +83,43 @@ function Cryp(props) {
: (<span className="gray">+</span>);
function skillClick(e) {
if (!skill && activeVar !== null) return sendVboxApply(cryp.id, activeVar);
if (!skill) setHighlight('skill');
else setInfo('skill', { skill: skill.skill, cryp });
e.stopPropagation();
return setActiveCryp(cryp);
}
const classes = `right ${skill ? '' : 'action'}`;
return <button key={i} className={classes} onClick={skillClick} >{s}</button>;
const action = skill ? '' : 'action';
const equip = skillList.includes(vbox.bound[activeVar]) && !skill ? 'equip' : '';
const classes = `right ${action} ${equip}`;
return (
<button key={i} className={classes} onClick={skillClick} >{s}</button>
);
});
function onClick(e) {
e.stopPropagation();
e.preventDefault();
return setActiveCryp(cryp);
}
const specs = range(0, 6).map(i => {
const s = cryp.specs[i];
function blankSpecClick(e) {
e.stopPropagation();
setActiveCryp(cryp);
if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
setHighlight('spec');
return setActiveCryp(cryp);
}
if (!s) {
const equip = specList.includes(vbox.bound[activeVar]) ? 'equip-spec' : 'gray';
return (
<<<<<<< HEAD
<figure key={i} className="gray" onClick={blankSpecClick}>
{shapes.diamond('stat-icon gray')}
<figcaption>+</figcaption>
=======
<figure key={i} onClick={blankSpecClick}>
{shapes.diamond(`stat-icon ${equip}`)}
<figcaption>&nbsp;</figcaption>
>>>>>>> 2318ff3974d80a7c29246cdc8a3eb1653ea45b91
</figure>
);
}
@@ -117,6 +138,27 @@ function Cryp(props) {
);
});
const damage = Object.values(STATS).slice(0, 3).map(s => (
<figure key={s.stat} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value}</figcaption>
</figure>
));
const speed = Object.values(STATS).slice(3, 4).map(s => (
<figure key={s.stat} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value}</figcaption>
</figure>
));
const life = Object.values(STATS).slice(4, 8).map(s => (
<figure key={s.stat} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value}</figcaption>
</figure>
));
// const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
// const colours = mapValues(cryp.colours, c => {
// if (cTotal === 0) return 245;
@@ -130,20 +172,39 @@ function Cryp(props) {
// return 4;
// };
// const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
return (
<div key={cryp.id} className="instance-cryp" onClick={onClick} >
<div className="instance-cryp-top">
<div className="avatar">
<figure className="img">
{crypAvatar(cryp.name)}
<figcaption>{cryp.name}</figcaption>
</figure>
<div className="skills">
{skills}
</div>
</div>
<div className="skills">
{skills}
</div>
<div className="specs">
{specs}
</div>
<div className="stats">
{specs}
<div className="damage-label">
Damage
</div>
<div className="damage-icons">
{damage}
</div>
<div className="speed-label">
Speed
</div>
<div className="speed-icons">
{speed}
</div>
<div className="life-label">
Life
</div>
<div className="life-icons">
{life}
</div>
</div>
</div>
);
@@ -151,9 +212,9 @@ function Cryp(props) {
function InstanceCryps(props) {
const {
activeVar,
player,
instance,
// clearInfo,
setInfo,
setActiveCryp,
@@ -168,7 +229,7 @@ function InstanceCryps(props) {
if (instance.phase === 'Lobby') return false;
const cryps = player.cryps.map((c, i) => Cryp({
cryp: c, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
activeVar, cryp: c, player, sendVboxApply, setInfo, setActiveCryp, vboxInfo, setVboxHighlight,
}));
const classes = `instance-cryp-list ${vboxHidden ? '' : 'hidden'}`;
client/src/components/instance.equip.jsx
+102
View File
@@ -0,0 +1,102 @@
const { connect } = require('preact-redux');
const preact = require('preact');
const range = require('lodash/range');
const actions = require('../actions');
const { convertVar, SPECS } = require('./../utils');
const addState = connect(
function receiveState(state) {
const { player, vboxInfo } = state;
return { player, vboxInfo };
},
function receiveDispatch(dispatch) {
function setInfo(item, value) {
dispatch(actions.setInfo([item, value]));
}
function clearInfo() {
return dispatch(actions.setInfo([]));
}
function setActiveVar(v) {
return dispatch(actions.setActiveVar(v));
}
return { setInfo, setActiveVar, clearInfo };
}
);
function Equipment(props) {
const {
player,
vboxInfo,
setInfo,
setActiveVar,
} = props;
const { vbox } = player;
function boundClick(e, i) {
const value = vbox.bound[i];
setInfo('item', value);
setActiveVar(i);
return false;
}
// const classes = `right ${skill ? '' : 'action'}`;
const skillList = vboxInfo.vars.filter(v => v.skill).map(v => v.v);
const specList = vboxInfo.vars.filter(v => v.spec).map(v => v.v);
const skills = range(0, 9).map(i => {
const item = convertVar(vbox.bound[i]);
if (skillList.includes(item)) {
return (
<button key={i} className={''} onClick={e => boundClick(e, i)}>
{item}
</button>
);
} return false;
});
const specs = range(0, 9).map(i => {
const item = convertVar(vbox.bound[i]);
if (specList.includes(item)) {
return (
<figure key={i} onClick={e => boundClick(e, i)}>
{SPECS[item].svg(`stat-icon ${SPECS[item].colour}`)}
<figcaption>{SPECS[item].caption}</figcaption>
</figure>
);
} return false;
});
const skillLabel = skills.every(i => i === false) ? '' : 'Skills';
const specLabel = specs.every(i => i === false) ? '' : 'Specs';
return (
<div className="instance-equip" >
<div className="skills">
<div className="label">
{skillLabel}
</div>
<div className ="items">
{skills}
</div>
</div>
<div className="specs">
<div className="label">
{specLabel}
</div>
<div className ="items">
{specs}
</div>
</div>
</div>
);
}
module.exports = addState(Equipment);