Skip to content
Permalink
Browse files

add custom sort options to decks page

  • Loading branch information...
lusbenjamin committed Jul 19, 2019
1 parent d0b4893 commit 5ff7fb566139de9c84e656e5008fb29d085719ee
Showing with 85 additions and 5 deletions.
  1. +46 −1 window_main/aggregator.js
  2. +8 −2 window_main/decks.js
  3. +31 −2 window_main/filter-panel.js
@@ -47,6 +47,8 @@ class Aggregator {
this.updateFilters = this.updateFilters.bind(this);
this._processMatch = this._processMatch.bind(this);
this.compareDecks = this.compareDecks.bind(this);
this.compareDecksByWins = this.compareDecksByWins.bind(this);
this.compareDecksByWinrates = this.compareDecksByWinrates.bind(this);
this.compareEvents = this.compareEvents.bind(this);
this.updateFilters(filters);
}
@@ -80,7 +82,8 @@ class Aggregator {
arch: DEFAULT_ARCH,
oppColors: Aggregator.getDefaultColorFilter(),
date: pd.settings.last_date_filter,
showArchived: false
showArchived: false,
sort: "By Date"
};
}

@@ -434,6 +437,48 @@ class Aggregator {
return 0;
}

compareDecksByWins(a, b) {
const aStats = {
...Aggregator.getDefaultStats(),
winrate: 0,
...this.deckStats[a.id]
};
const bStats = {
...Aggregator.getDefaultStats(),
winrate: 0,
...this.deckStats[b.id]
};
const aName = getRecentDeckName(a.id);
const bName = getRecentDeckName(b.id);

return (
bStats.wins - aStats.wins ||
bStats.winrate - aStats.winrate ||
aName.localeCompare(bName)
);
}

compareDecksByWinrates(a, b) {
const aStats = {
...Aggregator.getDefaultStats(),
winrate: 0,
...this.deckStats[a.id]
};
const bStats = {
...Aggregator.getDefaultStats(),
winrate: 0,
...this.deckStats[b.id]
};
const aName = getRecentDeckName(a.id);
const bName = getRecentDeckName(b.id);

return (
bStats.winrate - aStats.winrate ||
bStats.wins - aStats.wins ||
aName.localeCompare(bName)
);
}

compareEvents(a, b) {
const aDate = this.eventLastPlayed[a];
const bDate = this.eventLastPlayed[b];
@@ -52,7 +52,6 @@ function setFilters(selected = {}) {
//
function openDecksTab(_filters = {}, scrollTop = 0) {
hideLoadingBars();
const ls = getLocalState();
const mainDiv = resetMainContainer();
mainDiv.classList.add("flex_item");
setFilters(_filters);
@@ -103,13 +102,20 @@ function openDecksTab(_filters = {}, scrollTop = 0) {
[],
false,
null,
true,
true
);
decksTop.appendChild(filterPanel.render());
wrap_l.appendChild(decksTop);

const decks = [...pd.deckList];
decks.sort(aggregator.compareDecks);
if (filters.sort === "By Winrate") {
decks.sort(aggregator.compareDecksByWinrates);
} else if (filters.sort === "By Wins") {
decks.sort(aggregator.compareDecksByWins);
} else {
decks.sort(aggregator.compareDecks);
}

const isDeckVisible = deck =>
aggregator.filterDeck(deck) &&
@@ -7,7 +7,7 @@ const {
DATE_SEASON
} = require("../shared/constants");
const pd = require("../shared/player-data");
const { createDiv } = require("../shared/dom-fns");
const { createDiv, createLabel } = require("../shared/dom-fns");
const { createSelect } = require("../shared/select");
const {
getReadableEvent,
@@ -36,7 +36,8 @@ class FilterPanel {
archs,
showOppManaFilter,
archCounts,
showArchivedFilter
showArchivedFilter,
showSortOption
) {
this.prefixId = prefixId;
this.onFilterChange = onFilterChange;
@@ -52,6 +53,7 @@ class FilterPanel {
this.showOppManaFilter = showOppManaFilter || false;
this.archCounts = archCounts || {};
this.showArchivedFilter = showArchivedFilter || false;
this.showSortOption = showSortOption || false;
this.getTagString = this.getTagString.bind(this);
this.getDeckString = this.getDeckString.bind(this);
return this;
@@ -305,6 +307,33 @@ class FilterPanel {
});
columnC.appendChild(manas);
}
container.appendChild(columnC);
} else if (this.showSortOption) {
const columnC = createDiv([]);

const sortDiv = createDiv([]);
sortDiv.style.display = "flex";
const sortLabel = createLabel([], "Sort");
sortLabel.style.marginTop = "7px";
sortDiv.appendChild(sortLabel);
const sortSelect = createSelect(
sortDiv,
["By Date", "By Wins", "By Winrate"],
this.filters.sort,
filter => {
this.filters.sort = filter;
this.onFilterChange({ sort: filter }, this.filters);
},
this.prefixId + "_query_sort"
);
sortSelect.style.width = "150px";
sortSelect.style.marginBottom = "8px";
columnC.appendChild(sortDiv);

const spacer = createDiv(["select_container"]);
spacer.style.marginBottom = "8px";
columnC.appendChild(spacer);

container.appendChild(columnC);
} else {
// spacer

0 comments on commit 5ff7fb5

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