fade invalid combo selections

This commit is contained in:
Mashy 2019-11-24 11:51:02 +10:00
parent 024637c65d
commit 1b760a2893
3 changed files with 14 additions and 9 deletions

View File

@ -134,11 +134,14 @@
width: 100%;
// text-transform: none;
&.empty {
border-style: dashed;
}
&.fade {
opacity: 0.4;
}
&.highlight {
color: black;
background: @white;

View File

@ -44,7 +44,7 @@ function stashElement(props) {
class={stashHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
}
const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
function onClick(type) {
const combinerContainsIndex = stashSelect.indexOf(i) > -1;
@ -56,7 +56,7 @@ function stashElement(props) {
return true;
}
if (!comboHighlight) {
if (notValidCombo) {
setInfo(vbox.bound[i]);
return setVboxSelected({ storeSelect: [], stashSelect: [i] });
}
@ -68,7 +68,9 @@ function stashElement(props) {
const highlighted = stashSelect.indexOf(i) > -1;
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
const classes = highlighted
? 'highlight'
: `${border} ${notValidCombo ? 'fade' : ''}`;
const invObject = shapes[v] ? shapes[v]() : v;

View File

@ -7,7 +7,6 @@ const shapes = require('./shapes');
function storeElement(props) {
const {
clearVboxSelected,
setInfo,
setVboxSelected,
storeSelect,
stashSelect,
@ -20,11 +19,10 @@ function storeElement(props) {
if (!v) return <button disabled class='empty' key={(group * 10) + index} >&nbsp;</button>;
const selected = storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index);
const comboHighlight = vboxHighlight && vboxHighlight.includes(v) ? 'combo-border' : '';
const notValidCombo = vboxHighlight && !vboxHighlight.includes(v);
function onClick(e) {
e.stopPropagation();
if (!comboHighlight) setInfo(vbox.free[group][index]);
if (storeSelect.length && storeSelect.some(vs => vs[0] === group && vs[1] === index)) {
return setVboxSelected(
{ storeSelect: storeSelect.filter(vs => !(vs[0] === group && vs[1] === index)), stashSelect }
@ -34,14 +32,16 @@ function storeElement(props) {
if (!storeSelect.length && !stashSelect.length) {
return setVboxSelected({ storeSelect: [[group, index]], stashSelect });
}
if (comboHighlight !== 'combo-border') {
if (notValidCombo) {
return setVboxSelected({ storeSelect: [[group, index]], stashSelect: [] });
}
return setVboxSelected({ storeSelect: [...storeSelect, [group, index]], stashSelect });
}
const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
const classes = selected
? `${v.toLowerCase()} highlight`
: `${v.toLowerCase()} ${notValidCombo ? 'fade' : ''}`;
const vboxObject = shapes[v] ? shapes[v]() : v;
const disabled = vbox.bits <= group;