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,37 +63,39 @@ export class HUDGameMenu extends BaseHUDPart {
          * }>} */
         this.visibilityToUpdate = [];
 
-        buttons.forEach(({ id, label, handler, keybinding, badge, notification, visible }) => {
+        buttons.forEach(
-            const button = document.createElement("button");
+            ({ id, label, handler, keybinding, badge, notification, visible, domAttachSettings }) => {
-            button.classList.add(id);
+                const button = document.createElement("button");
-            this.element.appendChild(button);
+                button.classList.add(id);
-            this.trackClicks(button, handler);
+                this.element.appendChild(button);
+                this.trackClicks(button, handler);
 
-            if (keybinding) {
+                if (keybinding) {
-                const binding = this.root.keyMapper.getBinding(keybinding);
+                    const binding = this.root.keyMapper.getBinding(keybinding);
-                binding.add(handler);
+                    binding.add(handler);
-            }
+                }
 
-            if (visible) {
+                if (visible) {
-                this.visibilityToUpdate.push({
+                    this.visibilityToUpdate.push({
-                    button,
+                        button,
-                    condition: visible,
+                        condition: visible,
-                    domAttach: new DynamicDomAttach(this.root, button),
+                        domAttach: new DynamicDomAttach(this.root, button, domAttachSettings),
-                });
+                    });
-            }
+                }
 
-            if (badge) {
+                if (badge) {
-                const badgeElement = makeDiv(button, null, ["badge"]);
+                    const badgeElement = makeDiv(button, null, ["badge"]);
-                this.badgesToUpdate.push({
+                    this.badgesToUpdate.push({
-                    badge,
+                        badge,
-                    lastRenderAmount: 0,
+                        lastRenderAmount: 0,
-                    button,
+                        button,
-                    badgeElement,
+                        badgeElement,
-                    notification,
+                        notification,
-                    condition: visible,
+                        condition: visible,
-                });
+                    });
+                }
             }
-        });
+        );
 
         this.saveButton = makeDiv(this.element, null, ["button", "save", "animEven"]);
         this.settingsButton = makeDiv(this.element, null, ["button", "settings"]);