Add language setting

satisfactorymodding · Jun 7, 2024 · 5fc6931 · 5fc6931
1 parent 182626b
commit 5fc6931
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 6 deletions.
diff --git a/backend/settings/settings.go b/backend/settings/settings.go
@@ -53,6 +53,8 @@ type settings struct {
 
 	Offline bool `json:"offline,omitempty"`
 
+	Language string `json:"language,omitempty"`
+
 	Proxy string `json:"proxy,omitempty"`
 
 	Konami       bool   `json:"konami,omitempty"`
@@ -246,6 +248,15 @@ func (s *settings) SetAnnouncementViewed(announcement string) {
 	wailsRuntime.EventsEmit(common.AppContext, "viewedAnnouncements", s.ViewedAnnouncements)
 }
 
+func (s *settings) GetLanguage() string {
+	return s.Language
+}
+
+func (s *settings) SetLanguage(value string) {
+	s.Language = value
+	_ = SaveSettings()
+}
+
 func (s *settings) GetDebug() bool {
 	return s.Debug
 }

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
@@ -22,7 +22,7 @@
   import { getModalStore, initializeModalStore } from '$lib/skeletonExtensions';
   import { installs, invalidInstalls, progress } from '$lib/store/ficsitCLIStore';
   import { error, expandedMod, siteURL } from '$lib/store/generalStore';
-  import { konami, updateCheckMode } from '$lib/store/settingsStore';
+  import { konami, language, updateCheckMode } from '$lib/store/settingsStore';
   import { smmUpdate, smmUpdateReady } from '$lib/store/smmUpdateStore';
   import { ExpandMod, GenerateDebugInfo, UnexpandMod } from '$wailsjs/go/app/app';
   import { Environment, EventsOn } from '$wailsjs/runtime';
@@ -45,6 +45,8 @@
 
       staticData: i18n,
     });
+  
+  $: tolgee.changeLanguage($language);
 
   let frameless = false;
   Environment().then((env) => {

diff --git a/frontend/src/_global.postcss b/frontend/src/_global.postcss
@@ -1,12 +1,12 @@
-@import 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&family=Roboto&family=Roboto+Mono&family=Material+Icons&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&family=Roboto&family=Roboto+Mono&family=Material+Icons&family=Noto+Color+Emoji&display=swap';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 html,
 body {
-  font-family: 'Roboto', Helvetica Neue, sans-serif;
+  font-family: 'Roboto', Helvetica Neue, sans-serif, 'Noto Color Emoji';
   margin: 0;
   padding: 0;
   overflow: hidden;

diff --git a/frontend/src/lib/components/left-bar/Settings.svelte b/frontend/src/lib/components/left-bar/Settings.svelte
@@ -5,10 +5,10 @@
 
   import SvgIcon from '$lib/components/SVGIcon.svelte';
   import T from '$lib/components/T.svelte';
-  import { GetModNameDocument } from '$lib/generated';
+  import { GetModNameDocument, i18n } from '$lib/generated';
   import { type PopupSettings, getModalStore, popup } from '$lib/skeletonExtensions';
   import { lockfileMods, manifestMods } from '$lib/store/ficsitCLIStore';
-  import { debug, konami, launchButton, offline, queueAutoStart, startView, updateCheckMode, version } from '$lib/store/settingsStore';
+  import { debug, konami, language, launchButton, offline, queueAutoStart, startView, updateCheckMode, version } from '$lib/store/settingsStore';
   import type { LaunchButtonType, ViewType } from '$lib/wailsTypesExtensions';
   import { GenerateDebugInfo } from '$wailsjs/go/app/app';
   import { OfflineGetMod } from '$wailsjs/go/ficsitcli/ficsitCLI';
@@ -116,6 +116,18 @@
       name: 'Launch Button',
     },
   ];
+
+  const languageMenu = {
+    event: 'click',
+    target: 'language-menu',
+    middleware: {
+      offset: 4,
+    },
+    placement: 'right-start',
+    closeQuery: '[data-popup="language-menu"] .listbox-item',
+  } satisfies PopupSettings;
+
+  let languages: string[] = Object.keys(i18n);
   
   const urqlClient = getContextClient();
 
@@ -159,6 +171,11 @@
     });
     navigator.clipboard.writeText(modListString.trim());
   }
+
+  function localeName(locale: string) {
+    if (!locale) return 'N/A';
+    return new Intl.DisplayNames([locale], { type: 'language' }).of(locale);
+  }
 </script>
 
 <div class="settings-menu">
@@ -279,6 +296,36 @@
       </ListBox>
     </ul>
   </div>
+  <div class="card shadow-xl w-56 z-10 duration-0 overflow-y-auto" data-popup="language-menu">
+    <!-- 
+    Skeleton's popup close function waits for the tranistion duration...
+    before actually triggering the transition...
+    So we'll just not have a transition...
+    -->
+    <ul class="menu">
+      <ListBox class="w-full" rounded="rounded-none" spacing="space-y-0">
+        {#each languages as item}
+          <ListBoxItem
+            name="language"
+            class="bg-surface-50-900-token"
+            active=""
+            value={item}
+            bind:group={$language}>
+            <!-- TODO: dynamic flags -->
+            <!-- <span slot="lead" class="h-5 w-5 block">
+              {localeFlag(item)}
+            </span> -->
+            {localeName(item)}
+            <span slot="trail" class="h-5 w-5 block">
+              {#if $language === item}
+                <SvgIcon class="h-full w-full" icon={mdiCheck}/>
+              {/if}
+            </span>
+          </ListBoxItem>
+        {/each}
+      </ListBox>
+    </ul>
+  </div>
 
   <!-- main settings menu starts here -->
   <div class="card shadow-xl z-10 duration-0 overflow-y-auto py-2 max-h-[95vh]" data-popup="settings-menu">
@@ -332,6 +379,19 @@
         </span>
       </li>
       <hr class="divider" />
+      <li data-noclose use:popup={languageMenu}>
+        <button>
+          <span class="h-5 w-5"/>
+          <span class="flex-auto">
+            <T defaultValue="Language" keyName="settings.language"/>
+          </span>
+          <span>{localeName($language)}</span>
+          <span class="h-5 w-5">
+            <SvgIcon class="h-full w-full" icon={mdiChevronRight}/>
+          </span>
+        </button>
+      </li>
+      <hr class="divider" />
       <li data-noclose use:popup={updateCheckModeMenu}>
         <button>
           <span class="h-5 w-5"/>

diff --git a/frontend/src/lib/store/settingsStore.ts b/frontend/src/lib/store/settingsStore.ts
@@ -3,7 +3,7 @@ import { binding, bindingTwoWay, bindingTwoWayNoExcept } from './wailsStoreBindi
 import type { LaunchButtonType, ViewType } from '$lib/wailsTypesExtensions';
 import { GetVersion } from '$wailsjs/go/app/app';
 import { GetOffline, SetOffline } from '$wailsjs/go/ficsitcli/ficsitCLI';
-import { GetCacheDir, GetDebug, GetIgnoredUpdates, GetKonami, GetLaunchButton, GetProxy, GetQueueAutoStart, GetStartView, GetUpdateCheckMode, GetViewedAnnouncements, SetCacheDir, SetDebug, SetKonami, SetLaunchButton, SetProxy, SetQueueAutoStart, SetStartView, SetUpdateCheckMode } from '$wailsjs/go/settings/settings';
+import { GetCacheDir, GetDebug, GetIgnoredUpdates, GetKonami, GetLanguage, GetLaunchButton, GetProxy, GetQueueAutoStart, GetStartView, GetUpdateCheckMode, GetViewedAnnouncements, SetCacheDir, SetDebug, SetKonami, SetLanguage, SetLaunchButton, SetProxy, SetQueueAutoStart, SetStartView, SetUpdateCheckMode } from '$wailsjs/go/settings/settings';
 
 export const startView = bindingTwoWayNoExcept<ViewType | null>(null, { initialGet: GetStartView }, { updateFunction: SetStartView });
 
@@ -28,3 +28,5 @@ export const cacheDir = bindingTwoWay<string, null>(null, { initialGet: GetCache
 export const version = binding<string>('0.0.0', { initialGet: GetVersion });
 
 export const debug = bindingTwoWayNoExcept<boolean>(false, { initialGet: GetDebug }, { updateFunction: SetDebug });
+
+export const language = bindingTwoWayNoExcept<string>('en', { initialGet: () => GetLanguage().then((l) => l ? l : 'en'), allowNull: false }, { updateFunction: SetLanguage });