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

don't double up combo highlight check and make backgrounds so you can always see colours

Browse Source
This commit is contained in:
ntr 2019-10-16 16:16:17 +11:00
parent 62aa801692
commit f167ff82bb
3 changed files with 71 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/assets/styles/colours.less
View File

@ -82,7 +82,7 @@ svg {
animation: bg 2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite alternate;
}
.combo-border {
.combo-border:not(.highlight) {
animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate;
}
@ -115,10 +115,10 @@ svg {
@keyframes co {
from {
border-color: @white;
background: @black;
}
to {
border-color: @gray-box;
background: @gray-exists;
}
}

54
client/src/components/buttons.jsx
View File

@ -35,4 +35,58 @@ module.exports = { // This will need to be edited if we change server recipes
Decay: () => 'blue-green-border',
Invert: () => 'red-blue-border',
// // Lifes Upgrades
// LifeGG: () => 'green-border',
// LifeRR: () => 'red-border',
// LifeBB:() => 'blue-border',
// LifeRG: () => 'red-green-border',
// LifeGB: () => 'green-blue-border',
// LifeRB:() => 'red-blue-border',
// LifeRRPlus: () => 'red-border',
// LifeBBPlus:() => 'blue-border',
// LifeRGPlus: () => 'red-green-border',
// LifeGBPlus: () => 'green-blue-border',
// LifeRBPlus:() => 'red-blue-border',
// LifeGGPlusPlus: () => 'green-border',
// LifeRRPlusPlus: () => 'red-border',
// LifeBBPlusPlus:() => 'blue-border',
// LifeRGPlusPlus: () => 'red-green-border',
// LifeGBPlusPlus: () => 'green-blue-border',
// LifeRBPlusPlus:() => 'red-blue-border',
// // Powers Upgrades
// PowerGG: () => 'green-border',
// PowerRR: () => 'red-border',
// PowerBB:() => 'blue-border',
// PowerRG: () => 'red-green-border',
// PowerGB: () => 'green-blue-border',
// PowerRB:() => 'red-blue-border',
// PowerRRPlus: () => 'red-border',
// PowerBBPlus:() => 'blue-border',
// PowerRGPlus: () => 'red-green-border',
// PowerGBPlus: () => 'green-blue-border',
// PowerRBPlus:() => 'red-blue-border',
// PowerGGPlusPlus: () => 'green-border',
// PowerRRPlusPlus: () => 'red-border',
// PowerBBPlusPlus:() => 'blue-border',
// PowerRGPlusPlus: () => 'red-green-border',
// PowerGBPlusPlus: () => 'green-blue-border',
// PowerRBPlusPlus:() => 'red-blue-border',
// // Speeds Upgrades
// SpeedGG: () => 'green-border',
// SpeedRR: () => 'red-border',
// SpeedBB: () => 'blue-border',
// SpeedRG: () => 'red-green-border',
// SpeedGB: () => 'green-blue-border',
// SpeedRB: () => 'red-blue-border',
// SpeedRRPlus: () => 'red-border',
// SpeedBBPlus: () => 'blue-border',
// SpeedRGPlus: () => 'red-green-border',
// SpeedGBPlus: () => 'green-blue-border',
// SpeedRBPlus: () => 'red-blue-border',
// SpeedGGPlusPlus: () => 'green-border',
// SpeedRRPlusPlus: () => 'red-border',
// SpeedBBPlusPlus: () => 'blue-border',
// SpeedRGPlusPlus: () => 'red-green-border',
// SpeedGBPlusPlus: () => 'green-blue-border',
// SpeedRBPlusPlus: () => 'red-blue-border',
};

38
client/src/components/vbox.component.jsx
View File

@ -247,6 +247,19 @@ function Vbox(args) {
return <button disabled={!inventoryHighlight} class={inventoryHighlight ? 'receiving' : 'empty'} >&nbsp;</button>;
}
const combinerItems = combiner.map(j => vbox.bound[j]);
const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => {
if (combo.components.includes(v) && combinerItems.every(c => combo.components.includes(c))) {
return combinerItems.every(c => {
if (c !== v) return true;
const comboCount = countBy(combo.components, co => co);
const combinerCounts = countBy(combinerItems, co => co);
if (comboCount[c] > combinerCounts[c]) return true;
return false;
});
} return false;
}) ? 'combo-border' : '';
function onClick(e) {
if (vboxSelecting) clearVboxSelected();
if (reclaiming) return sendVboxReclaim(i);
@ -266,36 +279,13 @@ function Vbox(args) {
const combinerItems = combiner.map(j => vbox.bound[j]);
const combinerCounts = countBy(combinerItems, c => c);
// unless some combo
// contains every combinerItems
// and combinerItems.count of item >= components.count(item)
if (!itemInfo.combos
.some(combo => {
const comboCount = countBy(combo.components, c => c);
return combinerItems.every(c =>
combo.components.includes(c) && comboCount[c] >= combinerCounts[c]
);
})) {
if (!comboHighlight) {
return combinerChange([i]);
}
return combinerChange(combiner);
}
const combinerItems = combiner.map(j => vbox.bound[j]);
const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => {
if (combo.components.includes(v) && combinerItems.every(c => combo.components.includes(c))) {
return combinerItems.every(c => {
if (c !== v) return true;
const comboCount = countBy(combo.components, co => co);
const combinerCounts = countBy(combinerItems, co => co);
if (comboCount[c] > combinerCounts[c]) return true;
return false;
});
} return false;
}) ? 'combo-border' : '';
const highlighted = combiner.indexOf(i) > -1;
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;