what a goddamn nightmare
This commit is contained in:
ntr
parent
52bec725f7
commit
a2b1e2d3ff
@ -420,19 +420,25 @@ button.equipping {
|
||||
|
||||
.thresholds {
|
||||
display: flex;
|
||||
flex-flow: row-wrap;
|
||||
/*align-items: center;*/
|
||||
flex-flow: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thresholds hr {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.colour-reqs {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.spec-goals {
|
||||
}
|
||||
|
||||
.spec-goals figure svg {
|
||||
.thresholds figure svg {
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.spec-goals .unmet {
|
||||
.thresholds .unmet {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
const preact = require('preact');
|
||||
const { Fragment } = require('preact');
|
||||
const range = require('lodash/range');
|
||||
|
||||
const { INFO } = require('./../constants');
|
||||
@ -43,32 +44,54 @@ function InfoComponent(args) {
|
||||
});
|
||||
const teamColours = { red, blue, green };
|
||||
|
||||
const breaks = fullInfo.values;
|
||||
const colourReqs = fullInfo.values || [];
|
||||
const colourReqs = fullInfo.values.bonuses || [];
|
||||
|
||||
const thresholdEl = colourReqs.map((c, i) => {
|
||||
const numIcons = Math.max(...breaks);
|
||||
const dots = range(0, numIcons).map(j => {
|
||||
const unmet = teamColours[c] < j + 1;
|
||||
const caption = breaks.includes(j + 1)
|
||||
? '+ x'
|
||||
: '';
|
||||
const thresholds = colourReqs.map((bonus, i) => {
|
||||
const colours = ['red', 'green', 'blue'];
|
||||
const colourGoals = colours.map(c => {
|
||||
const colourReq = bonus.req[c];
|
||||
if (colourReqs === 0) return false;
|
||||
|
||||
const reqClass = unmet
|
||||
? 'unmet'
|
||||
: '';
|
||||
const start = i === 0
|
||||
? 0
|
||||
: colourReqs[i - 1].req[c];
|
||||
|
||||
const dots = range(start, colourReq).map(j => {
|
||||
const unmet = teamColours[c] < j + 1;
|
||||
|
||||
const reqClass = unmet
|
||||
? 'unmet'
|
||||
: '';
|
||||
|
||||
return (
|
||||
<figure key={j} alt={c.colour} className={reqClass} >
|
||||
{COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
|
||||
</figure>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<figure key={j} alt={c.colour} className={reqClass} >
|
||||
{COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
|
||||
<figcaption>{caption}</figcaption>
|
||||
</figure>
|
||||
<div key={c}>
|
||||
{dots}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
|
||||
|
||||
const reqClass = reqsMet
|
||||
? ''
|
||||
: 'unmet';
|
||||
|
||||
return (
|
||||
<div key={i} className="spec-goals">
|
||||
{dots}
|
||||
<div key={i} className="spec-goal">
|
||||
<div className="colour-reqs">
|
||||
{colourGoals}
|
||||
</div>
|
||||
<div className={reqClass}>
|
||||
+ {bonus.bonus}
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -78,7 +101,7 @@ function InfoComponent(args) {
|
||||
<h2>{info}</h2>
|
||||
<div>{fullInfo.description}</div>
|
||||
<div className="thresholds">
|
||||
{thresholdEl}
|
||||
{thresholds}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,7 +3,7 @@ const preact = require('preact');
|
||||
const range = require('lodash/range');
|
||||
|
||||
const shapes = require('./shapes');
|
||||
const { SPECS, STATS, instanceConstruct } = require('../utils');
|
||||
const { STATS, instanceConstruct } = require('../utils');
|
||||
const actions = require('../actions');
|
||||
|
||||
const addState = connect(
|
||||
@ -152,6 +152,8 @@ function Construct(props) {
|
||||
);
|
||||
}
|
||||
|
||||
const specInfo = itemInfo.items.find(i => i.item === s);
|
||||
|
||||
function specClick(e) {
|
||||
e.stopPropagation();
|
||||
setItemUnequip(s);
|
||||
@ -174,8 +176,8 @@ function Construct(props) {
|
||||
onClick={specClick}
|
||||
onDblClick={specDblClick}
|
||||
onMouseOver={e => hoverInfo(e, s)} >
|
||||
{SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
|
||||
<figcaption>{SPECS[s].caption}</figcaption>
|
||||
{shapes[specInfo.values.shape.toLowerCase()](`stat-icon ${specInfo.values.colour}`)}
|
||||
<figcaption>{s}</figcaption>
|
||||
</figure>
|
||||
);
|
||||
});
|
||||
|
||||
@ -64,9 +64,11 @@ function Equipment(props) {
|
||||
const isSkill = fullInfo && fullInfo.skill;
|
||||
const isSpec = fullInfo && fullInfo.spec;
|
||||
|
||||
console.log('isSkill', isSkill, fullInfo);
|
||||
|
||||
function skillClick(e, i) {
|
||||
if (itemUnequip && activeConstruct) return false;
|
||||
const value = vbox.bound[i];
|
||||
// const value = vbox.bound[i];
|
||||
setItemEquip(i);
|
||||
return false;
|
||||
}
|
||||
@ -87,31 +89,31 @@ function Equipment(props) {
|
||||
const skillClass = isSkill ? 'skills highlight' : 'skills';
|
||||
const specClass = isSpec ? 'specs highlight' : 'specs';
|
||||
|
||||
const skillList = itemInfo.items.filter(v => v.skill).map(v => v.item);
|
||||
const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
|
||||
|
||||
const skills = range(0, 9).map(i => {
|
||||
const item = convertItem(vbox.bound[i]);
|
||||
if (skillList.includes(item)) {
|
||||
const skillInfo = itemInfo.items.find(i => i.item === item);
|
||||
if (skillInfo && skillInfo.skill) {
|
||||
return (
|
||||
<button key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)}>
|
||||
{item}
|
||||
</button>
|
||||
);
|
||||
} return false;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
const specs = range(0, 9).map(i => {
|
||||
const item = convertItem(vbox.bound[i]);
|
||||
const fullInfo = itemInfo.items.find(i => i.item === item);
|
||||
if (fullInfo.spec) {
|
||||
const specInfo = itemInfo.items.find(i => i.item === item);
|
||||
if (specInfo && specInfo.spec) {
|
||||
return (
|
||||
<figure key={i} onClick={e => skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} >
|
||||
{shapes[fullInfo.values.shape.toLowerCase()](`stat-icon ${itemInfo[item].colour}`)}
|
||||
{shapes[specInfo.values.shape.toLowerCase()](`stat-icon ${specInfo.values.colour}`)}
|
||||
<figcaption>{item}</figcaption>
|
||||
</figure>
|
||||
);
|
||||
} return false;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
if (skills.every(s => !s)) skills.push(<button disabled={true}> </button>);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user