Skip to content
Permalink
Browse files

Merge pull request #485 from lusbenjamin/inclusive-color-filter

Inclusive Color Filter Option
  • Loading branch information...
Manuel-777 committed Jul 21, 2019
2 parents 94fda9a + cb4a8c9 commit 64b633b2232ec10dfad65aa5e9d5797580bac7c2
Showing with 82 additions and 67 deletions.
  1. +12 −13 window_main/aggregator.js
  2. +62 −54 window_main/filter-panel.js
  3. +8 −0 window_main/index.css
@@ -67,7 +67,7 @@ class Aggregator {
static getDefaultColorFilter() {
const colorFilters = {};
COLORS_BRIEF.forEach(code => (colorFilters[code] = false));
return { ...colorFilters };
return { ...colorFilters, multi: true };
}

static getDefaultFilters() {
@@ -142,23 +142,21 @@ class Aggregator {
_filterDeckByColors(deck, _colors) {
if (!deck) return true;

// All decks pass when no colors are selected
if (Object.values(_colors).every(val => val === false)) return true;

// Normalize deck colors into matching data format
let deckColorCodes = Aggregator.getDefaultColorFilter();
const deckColorCodes = Aggregator.getDefaultColorFilter();
if (deck.colors instanceof Array) {
deck.colors.forEach(i => (deckColorCodes[COLORS_ALL[i - 1]] = true));
} else if (deck.colors instanceof Object) {
deckColorCodes = deck.colors;
}

// If at least one color is selected, deck must match exactly
for (const code in _colors) {
if (_colors[code] !== deckColorCodes[code]) return false;
Object.assign(deckColorCodes, deck.colors);
}

return true;
return Object.entries(_colors).every(([color, value]) => {
if (color === "multi") return true;
if (!_colors.multi || value) {
return deckColorCodes[color] === value;
}
return true;
});
}

filterDeck(deck) {
@@ -226,7 +224,8 @@ class Aggregator {

if (
match.type === "draft" &&
(arch !== DEFAULT_ARCH || Object.values(oppColors).some(color => color))
(arch !== DEFAULT_ARCH ||
(Object.values(oppColors).some(color => color) && !oppColors.multi))
)
return false;

@@ -176,6 +176,66 @@ class FilterPanel {
}
container.appendChild(columnA);

const filterLabels = {
w: "White",
u: "Blue",
b: "Black",
r: "Red",
g: "Green",
multi: "Allow unselected colors"
};
const renderManaFilter = (filterKey, cont) => {
const colors = this.filters[filterKey];
const manas = createDiv([this.prefixId + "_query_mana"]);
manas.style.display = "flex";
manas.style.margin = "8px";
manas.style.width = "150px";
manas.style.height = "32px";
COLORS_BRIEF.forEach(code => {
const filterClasses = ["mana_filter"];
if (!colors[code]) {
filterClasses.push("mana_filter_on");
}
const manabutton = createDiv(filterClasses, "", {
title: filterLabels[code]
});
manabutton.style.backgroundImage = `url(../images/${code}20.png)`;
manabutton.style.width = "30px";
manabutton.addEventListener("click", () => {
if (manabutton.classList.contains("mana_filter_on")) {
manabutton.classList.remove("mana_filter_on");
colors[code] = true;
} else {
manabutton.classList.add("mana_filter_on");
colors[code] = false;
}
this.onFilterChange({ [filterKey]: colors }, this.filters);
});
manas.appendChild(manabutton);
});
const code = "multi";
const filterClasses = ["mana_filter", "icon_search_inclusive"];
if (!colors[code]) {
filterClasses.push("mana_filter_on");
}
const manabutton = createDiv(filterClasses, "", {
title: filterLabels[code]
});
manabutton.style.width = "30px";
manabutton.addEventListener("click", () => {
if (manabutton.classList.contains("mana_filter_on")) {
manabutton.classList.remove("mana_filter_on");
colors[code] = true;
} else {
manabutton.classList.add("mana_filter_on");
colors[code] = false;
}
this.onFilterChange({ [filterKey]: colors }, this.filters);
});
manas.appendChild(manabutton);
cont.appendChild(manas);
};

const showColumnB = this.tags.length || this.showManaFilter;
if (showColumnB) {
const columnB = createDiv([]);
@@ -225,33 +285,7 @@ class FilterPanel {
}

if (this.showManaFilter) {
const manas = createDiv([this.prefixId + "_query_mana"]);
manas.style.display = "flex";
manas.style.margin = "8px";
manas.style.width = "150px";
manas.style.height = "32px";
COLORS_BRIEF.forEach(code => {
const filterClasses = ["mana_filter"];
if (!this.filters.colors[code]) {
filterClasses.push("mana_filter_on");
}
var manabutton = createDiv(filterClasses);
manabutton.style.backgroundImage = `url(../images/${code}20.png)`;
manabutton.style.width = "30px";
manabutton.addEventListener("click", () => {
if (manabutton.classList.contains("mana_filter_on")) {
manabutton.classList.remove("mana_filter_on");
this.filters.colors[code] = true;
} else {
manabutton.classList.add("mana_filter_on");
this.filters.colors[code] = false;
}
const colors = this.filters.colors;
this.onFilterChange({ colors }, this.filters);
});
manas.appendChild(manabutton);
});
columnB.appendChild(manas);
renderManaFilter("colors", columnB);
}
container.appendChild(columnB);
}
@@ -277,33 +311,7 @@ class FilterPanel {
}

if (this.showOppManaFilter) {
const manas = createDiv([this.prefixId + "_query_mana"]);
manas.style.display = "flex";
manas.style.margin = "8px";
manas.style.width = "150px";
manas.style.height = "32px";
COLORS_BRIEF.forEach(code => {
const filterClasses = ["mana_filter"];
if (!this.filters.oppColors[code]) {
filterClasses.push("mana_filter_on");
}
var manabutton = createDiv(filterClasses);
manabutton.style.backgroundImage = `url(../images/${code}20.png)`;
manabutton.style.width = "30px";
manabutton.addEventListener("click", () => {
if (manabutton.classList.contains("mana_filter_on")) {
manabutton.classList.remove("mana_filter_on");
this.filters.oppColors[code] = true;
} else {
manabutton.classList.add("mana_filter_on");
this.filters.oppColors[code] = false;
}
const oppColors = this.filters.oppColors;
this.onFilterChange({ oppColors }, this.filters);
});
manas.appendChild(manabutton);
});
columnC.appendChild(manas);
renderManaFilter("oppColors", columnC);
}
container.appendChild(columnC);
} else {
@@ -1306,6 +1306,14 @@ a:hover {
background: center no-repeat url('../images/filter_multi.png');
}

.icon_search_inclusive {
display: -webkit-inline-box;
width: 20px;
margin-right: 16px;
height: 20px;
background: center no-repeat url('../images/create.png');
}

.wc_search_icon {
width: 24px;
height: 20px;

0 comments on commit 64b633b

Please sign in to comment.
You can’t perform that action at this time.