Add language chooser to main menu

src/css/icons.scss

@@ -21,3 +21,12 @@ $icons: notification_saved, notification_success, notification_upgrade;
         background-image: uiResource("res/ui/icons/#{$icon}.png") !important;
     }
 }
+
+$languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW, nb, mt-MT, ar, nl, vi, th,
+    hu, pl, ja;
+
+@each $language in $languages {
+    [data-languageicon="#{$language}"] {
+        background-image: uiResource("languages/#{$language}.svg") !important;
+    }
+}

src/css/states/main_menu.scss

@@ -7,25 +7,39 @@
     // background: #aaacb4 center center / cover !important;
     background: #bbc2cf center center / cover !important;
 
-    .settingsButton,
-    .exitAppButton {
+    .topButtons {
         position: absolute;
-        @include S(top, 30px);
-        @include S(right, 30px);
-        @include S(width, 35px);
-        @include S(height, 35px);
-        pointer-events: all;
-        cursor: pointer;
-        background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat;
-        transition: opacity 0.12s ease-in-out;
-        &:hover {
-            opacity: 0.9;
-        }
-    }
+        @include S(top, 20px);
+        @include S(right, 20px);
+        display: grid;
+        grid-auto-flow: column;
+        @include S(grid-gap, 15px);
 
-    .exitAppButton {
-        @include S(right, 100px);
-        background-image: uiResource("icons/main_menu_exit.png");
+        .settingsButton,
+        .exitAppButton,
+        .languageChoose {
+            @include S(width, 25px);
+            @include S(height, 25px);
+            pointer-events: all;
+            cursor: pointer;
+            background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat;
+            transition: opacity 0.12s ease-in-out;
+            @include IncreasedClickArea(2px);
+            &:hover {
+                opacity: 0.9;
+            }
+        }
+
+        .exitAppButton {
+            background-image: uiResource("icons/main_menu_exit.png");
+        }
+
+        .languageChoose {
+            @include S(border-radius, 8px);
+            border: solid #222428;
+            @include S(border-width, 2px);
+            background-size: cover;
+        }
     }
 
     .fullscreenBackgroundVideo {

src/js/states/main_menu.js

@@ -12,6 +12,8 @@ import { ReadWriteProxy } from "../core/read_write_proxy";
 import { HUDModalDialogs } from "../game/hud/parts/modal_dialogs";
 import { T } from "../translations";
 import { PlatformWrapperImplBrowser } from "../platform/browser/wrapper";
+import { getApplicationSettingById } from "../profile/application_settings";
+import { EnumSetting } from "../profile/setting_types";
 
 export class MainMenuState extends GameState {
     constructor() {
@@ -30,15 +32,18 @@ export class MainMenuState extends GameState {
         return (
             `
 
-            <button class="settingsButton"></button>
-            
-        ${
-            G_IS_STANDALONE
-                ? `
-            <button class="exitAppButton"></button>
-        `
-                : ""
-        }
+            <div class="topButtons">
+                <button class="languageChoose" data-languageicon="${this.app.settings.getLanguage()}"></button>
+                <button class="settingsButton"></button>
+
+            ${
+                G_IS_STANDALONE || G_IS_DEV
+                    ? `
+                <button class="exitAppButton"></button>
+            `
+                    : ""
+            }
+            </div>
 
             ${
                 G_IS_STANDALONE
@@ -100,14 +105,8 @@ export class MainMenuState extends GameState {
                 </a>
 
                 <a class="changelog">${T.changelog.title}</a>
-
-                ${
-                    !G_IS_STANDALONE &&
-                    this.app.platformWrapper instanceof PlatformWrapperImplBrowser &&
-                    this.app.platformWrapper.embedProvider.iogLink
-                        ? `<a class="iogLink" target="_blank" href="https://iogames.space">.io games</a>`
-                        : ""
-                }
+                
+                <a class="helpTranslate">${T.mainMenu.helpTranslate}</a>
 
                 <div class="author">Made by <a class="producerLink" target="_blank">Tobias Springer</a></div>
 
@@ -228,6 +227,7 @@ export class MainMenuState extends GameState {
 
         this.trackClicks(qs(".settingsButton"), this.onSettingsButtonClicked);
         this.trackClicks(qs(".changelog"), this.onChangelogClicked);
+        this.trackClicks(qs(".languageChoose"), this.onLanguageChooseClicked);
 
         const contestButton = qs(".participateContest");
         if (contestButton) {
@@ -290,6 +290,40 @@ export class MainMenuState extends GameState {
         );
     }
 
+    onLanguageChooseClicked() {
+        const setting = /** @type {EnumSetting} */ (getApplicationSettingById("language"));
+
+        const { optionSelected } = this.dialogs.showOptionChooser(T.settings.labels.language.title, {
+            active: this.app.settings.getLanguage(),
+            options: setting.options.map(option => ({
+                value: setting.valueGetter(option),
+                text: setting.textGetter(option),
+                desc: setting.descGetter(option),
+                iconPrefix: setting.iconPrefix,
+            })),
+        });
+
+        optionSelected.add(value => {
+            this.app.settings.updateLanguage(value);
+            if (setting.restartRequired) {
+                if (this.app.platformWrapper.getSupportsRestart()) {
+                    this.app.platformWrapper.performRestart();
+                } else {
+                    this.dialogs.showInfo(T.dialogs.restartRequired.title, T.dialogs.restartRequired.text, [
+                        "ok:good",
+                    ]);
+                }
+            }
+
+            if (setting.changeCb) {
+                setting.changeCb(this.app, value);
+            }
+
+            // Update current icon
+            this.htmlElement.querySelector("button.languageChoose").setAttribute("data-languageIcon", value);
+        }, this);
+    }
+
     renderSavegames() {
         const oldContainer = this.htmlElement.querySelector(".mainContainer .savegames");
         if (oldContainer) {