From 0fc139076940a80ada9156aeaab838d4725064a0 Mon Sep 17 00:00:00 2001 From: tobspr Date: Wed, 10 Jun 2020 12:29:21 +0200 Subject: [PATCH] Add language chooser to main menu --- res/ui/icons/main_menu_exit.png | Bin 1513 -> 1205 bytes res/ui/icons/main_menu_settings.png | Bin 2186 -> 1179 bytes res/ui/languages/ar.svg | 62 +++++++++++++++++++ res/ui/languages/cs.svg | 37 ++++++++++++ res/ui/languages/da.svg | 36 +++++++++++ res/ui/languages/de.svg | 39 ++++++++++++ res/ui/languages/el.svg | 46 ++++++++++++++ res/ui/languages/en.svg | 59 ++++++++++++++++++ res/ui/languages/es-419.svg | 89 ++++++++++++++++++++++++++++ res/ui/languages/et.svg | 37 ++++++++++++ res/ui/languages/fr.svg | 37 ++++++++++++ res/ui/languages/hu.svg | 37 ++++++++++++ res/ui/languages/it.svg | 37 ++++++++++++ res/ui/languages/ja.svg | 36 +++++++++++ res/ui/languages/mt-MT.svg | 50 ++++++++++++++++ res/ui/languages/nb.svg | 37 ++++++++++++ res/ui/languages/nl.svg | 37 ++++++++++++ res/ui/languages/pl.svg | 36 +++++++++++ res/ui/languages/pt-BR.svg | 51 ++++++++++++++++ res/ui/languages/ru.svg | 37 ++++++++++++ res/ui/languages/sv.svg | 36 +++++++++++ res/ui/languages/th.svg | 43 ++++++++++++++ res/ui/languages/tr.svg | 39 ++++++++++++ res/ui/languages/uk.svg | 36 +++++++++++ res/ui/languages/vi.svg | 36 +++++++++++ res/ui/languages/zh-TW.svg | 42 +++++++++++++ src/css/icons.scss | 9 +++ src/css/states/main_menu.scss | 48 +++++++++------ src/js/states/main_menu.js | 68 +++++++++++++++------ translations/base-en.yaml | 1 + 30 files changed, 1124 insertions(+), 34 deletions(-) create mode 100644 res/ui/languages/ar.svg create mode 100644 res/ui/languages/cs.svg create mode 100644 res/ui/languages/da.svg create mode 100644 res/ui/languages/de.svg create mode 100644 res/ui/languages/el.svg create mode 100644 res/ui/languages/en.svg create mode 100644 res/ui/languages/es-419.svg create mode 100644 res/ui/languages/et.svg create mode 100644 res/ui/languages/fr.svg create mode 100644 res/ui/languages/hu.svg create mode 100644 res/ui/languages/it.svg create mode 100644 res/ui/languages/ja.svg create mode 100644 res/ui/languages/mt-MT.svg create mode 100644 res/ui/languages/nb.svg create mode 100644 res/ui/languages/nl.svg create mode 100644 res/ui/languages/pl.svg create mode 100644 res/ui/languages/pt-BR.svg create mode 100644 res/ui/languages/ru.svg create mode 100644 res/ui/languages/sv.svg create mode 100644 res/ui/languages/th.svg create mode 100644 res/ui/languages/tr.svg create mode 100644 res/ui/languages/uk.svg create mode 100644 res/ui/languages/vi.svg create mode 100644 res/ui/languages/zh-TW.svg diff --git a/res/ui/icons/main_menu_exit.png b/res/ui/icons/main_menu_exit.png index c1d3fb4671da63ce1294b923156221d3930e494e..07a54c6c22a4441da5d4786ffcc8f87867eda040 100644 GIT binary patch literal 1205 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I3?%1nZ+ru!SkfJR9T^xl_H+M9WCijSl0AZa z85pY67#JE_7#My5g&JNkFq9fFFuY1&V6d9Oz#v{QXIG#N0|TQ=fKP}kP=TVNx{|Vn zk_s59YAOQRK%fd0QB+X}N-3*?No5cT)B;hgtgNXF)}^eh0o0|arUnvM)&$FHDyXR` zt7s~!XaEsdi@Gw@D4;G)1qE#-AXiyKR$U!v4#Yqe6)hk`Q5D2hR#ukL2B}eiI7|s- zjw09rN=lj_=K-CnqVC|}pscJ81Q1KLwY4E?K+aax06I@aMFnIL*btxzAOlskAkJ2S za6!gG{0{XpP>UMSFF@_eKr2A5Ra6DquC4+%M^O_VVnDA+rRbaoQduQIe!&cS%U=9C zT*4pq^L6OIyg!Z?n4Z^1w0^dlX!d);(YYF{sunUvFRH7(CeeRGO6U7G?VEPj#f09w ze^fiy^g}hs+mFSX_w-4g>dF<%H;S(Ra_QI{^W$xn=k0S|1s^QplRg!=VdbP4|1-Db z?>EMDa6Nt?u4`#*{_}p-m5U zsvld-Tm9zT|N1Fs9XJ%*#FDjN^ln^x*X73L#I|F}8;yRm`N$u*c9JP7pq8OpoY_E$ zvA|+0B#h9d{WX;k?nFttfx@Lm|@x zaaK1M#{2rLOb0Jc@MMwDj_dX3U=R!7)HvXKee$Lni$m-#$qXM`Y~qCj7&@!=a;EOn zdce@zufyrfY#=JgqSeF@Am-9Asexe@@tk@2B~gx1=SE3`>zVQm zN5rO0UJ)D-x%RKO#_#N;;~8<{yZOCp85i8ims{~=qJ!0BPwme^^6V+*3})M({LGSP z&$;}yPbdEM_q1b=E&2SMDaHP^W$1kA8|UR^wB)8&Fy4*+EdS&70l`>#bN)FM zFRYGm&++2Fo&L1_ZE>7~skoovfx4A<)eB?pmmPf}%)Y9=_V6p=`p4Toep`3o&E%XN z9}Qof|J$tKz|`+=sQW;YTV%PwnXA(JG7P41SC2`{2c++@-pSbd@#9UO{W(weC#`(X zWb}_Y>QZmzG~QRvz{piCag8WRNi0dVN-jzTQVd20Mh3bDX1az3A%+H4Mut|V#@Yr3 zRt5&H{*9MVH00)|WTsW()?gxJnFrJ$39=zLKdq!Zu_%?Hyu4g5GcUV1Ik6yBFTW^# T_B$IXpdtoOS3j3^P6 literal 1513 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 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: >-