Add button to toggle sortedness of the statistics screen (#590)

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 {

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.<string, HUDShapeStatisticsHandle>} */
         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();