diff --git a/res/ui/icons/main_menu_exit.png b/res/ui/icons/main_menu_exit.png index c1d3fb46..07a54c6c 100644 Binary files a/res/ui/icons/main_menu_exit.png and b/res/ui/icons/main_menu_exit.png differ diff --git a/res/ui/icons/main_menu_settings.png b/res/ui/icons/main_menu_settings.png index 8ce3aff4..eb99a2ef 100644 Binary files a/res/ui/icons/main_menu_settings.png and b/res/ui/icons/main_menu_settings.png differ diff --git a/res/ui/languages/ar.svg b/res/ui/languages/ar.svg new file mode 100644 index 00000000..9b682077 --- /dev/null +++ b/res/ui/languages/ar.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/cs.svg b/res/ui/languages/cs.svg new file mode 100644 index 00000000..653b342e --- /dev/null +++ b/res/ui/languages/cs.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/da.svg b/res/ui/languages/da.svg new file mode 100644 index 00000000..ea9d950a --- /dev/null +++ b/res/ui/languages/da.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/de.svg b/res/ui/languages/de.svg new file mode 100644 index 00000000..4585512c --- /dev/null +++ b/res/ui/languages/de.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/el.svg b/res/ui/languages/el.svg new file mode 100644 index 00000000..90f83f5e --- /dev/null +++ b/res/ui/languages/el.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/en.svg b/res/ui/languages/en.svg new file mode 100644 index 00000000..a0805a7d --- /dev/null +++ b/res/ui/languages/en.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/es-419.svg b/res/ui/languages/es-419.svg new file mode 100644 index 00000000..d894b258 --- /dev/null +++ b/res/ui/languages/es-419.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/et.svg b/res/ui/languages/et.svg new file mode 100644 index 00000000..63ae7dd8 --- /dev/null +++ b/res/ui/languages/et.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/fr.svg b/res/ui/languages/fr.svg new file mode 100644 index 00000000..632ffc1d --- /dev/null +++ b/res/ui/languages/fr.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/hu.svg b/res/ui/languages/hu.svg new file mode 100644 index 00000000..39298040 --- /dev/null +++ b/res/ui/languages/hu.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/it.svg b/res/ui/languages/it.svg new file mode 100644 index 00000000..a32bf996 --- /dev/null +++ b/res/ui/languages/it.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/ja.svg b/res/ui/languages/ja.svg new file mode 100644 index 00000000..6657b409 --- /dev/null +++ b/res/ui/languages/ja.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/mt-MT.svg b/res/ui/languages/mt-MT.svg new file mode 100644 index 00000000..59e6165a --- /dev/null +++ b/res/ui/languages/mt-MT.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/nb.svg b/res/ui/languages/nb.svg new file mode 100644 index 00000000..64d2fa5e --- /dev/null +++ b/res/ui/languages/nb.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/nl.svg b/res/ui/languages/nl.svg new file mode 100644 index 00000000..edd8b343 --- /dev/null +++ b/res/ui/languages/nl.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/pl.svg b/res/ui/languages/pl.svg new file mode 100644 index 00000000..b471827f --- /dev/null +++ b/res/ui/languages/pl.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/pt-BR.svg b/res/ui/languages/pt-BR.svg new file mode 100644 index 00000000..b1470d95 --- /dev/null +++ b/res/ui/languages/pt-BR.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/ru.svg b/res/ui/languages/ru.svg new file mode 100644 index 00000000..ecd327ac --- /dev/null +++ b/res/ui/languages/ru.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/sv.svg b/res/ui/languages/sv.svg new file mode 100644 index 00000000..3754ad8c --- /dev/null +++ b/res/ui/languages/sv.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/th.svg b/res/ui/languages/th.svg new file mode 100644 index 00000000..93a280b1 --- /dev/null +++ b/res/ui/languages/th.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/tr.svg b/res/ui/languages/tr.svg new file mode 100644 index 00000000..15d06a67 --- /dev/null +++ b/res/ui/languages/tr.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/uk.svg b/res/ui/languages/uk.svg new file mode 100644 index 00000000..4d7db7f1 --- /dev/null +++ b/res/ui/languages/uk.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/vi.svg b/res/ui/languages/vi.svg new file mode 100644 index 00000000..0aa76a0e --- /dev/null +++ b/res/ui/languages/vi.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/res/ui/languages/zh-TW.svg b/res/ui/languages/zh-TW.svg new file mode 100644 index 00000000..f89219a0 --- /dev/null +++ b/res/ui/languages/zh-TW.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/css/icons.scss b/src/css/icons.scss index b2af1b64..a5b85960 100644 --- a/src/css/icons.scss +++ b/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; + } +} diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index 2c68ee2e..ff6ee607 100644 --- a/src/css/states/main_menu.scss +++ b/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 { diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index 8ca023b2..0159c5f5 100644 --- a/src/js/states/main_menu.js +++ b/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 ( ` - - - ${ - G_IS_STANDALONE - ? ` - - ` - : "" - } +
+ + + + ${ + G_IS_STANDALONE || G_IS_DEV + ? ` + + ` + : "" + } +
${ G_IS_STANDALONE @@ -100,14 +105,8 @@ export class MainMenuState extends GameState { ${T.changelog.title} - - ${ - !G_IS_STANDALONE && - this.app.platformWrapper instanceof PlatformWrapperImplBrowser && - this.app.platformWrapper.embedProvider.iogLink - ? `.io games` - : "" - } + + ${T.mainMenu.helpTranslate}
Made by Tobias Springer
@@ -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) { diff --git a/translations/base-en.yaml b/translations/base-en.yaml index cb276e3e..eda26a18 100644 --- a/translations/base-en.yaml +++ b/translations/base-en.yaml @@ -74,6 +74,7 @@ mainMenu: importSavegame: Import openSourceHint: This game is open source! discordLink: Official Discord Server + helpTranslate: Help translate! # This is shown when using firefox and other browsers which are not supported. browserWarning: >-