Add language chooser in Preferences

SabakiHQ · Mar 15, 2020 · 34b5cac · 34b5cac
1 parent cad4613
commit 34b5cac
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "@sabaki/deadstones": "^2.1.2",
     "@sabaki/go-board": "^1.4.1",
     "@sabaki/gtp": "^3.0.0",
+    "@sabaki/i18n": "0.50.1-1",
     "@sabaki/immutable-gametree": "^1.8.2",
     "@sabaki/influence": "^1.2.2",
     "@sabaki/sgf": "^3.4.7",

diff --git a/src/components/drawers/PreferencesDrawer.js b/src/components/drawers/PreferencesDrawer.js
@@ -62,8 +62,12 @@ class PreferencesItem extends Component {
 }
 
 class GeneralTab extends Component {
-  constructor() {
-    super()
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      appLang: setting.get('app.lang')
+    }
 
     this.handleSoundEnabledChange = evt => {
       sabaki.window.webContents.audioMuted = !evt.checked
@@ -76,6 +80,16 @@ class GeneralTab extends Component {
       setting.set('graph.grid_size', graphGridSize)
       setting.set('graph.node_size', graphNodeSize)
     }
+
+    this.handleLanguageChange = evt => {
+      setting.set('app.lang', evt.currentTarget.value)
+    }
+
+    setting.events.on(sabaki.window.id, 'change', ({key, value}) => {
+      if (key === 'app.lang') {
+        this.setState({appLang: value})
+      }
+    })
   }
 
   render({graphGridSize}) {
@@ -113,7 +127,93 @@ class GeneralTab extends Component {
         h(PreferencesItem, {
           id: 'board.variation_instant_replay',
           text: t('Instantly play out analysis variations on board')
-        })
+        }),
+
+        h(
+          'li',
+          {class: 'select'},
+          h(
+            'label',
+            {},
+            t('Language:'),
+            ' ',
+
+            h(
+              'select',
+              {onChange: this.handleLanguageChange},
+
+              Object.entries(i18n.getLanguages())
+                .filter(
+                  ([, entry]) =>
+                    entry.stats != null &&
+                    entry.stats.translatedStringsCount > 0
+                )
+                .map(([locale, entry]) =>
+                  h(
+                    'option',
+                    {
+                      value: locale,
+                      selected: this.state.appLang === locale
+                    },
+                    `${entry.nativeName} (${entry.name})`
+                  )
+                )
+            ),
+            ' ',
+            h(
+              'span',
+              {},
+              i18n.formatNumber(
+                Math.floor(
+                  i18n.getLanguages()[this.state.appLang].stats.progress * 100
+                )
+              ) + '%'
+            )
+          )
+        ),
+
+        h(
+          'li',
+          {class: 'select'},
+          h(
+            'label',
+            {},
+            t('Game Tree Style:'),
+            ' ',
+
+            h(
+              'select',
+              {onChange: this.handleTreeStyleChange},
+
+              h(
+                'option',
+                {
+                  value: 'compact',
+                  selected: graphGridSize < 22
+                },
+                t('Compact')
+              ),
+
+              h(
+                'option',
+                {
+                  value: 'spacious',
+                  selected: graphGridSize === 22
+                },
+                t('Spacious')
+              ),
+
+              h(
+                'option',
+                {
+                  value: 'big',
+                  selected: graphGridSize > 22
+                },
+                t('Big')
+              )
+            )
+          )
+        )
       ),
 
       h(
@@ -151,48 +251,6 @@ class GeneralTab extends Component {
           id: 'view.winrategraph_invert',
           text: t('Invert winrate graph')
         })
-      ),
-
-      h(
-        'p',
-        {},
-        h(
-          'label',
-          {},
-          t('Game Tree Style:'),
-          ' ',
-
-          h(
-            'select',
-            {onChange: this.handleTreeStyleChange},
-            h(
-              'option',
-              {
-                value: 'compact',
-                selected: graphGridSize < 22
-              },
-              t('Compact')
-            ),
-
-            h(
-              'option',
-              {
-                value: 'spacious',
-                selected: graphGridSize === 22
-              },
-              t('Spacious')
-            ),
-
-            h(
-              'option',
-              {
-                value: 'big',
-                selected: graphGridSize > 22
-              },
-              t('Big')
-            )
-          )
-        )
       )
     )
   }
@@ -382,7 +440,7 @@ class ThemesTab extends Component {
         })
       ),
 
-      h('h3', {}, 'Current Theme'),
+      h('h3', {}, t('Current Theme')),
 
       h(
         'p',

diff --git a/src/i18n.js b/src/i18n.js
@@ -4,6 +4,7 @@ const {ipcMain, remote} = require('electron')
 const {readFileSync} = require('fs')
 const path = require('path')
 const {load: dolmLoad, getKey: dolmGetKey} = require('dolm')
+const languages = require('@sabaki/i18n')
 
 const isElectron = process.versions.electron != null
 const isRenderer = isElectron && remote != null
@@ -82,12 +83,11 @@ exports.loadFile = function(filename) {
 exports.loadLang = function(lang) {
   appLang = lang
 
-  let filename = path.resolve(
-    __dirname,
-    `${isRenderer ? '.' : '..'}/i18n/${lang}.i18n.js`
-  )
+  exports.loadFile(languages[lang].filename)
+}
 
-  exports.loadFile(filename)
+exports.getLanguages = function() {
+  return languages
 }
 
 exports.loadLang(appLang)
diff --git a/style/index.css b/style/index.css
@@ -918,14 +918,16 @@ header {
   }
   #preferences form > div.general ul li label {
     display: block;
-    height: 1.5em;
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  #preferences form > div.general > p {
-    clear: both;
+  #preferences form > div.general ul li label select {
+    margin-right: .5rem;
+  }
+  #preferences form > div.general ul li.select label {
+    text-overflow: clip;
   }
   #preferences form > div.themes .userpaths {
     display: grid;

diff --git a/webpack.config.js b/webpack.config.js
@@ -30,6 +30,7 @@ module.exports = (env, argv) => ({
   },
 
   externals: {
+    '@sabaki/i18n': 'require("@sabaki/i18n")',
     'cross-spawn': 'null',
     'iconv-lite': 'require("iconv-lite")',
     moment: 'null'