Some globalisation stuff

Game executable now selectable in settings. Translations need updating for "Set Game Path".

src/ui/components/menu/Options.tsx

@@ -18,16 +18,17 @@ interface IProps {
 }
 
 interface IState {
-  game_install_path: string
-  grasscutter_path: string
-  java_path: string
-  grasscutter_with_game: boolean
-  language_options: { [key: string]: string }[],
-  current_language: string
-  bg_url_or_path: string
-  themes: string[]
-  theme: string
-  encryption: boolean
+  game_install_path: string;
+  game_executable: string;
+  grasscutter_path: string;
+  java_path: string;
+  grasscutter_with_game: boolean;
+  language_options: { [key: string]: string }[];
+  current_language: string;
+  bg_url_or_path: string;
+  themes: string[];
+  theme: string;
+  encryption: boolean;
 }
 
 export default class Options extends React.Component<IProps, IState> {
@@ -36,6 +37,7 @@ export default class Options extends React.Component<IProps, IState> {
 
     this.state = {
       game_install_path: '',
+      game_executable: '',
       grasscutter_path: '',
       java_path: '',
       grasscutter_with_game: false,
@@ -44,10 +46,11 @@ export default class Options extends React.Component<IProps, IState> {
       bg_url_or_path: '',
       themes: ['default'],
       theme: '',
-      encryption: false
+      encryption: false,
     }
 
-    this.setGameExec = this.setGameExec.bind(this)
+    this.setGamePath = this.setGamePath.bind(this)
+    this.setGameExecutable = this.setGameExecutable.bind(this)
     this.setGrasscutterJar = this.setGrasscutterJar.bind(this)
     this.setJavaPath = this.setJavaPath.bind(this)
     this.toggleGrasscutterWithGame = this.toggleGrasscutterWithGame.bind(this)
@@ -58,7 +61,7 @@ export default class Options extends React.Component<IProps, IState> {
   async componentDidMount() {
     const config = await getConfig()
     const languages = await getLanguages()
-    
+
     // Remove jar from path
     const path = config.grasscutter_path.replace(/\\/g, '/')
     const folderPath = path.substring(0, path.lastIndexOf('/'))
@@ -66,33 +69,52 @@ export default class Options extends React.Component<IProps, IState> {
 
     this.setState({
       game_install_path: config.game_install_path || '',
+      game_executable: config.game_executable || '',
       grasscutter_path: config.grasscutter_path || '',
       java_path: config.java_path || '',
       grasscutter_with_game: config.grasscutter_with_game || false,
       language_options: languages,
       current_language: config.language || 'en',
       bg_url_or_path: config.customBackground || '',
-      themes: (await getThemeList()).map(t => t.name),
+      themes: (await getThemeList()).map((t) => t.name),
       theme: config.theme || 'default',
-      encryption: await translate(encEnabled ? 'options.enabled' : 'options.disabled')
+      encryption: await translate(encEnabled ? 'options.enabled' : 'options.disabled'),
     })
 
     this.forceUpdate()
   }
 
-  setGameExec(value: string) {
+  setGamePath(value: string) {
     setConfigOption('game_install_path', value)
 
     this.setState({
-      game_install_path: value
+      game_install_path: value,
     })
   }
 
+  setGameExecutable(value: string) {
+    if (this.state.game_install_path != '') {
+      if (value.includes(this.state.game_install_path)) {
+        value = value.replace(this.state.game_install_path + '\\', '')
+
+        setConfigOption('game_executable', value)
+
+        this.setState({
+          game_executable: value,
+        })
+      } else {
+        alert('Game executable must be inside the game folder!')
+      }
+    } else {
+      alert('Please set the game install path first!')
+    }
+  }
+
   setGrasscutterJar(value: string) {
     setConfigOption('grasscutter_path', value)
 
     this.setState({
-      grasscutter_path: value
+      grasscutter_path: value,
     })
   }
 
@@ -100,7 +122,7 @@ export default class Options extends React.Component<IProps, IState> {
     setConfigOption('java_path', value)
 
     this.setState({
-      java_path: value
+      java_path: value,
     })
   }
 
@@ -119,7 +141,7 @@ export default class Options extends React.Component<IProps, IState> {
     setConfigOption('grasscutter_with_game', changedVal)
 
     this.setState({
-      grasscutter_with_game: changedVal
+      grasscutter_with_game: changedVal,
     })
   }
 
@@ -130,16 +152,16 @@ export default class Options extends React.Component<IProps, IState> {
 
     if (!isUrl) {
       const filename = value.replace(/\\/g, '/').split('/').pop()
-      const localBgPath = (await dataDir() as string).replace(/\\/g, '/')
-  
+      const localBgPath = ((await dataDir()) as string).replace(/\\/g, '/')
+
       await setConfigOption('customBackground', `${localBgPath}/cultivation/bg/${filename}`)
-  
+
       // Copy the file over to the local directory
       await invoke('copy_file', {
         path: value.replace(/\\/g, '/'),
-        newPath: `${localBgPath}cultivation/bg/`
+        newPath: `${localBgPath}cultivation/bg/`,
       })
-  
+
       window.location.reload()
     } else {
       await setConfigOption('customBackground', value)
@@ -163,68 +185,81 @@ export default class Options extends React.Component<IProps, IState> {
     await server.toggleEncryption(folderPath + '/config.json')
 
     this.setState({
-      encryption: await translate(await server.encryptionEnabled(folderPath + '/config.json') ? 'options.enabled' : 'options.disabled')
+      encryption: await translate(
+        (await server.encryptionEnabled(folderPath + '/config.json')) ? 'options.enabled' : 'options.disabled'
+      ),
     })
   }
 
   render() {
     return (
       <Menu closeFn={this.props.closeFn} className="Options" heading="Options">
-        <div className='OptionSection' id="menuOptionsContainerGameExec">
-          <div className='OptionLabel' id="menuOptionsLabelGameExec">
-            <Tr text="options.game_exec" />
+        <div className="OptionSection" id="menuOptionsContainerGamePath">
+          <div className="OptionLabel" id="menuOptionsLabelGamePath">
+            <Tr text="options.game_path" />
           </div>
-          <div className='OptionValue' id="menuOptionsDirGameExec">
-            <DirInput onChange={this.setGameExec} value={this.state?.game_install_path} folder={true} />
+          <div className="OptionValue" id="menuOptionsDirGamePath">
+            <DirInput onChange={this.setGamePath} value={this.state?.game_install_path} folder={true} />
           </div>
         </div>
-        <div className='OptionSection' id="menuOptionsContainerGCJar">
-          <div className='OptionLabel' id="menuOptionsLabelGCJar">
+        <div className="OptionSection" id="menuOptionsContainerGameExecutable">
+          <div className="OptionLabel" id="menuOptionsLabelGameExecutable">
+            <Tr text="options.game_executable" />
+          </div>
+          <div className="OptionValue" id="menuOptionsDirGameExecutable">
+            <DirInput onChange={this.setGameExecutable} value={this.state?.game_executable} folder={false} extensions={['exe']} openFolder={this.state?.game_install_path} />
+          </div>
+        </div>
+        <div className="OptionSection" id="menuOptionsContainerGCJar">
+          <div className="OptionLabel" id="menuOptionsLabelGCJar">
             <Tr text="options.grasscutter_jar" />
           </div>
-          <div className='OptionValue' id="menuOptionsDirGCJar">
+          <div className="OptionValue" id="menuOptionsDirGCJar">
             <DirInput onChange={this.setGrasscutterJar} value={this.state?.grasscutter_path} extensions={['jar']} />
           </div>
         </div>
-        <div className='OptionSection' id="menuOptionsContainerToggleEnc">
-          <div className='OptionLabel' id="menuOptionsLabelToggleEnc">
+        <div className="OptionSection" id="menuOptionsContainerToggleEnc">
+          <div className="OptionLabel" id="menuOptionsLabelToggleEnc">
             <Tr text="options.toggle_encryption" />
           </div>
-          <div className='OptionValue' id="menuOptionsButtonToggleEnc">
+          <div className="OptionValue" id="menuOptionsButtonToggleEnc">
             <BigButton onClick={this.toggleEncryption} id="toggleEnc">
-              {
-                this.state.encryption
-              }
+              {this.state.encryption}
             </BigButton>
           </div>
         </div>
 
         <Divider />
-        
-        <div className='OptionSection' id="menuOptionsContainerGCWGame">
-          <div className='OptionLabel' id="menuOptionsLabelGCWDame">
+
+        <div className="OptionSection" id="menuOptionsContainerGCWGame">
+          <div className="OptionLabel" id="menuOptionsLabelGCWDame">
             <Tr text="options.grasscutter_with_game" />
           </div>
-          <div className='OptionValue' id="menuOptionsCheckboxGCWGame">
-            <Checkbox onChange={this.toggleGrasscutterWithGame} checked={this.state?.grasscutter_with_game} id="gcWithGame" />
+          <div className="OptionValue" id="menuOptionsCheckboxGCWGame">
+            <Checkbox
+              onChange={this.toggleGrasscutterWithGame}
+              checked={this.state?.grasscutter_with_game}
+              id="gcWithGame"
+            />
           </div>
         </div>
 
         <Divider />
 
-        <div className='OptionSection' id="menuOptionsContainerThemes">
-          <div className='OptionLabel' id="menuOptionsLabelThemes">
+        <div className="OptionSection" id="menuOptionsContainerThemes">
+          <div className="OptionLabel" id="menuOptionsLabelThemes">
             <Tr text="options.theme" />
           </div>
-          <div className='OptionValue' id="menuOptionsSelectThemes">
-            <select value={this.state.theme} id="menuOptionsSelectMenuThemes" onChange={(event) => {
-              this.setTheme(event.target.value)
-            }}>
-              {this.state.themes.map(t => (
-                <option
-                  key={t}
-                  value={t}>
-
+          <div className="OptionValue" id="menuOptionsSelectThemes">
+            <select
+              value={this.state.theme}
+              id="menuOptionsSelectMenuThemes"
+              onChange={(event) => {
+                this.setTheme(event.target.value)
+              }}
+            >
+              {this.state.themes.map((t) => (
+                <option key={t} value={t}>
                   {t}
                 </option>
               ))}
@@ -234,20 +269,20 @@ export default class Options extends React.Component<IProps, IState> {
 
         <Divider />
 
-        <div className='OptionSection' id="menuOptionsContainerJavaPath">
-          <div className='OptionLabel' id="menuOptionsLabelJavaPath">
+        <div className="OptionSection" id="menuOptionsContainerJavaPath">
+          <div className="OptionLabel" id="menuOptionsLabelJavaPath">
             <Tr text="options.java_path" />
           </div>
-          <div className='OptionValue' id="menuOptionsDirJavaPath">
+          <div className="OptionValue" id="menuOptionsDirJavaPath">
             <DirInput onChange={this.setJavaPath} value={this.state?.java_path} extensions={['exe']} />
           </div>
         </div>
 
-        <div className='OptionSection' id="menuOptionsContainerBG">
-          <div className='OptionLabel' id="menuOptionsLabelBG">
+        <div className="OptionSection" id="menuOptionsContainerBG">
+          <div className="OptionLabel" id="menuOptionsLabelBG">
             <Tr text="options.background" />
           </div>
-          <div className='OptionValue' id="menuOptionsDirBG">
+          <div className="OptionValue" id="menuOptionsDirBG">
             <DirInput
               onChange={this.setCustomBackground}
               value={this.state?.bg_url_or_path}
@@ -262,19 +297,20 @@ export default class Options extends React.Component<IProps, IState> {
           </div>
         </div>
 
-        <div className='OptionSection' id="menuOptionsContainerLang">
-          <div className='OptionLabel' id="menuOptionsLabelLang">
+        <div className="OptionSection" id="menuOptionsContainerLang">
+          <div className="OptionLabel" id="menuOptionsLabelLang">
             <Tr text="options.language" />
           </div>
-          <div className='OptionValue' id="menuOptionsSelectLang">
-            <select value={this.state.current_language} id="menuOptionsSelectMenuLang" onChange={(event) => {
-              this.setLanguage(event.target.value)
-            }}>
-              {this.state.language_options.map(lang => (
-                <option
-                  key={Object.keys(lang)[0]}
-                  value={Object.keys(lang)[0]}>
-
+          <div className="OptionValue" id="menuOptionsSelectLang">
+            <select
+              value={this.state.current_language}
+              id="menuOptionsSelectMenuLang"
+              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>
               ))}
@@ -284,4 +320,4 @@ export default class Options extends React.Component<IProps, IState> {
       </Menu>
     )
   }
-}
+}