game download feature

src-tauri/lang/en.json

@@ -9,7 +9,7 @@
     "files_downloading": "Files Downloading: ",
     "files_extracting": "Files Extracting: ",
     "port_help_text": "Ensure this is the Dispatch server port, not the Game server port. This is almost always '443'.",
-    "game_help_text": "You do not need to use a seperate copy to play with Grasscutter. This is for either downgrading to 2.6 or if you do not have the game installed."
+    "game_help_text": "You do not need to use a separate copy to play with Grasscutter. This is for either downgrading to 2.6 or if you do not have the game installed."
   },
   "options": {
     "game_exec": "Set Game Executable",

src/ui/components/common/DirInput.tsx

@@ -13,11 +13,13 @@ interface IProps {
   extensions?: string[]
   readonly?: boolean
   placeholder?: string
+  folder?: boolean
 }
 
 interface IState {
   value: string
   placeholder: string
+  folder: boolean
 }
 
 export default class DirInput extends React.Component<IProps, IState> {
@@ -27,6 +29,7 @@ export default class DirInput extends React.Component<IProps, IState> {
     this.state = {
       value: props.value || '',
       placeholder: this.props.placeholder || 'Select file or folder...',
+      folder: this.props.folder || false
     }
 
     this.handleIconClick = this.handleIconClick.bind(this)
@@ -56,11 +59,21 @@ export default class DirInput extends React.Component<IProps, IState> {
   }
 
   async handleIconClick() {
-    let path = await open({
-      filters: [
-        { name: 'Files', extensions: this.props.extensions || ['*'] }
-      ]
-    })
+    let path
+
+    if (this.state.folder) {
+      path = await open({
+        directory: true
+      })
+    } else {
+      path = await open({
+        filters: [
+          { name: 'Files', extensions: this.props.extensions || ['*'] }
+        ]
+      })
+    }
+    
+
 
     if (Array.isArray(path)) path = path[0]
     if (!path) return

src/ui/components/menu/Game.tsx

@@ -7,6 +7,9 @@ import './Game.css'
 import DirInput from '../common/DirInput'
 import BigButton from '../common/BigButton'
 import HelpButton from '../common/HelpButton'
+import { unzip } from '../../../utils/zipUtils'
+
+const GAME_DOWNLOAD = ''
 
 interface IProps {
   closeFn: () => void;
@@ -28,31 +31,49 @@ export default class Downloads extends React.Component<IProps, IState> {
       gameDownloadFolder: '',
       dirPlaceholder: ''
     }
+
+    this.downloadGame = this.downloadGame.bind(this)
   }
 
   async componentDidMount() {
     this.setState({
       dirPlaceholder: await translate('components.select_folder')
     })
+
+    console.log(this.state)
   }
 
-  downloadGame() {
-    console.log('Download!')
+  async downloadGame() {
+    const folder = this.state.gameDownloadFolder
+    this.props.downloadManager.addDownload(GAME_DOWNLOAD, folder + '\\game.zip', () =>{
+      unzip(folder + '\\game.zip', folder + '\\', () => {
+        this.setState({
+          gameDownloading: false
+        })
+      })
+    })
+
+    this.setState({
+      gameDownloading: true
+    })
   }
 
   render() {
     return (
       <Menu heading='Download Game' closeFn={this.props.closeFn} className="GameDownloadMenu">
         <div className="GameDownload">
-          <BigButton id="downloadGameBtn" onClick={this.downloadGame}>Download Game</BigButton>
+          {
+            this.state.gameDownloadFolder !== '' && !this.state.gameDownloading ?
+              <BigButton id="downloadGameBtn" onClick={this.downloadGame}>Download Game</BigButton>
+              : <BigButton id="disabledGameBtn" onClick={() => null} disabled>Download Game</BigButton>
+          }
           <HelpButton>
             <Tr text="main.game_help_text" />
           </HelpButton>
         </div>
         
         <div className="GameDownloadDir">
-          <DirInput placeholder={this.state.dirPlaceholder} clearable={false} readonly={false} onChange={(value: string) => this.setState({
-            gameDownloading: true,
+          <DirInput folder placeholder={this.state.dirPlaceholder} clearable={false} readonly={true} onChange={(value: string) => this.setState({
             gameDownloadFolder: value
           })}/>
         </div>