language select

src/ui/App.css

@@ -5,6 +5,23 @@ body {
   overflow: hidden;
 }
 
+select {
+  width: 217px;
+  border: none;
+  border-bottom: 2px solid #cecece;
+
+  padding-right: 16px;
+
+  text-decoration-color: #000;
+
+  transition: border-bottom-color 0.1s ease-in-out;
+}
+
+select:focus {
+  outline: none;
+  border-bottom-color: #ffd326;
+}
+
 #root, .App {
   height: 100%;
 }

src/ui/components/menu/Options.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import DirInput from '../common/DirInput'
 import Menu from './Menu'
-import Tr from '../../../utils/language'
+import Tr, { getLanguages } from '../../../utils/language'
 import './Options.css'
 import { setConfigOption, getConfig, getConfigOption } from '../../../utils/configuration'
 import Checkbox from '../common/Checkbox'
 import Divider from './Divider'
+import { invoke } from '@tauri-apps/api'
 
 interface IProps {
   closeFn: () => void;
@@ -16,6 +17,7 @@ interface IState {
   grasscutter_path: string
   java_path: string
   grasscutter_with_game: boolean
+  language_options: { [key: string]: string }[]
 }
 
 export default class Options extends React.Component<IProps, IState> {
@@ -26,18 +28,21 @@ export default class Options extends React.Component<IProps, IState> {
       game_install_path: '',
       grasscutter_path: '',
       java_path: '',
-      grasscutter_with_game: false
+      grasscutter_with_game: false,
+      language_options: []
     }
   }
 
-  componentDidMount() {
-    getConfig().then(config => {
-      this.setState({
-        game_install_path: config.game_install_path || '',
-        grasscutter_path: config.grasscutter_path || '',
-        java_path: config.java_path || '',
-        grasscutter_with_game: config.grasscutter_with_game || false
-      })
+  async componentDidMount() {
+    const config = await getConfig()
+    const languages = await getLanguages()
+
+    this.setState({
+      game_install_path: config.game_install_path || '',
+      grasscutter_path: config.grasscutter_path || '',
+      java_path: config.java_path || '',
+      grasscutter_with_game: config.grasscutter_with_game || false,
+      language_options: languages
     })
 
     this.forceUpdate()
@@ -55,6 +60,10 @@ export default class Options extends React.Component<IProps, IState> {
     setConfigOption('java_path', value)
   }
 
+  setLanguage(value: string) {
+    setConfigOption('language', value)
+  }
+
   async toggleGrasscutterWithGame() {
     setConfigOption('grasscutter_with_game', !(await getConfigOption('grasscutter_with_game')))
   }
@@ -100,6 +109,21 @@ export default class Options extends React.Component<IProps, IState> {
             <DirInput onChange={this.setJavaPath} value={this.state?.java_path} extensions={['exe']} />
           </div>
         </div>
+
+        <div className='OptionSection'>
+          <div className='OptionLabel'>
+            <Tr text="options.language" />
+          </div>
+          <div className='OptionValue'>
+            <select onChange={(event) => {
+              this.setLanguage(event.target.value)
+            }}>
+              {this.state.language_options.map(lang => (
+                <option key={Object.keys(lang)[0]} value={Object.keys(lang)[0]}>{lang[Object.keys(lang)[0]]}</option>
+              ))}
+            </select>
+          </div>
+        </div>
       </Menu>
     )
   }

src/utils/configuration.ts

@@ -92,7 +92,7 @@ async function readConfigFile() {
     // Create config file
     const file: fs.FsTextFileOption = {
       path: configFilePath,
-      contents: '{}'
+      contents: JSON.stringify(defaultConfig)
     }
 
     await fs.writeFile(file)

src/utils/language.ts

@@ -60,6 +60,25 @@ export default class Tr extends React.Component<IProps, IState> {
   }
 }
 
+export async function getLanguages() {
+  const resp: {
+    [key: string]: string;
+  } = await invoke('get_languages')
+  const lang_list: {
+    [key: string]: string;
+  }[] = []
+
+  Object.keys(resp).forEach(k => {
+    const parsed = JSON.parse(resp[k])
+
+    if (parsed.lang_name) {
+      lang_list.push({ [k.split('.json')[0]]: parsed.lang_name })
+    }
+  })
+
+  return lang_list
+}
+
 export async function translate(text: string) {
   const language = await getConfigOption('language') || 'en'
   const translation_json = JSON.parse(await invoke('get_lang', { lang: language }) || '{}')