info updates
This commit is contained in:
ntr
parent
33b519ed66
commit
6213bdf421
@ -399,41 +399,50 @@ header {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
/*
|
||||
INFO
|
||||
*/
|
||||
.thresholds {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.info-skills {
|
||||
.info-cryp .skills {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.info-skills .cryp-skill-btn {
|
||||
.info-cryp .skills .cryp-skill-btn {
|
||||
border: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.info-stats {
|
||||
.info-cryp .stats, .info-cryp .specs {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.info-stats .speed {
|
||||
.info-cryp .stats .speed {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.info-stats figure {
|
||||
.info-cryp .stats figure {
|
||||
flex: 0 0 30%;
|
||||
border: 0;
|
||||
margin: 1em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-stats .stat-icon {
|
||||
.info-cryp .stats .stat-icon {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.info-cryp .specs figure {
|
||||
border: 0;
|
||||
margin: 1em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* CRYP BOX */
|
||||
.cryp-box {
|
||||
@ -504,7 +513,7 @@ header {
|
||||
border-right-width: 0px;
|
||||
}
|
||||
|
||||
.skills .cryp-skill-btn:first-child {
|
||||
.cryp-list .skills .cryp-skill-btn:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
@ -701,7 +710,7 @@ header {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.stats figcaption {
|
||||
.cryp-list .stats figcaption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@ -1,93 +1,92 @@
|
||||
const preact = require('preact');
|
||||
const range = require('lodash/range');
|
||||
|
||||
const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
|
||||
const { COLOUR_ICONS, STATS } = require('../utils');
|
||||
const { ITEMS: { SKILLS, COLOURS } } = require('./constants');
|
||||
const { COLOUR_ICONS, STATS, SPECS } = require('../utils');
|
||||
|
||||
function Info(args) {
|
||||
const {
|
||||
activeCryp,
|
||||
info,
|
||||
sendUnequip,
|
||||
instance,
|
||||
} = args;
|
||||
if (!info.length) return (<div className="instance-info"> </div>);
|
||||
let red = 0; let blue = 0; let green = 0;
|
||||
instance.cryps.forEach(cryp => {
|
||||
red += cryp.colours.red;
|
||||
blue += cryp.colours.blue;
|
||||
green += cryp.colours.green;
|
||||
});
|
||||
const teamColours = { red, blue, green };
|
||||
const [type, value] = info;
|
||||
if (type === 'item') {
|
||||
let itemDetails;
|
||||
if (SKILLS[value]) {
|
||||
itemDetails = SKILLS[value];
|
||||
} else if (SPECS[value]) {
|
||||
itemDetails = SPECS[value];
|
||||
} else if (COLOURS[value]) {
|
||||
itemDetails = COLOURS[value];
|
||||
}
|
||||
return (
|
||||
<div className="instance-info">
|
||||
{value} - {itemDetails.description}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'skill') {
|
||||
return (
|
||||
<div className="instance-info">
|
||||
<div>
|
||||
function infoVar(info) {
|
||||
let red = 0; let blue = 0; let green = 0;
|
||||
instance.cryps.forEach(cryp => {
|
||||
red += cryp.colours.red;
|
||||
blue += cryp.colours.blue;
|
||||
green += cryp.colours.green;
|
||||
});
|
||||
const teamColours = { red, blue, green };
|
||||
const [type, value] = info;
|
||||
if (type === 'item') {
|
||||
let itemDetails;
|
||||
if (SKILLS[value]) {
|
||||
itemDetails = SKILLS[value];
|
||||
} else if (SPECS[value]) {
|
||||
itemDetails = SPECS[value];
|
||||
} else if (COLOURS[value]) {
|
||||
itemDetails = COLOURS[value];
|
||||
}
|
||||
return (
|
||||
<div className="info-var">
|
||||
{value} - {itemDetails.description}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'skill') {
|
||||
return (
|
||||
<div className="info-skill">
|
||||
<div> {value.skill} </div>
|
||||
<div> {SKILLS[value.skill].description} </div>
|
||||
<button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
|
||||
unequip
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function thresholds(t, spec) {
|
||||
return (
|
||||
SPECS[spec].colours.map((c, i) => (
|
||||
<figure key={i} alt={c.colour}>
|
||||
{COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
|
||||
<figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
|
||||
</figure>
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
if (type === 'spec') {
|
||||
const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => {
|
||||
const threshold = thresholds(t, value.spec);
|
||||
function thresholds(t, spec) {
|
||||
return (
|
||||
<div className="thresholds" key={i} alt={t}>
|
||||
{threshold}
|
||||
SPECS[spec].colours.map((c, i) => (
|
||||
<figure key={i} alt={c.colour}>
|
||||
{COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
|
||||
<figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
|
||||
</figure>
|
||||
))
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
if (type === 'spec') {
|
||||
const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => {
|
||||
const threshold = thresholds(t, value.spec);
|
||||
return (
|
||||
<div className="thresholds" key={i} alt={t}>
|
||||
{threshold}
|
||||
</div>
|
||||
);
|
||||
}) : null;
|
||||
return (
|
||||
<div className="info-spec">
|
||||
<div>
|
||||
<div> {value.spec} </div>
|
||||
<div> {SPECS[value.spec].description} </div>
|
||||
{breaks}
|
||||
</div>
|
||||
<button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
|
||||
unequip
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}) : null;
|
||||
return (
|
||||
<div className="instance-info">
|
||||
<div>
|
||||
<div> {value.spec} </div>
|
||||
<div> {SPECS[value.spec].description} </div>
|
||||
{breaks}
|
||||
</div>
|
||||
<button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
|
||||
unequip
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'cryp') {
|
||||
const cryp = value;
|
||||
|
||||
// onClick={() => setInfo('skill', { skill: s, cryp })}
|
||||
function infoCrypElement(cryp) {
|
||||
// onClick={() => setInfo('skill', { skill: s, cryp })}
|
||||
const skills = range(0, 4).map(i => {
|
||||
const s = cryp.skills[i]
|
||||
? cryp.skills[i].skill
|
||||
@ -101,18 +100,45 @@ function Info(args) {
|
||||
<figcaption>{cryp[s.stat].value}</figcaption>
|
||||
</figure>
|
||||
));
|
||||
|
||||
const specs = cryp.specs.map((s, i) => (
|
||||
<figure key={i}>
|
||||
{SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
|
||||
<figcaption>{SPECS[s].caption}</figcaption>
|
||||
</figure>
|
||||
));
|
||||
|
||||
|
||||
return (
|
||||
<div className="instance-info">
|
||||
<div className="info-cryp">
|
||||
<h5>{cryp.name}</h5>
|
||||
<div className="info-skills">
|
||||
{skills}
|
||||
</div>
|
||||
<div className="info-stats">
|
||||
<div className="stats">
|
||||
{stats}
|
||||
</div>
|
||||
<div className="specs">
|
||||
{specs}
|
||||
</div>
|
||||
<div className="skills">
|
||||
{skills}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const infoCryp = activeCryp
|
||||
? infoCrypElement(activeCryp)
|
||||
: null;
|
||||
|
||||
const otherInfo = info.length
|
||||
? infoVar(info)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="instance-info">
|
||||
{infoCryp}
|
||||
{otherInfo}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = Info;
|
||||
|
||||
@ -6,12 +6,23 @@ const Info = require('./info.component');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { info, ws, instance } = state;
|
||||
const {
|
||||
activeCryp,
|
||||
info,
|
||||
ws,
|
||||
instance,
|
||||
} = state;
|
||||
|
||||
function sendUnequip(crypId, item) {
|
||||
return ws.sendVboxUnequip(instance.instance, crypId, item);
|
||||
}
|
||||
|
||||
return { info, sendUnequip, instance };
|
||||
return {
|
||||
activeCryp,
|
||||
info,
|
||||
sendUnequip,
|
||||
instance,
|
||||
};
|
||||
}
|
||||
/*
|
||||
function receiveDispatch(dispatch) {
|
||||
|
||||
@ -6,15 +6,28 @@ const VboxContainer = require('./vbox.container');
|
||||
const InfoContainer = require('./info.container');
|
||||
const molecule = require('./molecule');
|
||||
|
||||
const shapes = require('./shapes');
|
||||
const { STATS, SPECS } = require('../utils');
|
||||
const { SPECS } = require('../utils');
|
||||
|
||||
function Cryp(props) {
|
||||
const {
|
||||
cryp,
|
||||
sendVboxApply,
|
||||
setInfo,
|
||||
activeVar,
|
||||
setActiveCryp,
|
||||
} = props;
|
||||
|
||||
function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
|
||||
const skills = range(0, 4).map(i => {
|
||||
const s = cryp.skills[i]
|
||||
? cryp.skills[i].skill
|
||||
: (<span> </span>);
|
||||
return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('skill', { skill: s, cryp })}>{s}</button>;
|
||||
|
||||
function skillClick() {
|
||||
setInfo('skill', { skill: s, cryp });
|
||||
setActiveCryp(cryp);
|
||||
}
|
||||
|
||||
return <button key={i} className="cryp-skill-btn right" onClick={skillClick} >{s}</button>;
|
||||
});
|
||||
|
||||
// needed for ondrop to fire
|
||||
@ -35,9 +48,7 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
|
||||
e.preventDefault();
|
||||
|
||||
if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
|
||||
document.getElementsByClassName('instance-info')[0].scrollIntoView();
|
||||
|
||||
return setInfo('cryp', cryp);
|
||||
return setActiveCryp(cryp);
|
||||
}
|
||||
|
||||
const specs = cryp.specs.map((s, i) => (
|
||||
@ -75,19 +86,27 @@ function InstanceComponent(args) {
|
||||
// account,
|
||||
instance,
|
||||
quit,
|
||||
// clearInfo,
|
||||
sendInstanceReady,
|
||||
sendVboxApply,
|
||||
setInfo,
|
||||
activeVar,
|
||||
setActiveVar,
|
||||
setActiveCryp,
|
||||
} = args;
|
||||
|
||||
if (!instance) return <div>...</div>;
|
||||
|
||||
const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo, activeVar));
|
||||
const cryps = instance.cryps.map((c, i) => Cryp({
|
||||
cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp,
|
||||
}));
|
||||
|
||||
function onClick(e) {
|
||||
setActiveVar(null);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="instance" onClick={() => setActiveVar(null)} >
|
||||
<main className="instance" onClick={onClick} >
|
||||
<div className="instance-hdr">
|
||||
<button
|
||||
className="instance-btn instance-ui-btn menu-btn left"
|
||||
|
||||
@ -19,7 +19,7 @@ const addState = connect(
|
||||
return { instance, account, sendInstanceReady, sendVboxApply, activeVar };
|
||||
},
|
||||
|
||||
function receiveDispatch(dispatch, { instance, combiner }) {
|
||||
function receiveDispatch(dispatch) {
|
||||
function quit() {
|
||||
dispatch(actions.setInstance(null));
|
||||
}
|
||||
@ -32,7 +32,15 @@ const addState = connect(
|
||||
dispatch(actions.setActiveVar(value));
|
||||
}
|
||||
|
||||
return { quit, setInfo, setActiveVar };
|
||||
function setActiveCryp(value) {
|
||||
dispatch(actions.setActiveCryp(value));
|
||||
}
|
||||
|
||||
function clearInfo() {
|
||||
return dispatch(actions.setInfo([]));
|
||||
}
|
||||
|
||||
return { quit, clearInfo, setInfo, setActiveVar, setActiveCryp };
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
@ -6,7 +6,7 @@ const Vbox = require('./vbox.component');
|
||||
|
||||
const addState = connect(
|
||||
function receiveState(state) {
|
||||
const { ws, instance, combiner, reclaiming, activeVar } = state;
|
||||
const { ws, instance, combiner, reclaiming, activeVar, info } = state;
|
||||
|
||||
function sendVboxDiscard() {
|
||||
return ws.sendVboxDiscard(instance.instance);
|
||||
@ -29,6 +29,7 @@ const addState = connect(
|
||||
combiner,
|
||||
reclaiming,
|
||||
activeVar,
|
||||
info,
|
||||
sendVboxAccept,
|
||||
sendVboxDiscard,
|
||||
sendVboxReclaim,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user