From f167ff82bb583c3b0073c3146d567607fdfa03b1 Mon Sep 17 00:00:00 2001 From: ntr Date: Wed, 16 Oct 2019 16:16:17 +1100 Subject: [PATCH] don't double up combo highlight check and make backgrounds so you can always see colours --- client/assets/styles/colours.less | 6 +-- client/src/components/buttons.jsx | 54 ++++++++++++++++++++++++ client/src/components/vbox.component.jsx | 38 ++++++----------- 3 files changed, 71 insertions(+), 27 deletions(-) diff --git a/client/assets/styles/colours.less b/client/assets/styles/colours.less index 497e5161..a2e5ac88 100644 --- a/client/assets/styles/colours.less +++ b/client/assets/styles/colours.less @@ -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; } } diff --git a/client/src/components/buttons.jsx b/client/src/components/buttons.jsx index 4425e93f..c2f72b15 100644 --- a/client/src/components/buttons.jsx +++ b/client/src/components/buttons.jsx @@ -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', }; diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 115a542b..3257c87b 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -247,6 +247,19 @@ function Vbox(args) { return ; } + 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}`;