From e9581c653f91e2101426df45b99051052bd33088 Mon Sep 17 00:00:00 2001
From: tobspr <tobias.springer1@googlemail.com>
Date: Mon, 22 Jun 2020 14:55:43 +0200
Subject: [PATCH] Fix main menu rendering

---
 src/css/states/main_menu.scss |  6 ++++++
 src/js/states/main_menu.js    | 31 +++++++++++++------------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss
index fa9d430c..7812de62 100644
--- a/src/css/states/main_menu.scss
+++ b/src/css/states/main_menu.scss
@@ -224,6 +224,12 @@
         width: 100%;
         box-sizing: border-box;
 
+        .buttons {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
         .browserWarning {
             @include S(margin-bottom, 10px);
             background-color: $colorRedBright;
diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js
index 8665b80e..29677686 100644
--- a/src/js/states/main_menu.js
+++ b/src/js/states/main_menu.js
@@ -9,6 +9,7 @@ import {
     waitNextFrame,
     isSupportedBrowser,
     makeButton,
+    removeAllChildren,
 } from "../core/utils";
 import { ReadWriteProxy } from "../core/read_write_proxy";
 import { HUDModalDialogs } from "../game/hud/parts/modal_dialogs";
@@ -72,6 +73,7 @@ export class MainMenuState extends GameState {
                             ? ""
                             : `<div class="browserWarning">${T.mainMenu.browserWarning}</div>`
                     }
+                    <div class="buttons"></div>
                 </div>
 
 
@@ -148,6 +150,7 @@ export class MainMenuState extends GameState {
                                     T.dialogs.importSavegameSuccess.text
                                 );
 
+                                this.renderMainMenu();
                                 this.renderSavegames();
                             },
                             err => {
@@ -255,6 +258,10 @@ export class MainMenuState extends GameState {
     }
 
     renderMainMenu() {
+        const buttonContainer = this.htmlElement.querySelector(".mainContainer .buttons");
+        removeAllChildren(buttonContainer);
+
+        // Import button
         const importButtonElement = makeButtonElement(
             ["importButton", "styledButton"],
             T.mainMenu.importSavegame
@@ -262,14 +269,15 @@ export class MainMenuState extends GameState {
         this.trackClicks(importButtonElement, this.requestImportSavegame);
 
         if (this.savedGames.length > 0) {
+            // Continue game
             const continueButton = makeButton(
-                this.htmlElement.querySelector(".mainContainer"),
+                buttonContainer,
                 ["continueButton", "styledButton"],
                 T.mainMenu.continue
             );
             this.trackClicks(continueButton, this.onContinueButtonClicked);
 
-            const outerDiv = makeDiv(this.htmlElement.querySelector(".mainContainer"), null, ["outer"], null);
+            const outerDiv = makeDiv(buttonContainer, null, ["outer"], null);
             outerDiv.appendChild(importButtonElement);
             const newGameButton = makeButton(
                 this.htmlElement.querySelector(".mainContainer .outer"),
@@ -277,24 +285,11 @@ export class MainMenuState extends GameState {
                 T.mainMenu.newGame
             );
             this.trackClicks(newGameButton, this.onPlayButtonClicked);
-
-            const oldPlayButton = this.htmlElement.querySelector(".mainContainer .playButton");
-            if (oldPlayButton) oldPlayButton.remove();
         } else {
-            const playBtn = makeButton(
-                this.htmlElement.querySelector(".mainContainer"),
-                ["playButton", "styledButton"],
-                T.mainMenu.play
-            );
+            // New game
+            const playBtn = makeButton(buttonContainer, ["playButton", "styledButton"], T.mainMenu.play);
             this.trackClicks(playBtn, this.onPlayButtonClicked);
-
-            this.htmlElement.querySelector(".mainContainer").appendChild(importButtonElement);
-
-            const outerDiv = this.htmlElement.querySelector(".mainContainer .outer");
-            if (outerDiv) {
-                outerDiv.remove();
-                this.htmlElement.querySelector(".mainContainer .continueButton").remove();
-            }
+            buttonContainer.appendChild(importButtonElement);
         }
     }