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

wip

Browse Source
This commit is contained in:
ntr 2019-05-06 19:55:26 +10:00
parent 87e97d3fba
commit 34fd1d7664
5 changed files with 133 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/cryps.css
View File

@ -617,7 +617,7 @@ table td svg {
}
.info-spec {
margin-top: 1em;
margin-top: 2em;
}
.spec-goals figure {

67
client/src/components/info.component.jsx
View File

@ -3,6 +3,9 @@ const range = require('lodash/range');
const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./../constants');
const { COLOUR_ICONS, STATS, SPECS, convertVar, crypAvatar } = require('../utils');
const shapes = require('./shapes');
const InfoCryp = require('./info.cryp');
function Info(args) {
const {
@ -14,6 +17,7 @@ function Info(args) {
player,
setInfo,
vboxInfo,
setVboxHidden,
vboxHidden,
} = args;
@ -108,65 +112,6 @@ function Info(args) {
}
}
function CrypInfo() {
if (!activeCryp) return false;
const cryp = player.cryps.find(c => c.id === activeCryp.id);
if (!cryp) return false;
// onClick={() => setInfo('skill', { skill: s, cryp })}
const skills = range(0, 3).map(i => {
const skill = cryp.skills[i];
function skillClick(e) {
if (!skill) setInfo('highlight', 'skill');
else setInfo('skill', { skill: skill.skill, cryp });
e.stopPropagation();
return setActiveCryp(cryp);
}
const s = cryp.skills[i]
? cryp.skills[i].skill
: (<span>&nbsp;</span>);
return <button key={i} alt={s} onClick={skillClick} >{s}</button>;
});
const stats = Object.values(STATS).map((s, j) => (
<figure key={j} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value}</figcaption>
</figure>
));
const specs = cryp.specs.map((s, i) => {
function specClick() {
setInfo('spec', { spec: s, cryp });
}
return (
<figure key={i} onClick={specClick} >
{SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
<figcaption>{SPECS[s].caption}</figcaption>
</figure>
);
});
return (
<div className="info-cryp">
<div className="stats">
{stats}
</div>
<div className="specs">
{specs}
</div>
<div className="skills">
{skills}
</div>
</div>
);
}
function playerRound(id) {
if (!instance.rounds.length) return null;
return instance.rounds[instance.rounds.length - 1].find(r => r.player_ids.includes(id));
@ -237,10 +182,10 @@ function Info(args) {
return (
<div className={classes} >
<ScoreBoard />
<CrypInfo />
<InfoCryp />
<Combos />
<CrypVar />
<ScoreBoard />
</div>
);
}

6
client/src/components/info.container.jsx
View File

@ -39,13 +39,13 @@ const addState = connect(
dispatch(actions.setActiveCryp(value));
}
function setActiveVar(value) {
dispatch(actions.setActiveVar(value));
function setVboxHidden(value) {
dispatch(actions.setVboxHidden(value));
}
return {
setInfo,
setActiveVar,
setVboxHidden,
setActiveCryp,
};
}

121
client/src/components/info.cryp.jsx Normal file
View File

@ -0,0 +1,121 @@
const preact = require('preact');
const range = require('lodash/range');
const { connect } = require('preact-redux');
const actions = require('../actions');
const { STATS, SPECS, crypAvatar } = require('../utils');
const shapes = require('./shapes');
const addState = connect(
function receiveState(state) {
const { activeCryp, player } = state;
return { activeCryp, player };
},
function receiveDispatch(dispatch) {
function setInfo(item, value) {
dispatch(actions.setInfo([item, value]));
}
function setActiveCryp(value) {
dispatch(actions.setActiveCryp(value));
}
function setVboxHidden(value) {
dispatch(actions.setVboxHidden(value));
}
return { setInfo, setActiveCryp, setVboxHidden };
}
);
function InfoCryp(args) {
const {
activeCryp,
player,
setVboxHidden,
setInfo,
setActiveCryp,
} = args;
if (!activeCryp) return false;
const cryp = player.cryps.find(c => c.id === activeCryp.id);
if (!cryp) return false;
// onClick={() => setInfo('skill', { skill: s, cryp })}
const skills = range(0, 3).map(i => {
const skill = cryp.skills[i];
function skillClick(e) {
if (!skill) {
setVboxHidden(false);
setInfo('highlight', 'skill');
} else setInfo('skill', { skill: skill.skill, cryp });
e.stopPropagation();
return setActiveCryp(cryp);
}
const s = cryp.skills[i]
? cryp.skills[i].skill
: (<span>&nbsp;</span>);
return <button key={i} alt={s} onClick={skillClick} >{s}</button>;
});
const stats = Object.values(STATS).map((s, j) => (
<figure key={j} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value}</figcaption>
</figure>
));
const specs = range(0, 6).map(i => {
const s = cryp.specs[i];
function blankSpecClick(e) {
e.stopPropagation();
setActiveCryp(cryp);
setInfo('highlight', 'spec');
}
if (!s) {
return (
<figure key={i} className="gray" onClick={blankSpecClick}>
{shapes.diamond('stat-icon gray')}
<figcaption>&nbsp;</figcaption>
</figure>
);
}
function specClick(e) {
e.stopPropagation();
setActiveCryp(cryp);
setInfo('spec', { spec: s, cryp });
}
return (
<figure key={i} onClick={specClick}>
{SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
<figcaption>{SPECS[s].caption}</figcaption>
</figure>
);
});
return (
<div className="info-cryp">
<div className="stats">
{stats}
</div>
<div className="specs">
{specs}
</div>
<div className="skills">
{skills}
</div>
</div>
);
}
module.exports = addState(InfoCryp);

4
client/src/components/instance.cryps.jsx
View File

@ -120,9 +120,9 @@ function Cryp(props) {
// const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
return (
<div key={cryp.id} className="instance-cryp" >
<div key={cryp.id} className="instance-cryp" onClick={onClick} >
<div className="instance-cryp-top">
<figure className="img" onClick={onClick}>
<figure className="img">
{crypAvatar(cryp.name)}
<figcaption>{cryp.name}</figcaption>
</figure>