Fixed achievement ingame empty space

src/css/ingame_hud/game_menu.scss

@@ -8,6 +8,10 @@
 
     backdrop-filter: blur(D(1px));
 
+    .stats ~ .achievements {
+        grid-column: 1;
+    }
+
     > button,
     > .button {
         @include PlainText;
@@ -38,7 +42,7 @@
         @include DarkThemeInvert;
 
         &.achievements {
-            grid-column: 1;
+            grid-column: 3;
             & {
                 /* @load-async */
                 background-image: uiResource("icons/achievements.png");

src/js/game/hud/dynamic_dom_attach.js

@@ -18,8 +18,13 @@ export class DynamicDomAttach {
      * @param {string=} param2.attachClass If set, attaches a class while the element is visible
      * @param {boolean=} param2.trackHover If set, attaches the 'hovered' class if the cursor is above the element. Useful
      *                                     for fading out the element if its below the cursor for example.
+     * @param {boolean=} param2.prepend If set, adds the element before other childs
      */
-    constructor(root, element, { timeToKeepSeconds = 0, attachClass = null, trackHover = false } = {}) {
+    constructor(
+        root,
+        element,
+        { timeToKeepSeconds = 0, attachClass = null, trackHover = false, prepend = false } = {}
+    ) {
         /** @type {GameRoot} */
         this.root = root;
 
@@ -34,6 +39,8 @@ export class DynamicDomAttach {
         this.timeToKeepSeconds = timeToKeepSeconds;
         this.lastVisibleTime = 0;
 
+        this.prepend = prepend;
+
         // We start attached, so detach the node first
         this.attached = true;
         this.internalDetach();
@@ -55,7 +62,8 @@ export class DynamicDomAttach {
      */
     internalAttach() {
         if (!this.attached) {
-            this.parent.appendChild(this.element);
+            if (this.prepend) this.parent.insertBefore(this.element, this.parent.firstChild);
+            else this.parent.appendChild(this.element);
             assert(this.element.parentElement === this.parent, "Invalid parent #1");
             this.attached = true;
         }

src/js/game/hud/parts/game_menu.js

@@ -25,6 +25,7 @@ export class HUDGameMenu extends BaseHUDPart {
                 ]),
                 visible: () =>
                     !this.root.app.settings.getAllSettings().offerHints || this.root.hubGoals.level >= 3,
+                domAttachSettings: {},
             },
             {
                 id: "stats",
@@ -33,6 +34,7 @@ export class HUDGameMenu extends BaseHUDPart {
                 keybinding: KEYMAPPINGS.ingame.menuOpenStats,
                 visible: () =>
                     !this.root.app.settings.getAllSettings().offerHints || this.root.hubGoals.level >= 3,
+                domAttachSettings: { prepend: true },
             },
             {
                 id: "achievements",
@@ -40,6 +42,7 @@ export class HUDGameMenu extends BaseHUDPart {
                 handler: () => this.root.hud.parts.achievements.show(),
                 keybinding: KEYMAPPINGS.ingame.menuOpenAchievements,
                 visible: () => !(this.root.achievementProxy.provider instanceof NoAchievementProvider),
+                domAttachSettings: {},
             },
         ];
 
@@ -60,7 +63,8 @@ export class HUDGameMenu extends BaseHUDPart {
          * }>} */
         this.visibilityToUpdate = [];
 
-        buttons.forEach(({ id, label, handler, keybinding, badge, notification, visible }) => {
+        buttons.forEach(
+            ({ id, label, handler, keybinding, badge, notification, visible, domAttachSettings }) => {
                 const button = document.createElement("button");
                 button.classList.add(id);
                 this.element.appendChild(button);
@@ -75,7 +79,7 @@ export class HUDGameMenu extends BaseHUDPart {
                     this.visibilityToUpdate.push({
                         button,
                         condition: visible,
-                    domAttach: new DynamicDomAttach(this.root, button),
+                        domAttach: new DynamicDomAttach(this.root, button, domAttachSettings),
                     });
                 }
 
@@ -90,7 +94,8 @@ export class HUDGameMenu extends BaseHUDPart {
                         condition: visible,
                     });
                 }
-        });
+            }
+        );
 
         this.saveButton = makeDiv(this.element, null, ["button", "save", "animEven"]);
         this.settingsButton = makeDiv(this.element, null, ["button", "settings"]);