diff --git a/res/ui/icons/display_sorted.png b/res/ui/icons/display_sorted.png new file mode 100644 index 00000000..2e3c2bad Binary files /dev/null and b/res/ui/icons/display_sorted.png differ diff --git a/src/css/ingame_hud/statistics.scss b/src/css/ingame_hud/statistics.scss index e53a80d1..d98d82c2 100644 --- a/src/css/ingame_hud/statistics.scss +++ b/src/css/ingame_hud/statistics.scss @@ -22,12 +22,18 @@ @include S(margin-left, 1px); &.displayIcons, - &.displayDetailed { + &.displayDetailed, + &.displaySorted { background: uiResource("icons/display_list.png") center center / #{D(15px)} no-repeat; &.displayIcons { background-image: uiResource("icons/display_icons.png"); background-size: #{D(11.5px)}; } + &.displaySorted { + background-image: uiResource("icons/display_sorted.png"); + background-size: #{D(11.5px)}; + margin-right: 20px; + } } background-color: #44484a !important; @@ -109,6 +115,7 @@ .dialogInner { &[data-displaymode="detailed"] .displayDetailed, &[data-displaymode="icons"] .displayIcons, + &[data-sorted="true"] .displaySorted, &[data-datasource="produced"] .modeProduced, &[data-datasource="delivered"] .modeDelivered, &[data-datasource="stored"] .modeStored { diff --git a/src/js/game/hud/parts/statistics.js b/src/js/game/hud/parts/statistics.js index e15af4fb..ad8a68d1 100644 --- a/src/js/game/hud/parts/statistics.js +++ b/src/js/game/hud/parts/statistics.js @@ -47,9 +47,11 @@ export class HUDStatistics extends BaseHUDPart { this.trackClicks(button, () => this.setDataSource(dataSource)); } + const buttonDisplaySorted = makeButton(this.filtersDisplayMode, ["displaySorted"]); const buttonDisplayDetailed = makeButton(this.filtersDisplayMode, ["displayDetailed"]); const buttonDisplayIcons = makeButton(this.filtersDisplayMode, ["displayIcons"]); + this.trackClicks(buttonDisplaySorted, () => this.toggleSorted()); this.trackClicks(buttonDisplayIcons, () => this.setDisplayMode(enumDisplayMode.icons)); this.trackClicks(buttonDisplayDetailed, () => this.setDisplayMode(enumDisplayMode.detailed)); @@ -80,6 +82,21 @@ export class HUDStatistics extends BaseHUDPart { } } + /** + * @param {boolean} sorted + */ + setSorted(sorted) { + this.sorted = sorted; + this.dialogInner.setAttribute("data-sorted", sorted); + if (this.visible) { + this.rerenderFull(); + } + } + + toggleSorted() { + this.setSorted(!this.sorted); + } + initialize() { this.domAttach = new DynamicDomAttach(this.root, this.background, { attachClass: "visible", @@ -95,6 +112,7 @@ export class HUDStatistics extends BaseHUDPart { /** @type {Object.} */ this.activeHandles = {}; + this.setSorted(true); this.setDataSource(enumAnalyticsDataSource.produced); this.setDisplayMode(enumDisplayMode.detailed); @@ -183,7 +201,13 @@ export class HUDStatistics extends BaseHUDPart { } } - entries.sort((a, b) => b[1] - a[1]); + entries.sort((a, b) => { + // Sort by shape key for some consistency + if (!this.sorted || b[1] == a[1]) { + return b[0].localeCompare(a[0]); + } + return b[1] - a[1]; + }); let rendered = new Set();