game download menu

src/ui/App.tsx

@@ -13,6 +13,8 @@ import MiniDialog from './components/MiniDialog'
 import DownloadList from './components/common/DownloadList'
 import Downloads from './components/menu/Downloads'
 import NewsSection from './components/news/NewsSection'
+import Game from './components/menu/Game'
+
 import RightBar from './components/RightBar'
 import { getConfigOption, setConfigOption } from '../utils/configuration'
 import { invoke } from '@tauri-apps/api'
@@ -27,6 +29,7 @@ interface IState {
   optionsOpen: boolean;
   miniDownloadsOpen: boolean;
   downloadsOpen: boolean;
+  gameDownloadsOpen: boolean;
   bgFile: string;
 }
 
@@ -40,6 +43,7 @@ class App extends React.Component<IProps, IState> {
       optionsOpen: false,
       miniDownloadsOpen: false,
       downloadsOpen: false,
+      gameDownloadsOpen: false,
       bgFile: 'https://webstatic.hoyoverse.com/upload/event/2020/11/04/7fd661b5184e1734f91f628b6f89a31f_7367318474207189623.png',
     }
 
@@ -93,6 +97,7 @@ class App extends React.Component<IProps, IState> {
             this.setState({ optionsOpen: !this.state.optionsOpen })
           }}
           downFunc={() => this.setState({ downloadsOpen: !this.state.downloadsOpen })}
+          gameFunc={() => this.setState({ gameDownloadsOpen: !this.state.gameDownloadsOpen })}
         />
 
         <RightBar />
@@ -135,6 +140,16 @@ class App extends React.Component<IProps, IState> {
           ) : null
         }
 
+        {
+          // Game downloads menu
+          this.state.gameDownloadsOpen ? (
+            <Game
+              downloadManager={downloadHandler}
+              closeFn={() => this.setState({ gameDownloadsOpen: false })}
+            />
+          ) : null
+        }
+
         <div className="BottomSection">
           <ServerLaunchSection />
 

src/ui/components/TopBar.tsx

@@ -5,15 +5,16 @@ import closeIcon from '../../resources/icons/close.svg'
 import minIcon from '../../resources/icons/min.svg'
 import cogBtn from '../../resources/icons/cog.svg'
 import downBtn from '../../resources/icons/download.svg'
+import gameBtn from '../../resources/icons/game.svg'
 
-import Tr, { translate } from '../../utils/language'
+import Tr from '../../utils/language'
 
 import './TopBar.css'
-import { listen } from '@tauri-apps/api/event'
 
 interface IProps {
   optFunc: () => void;
   downFunc: () => void;
+  gameFunc: () => void;
 }
 
 interface IState {
@@ -62,6 +63,9 @@ export default class TopBar extends React.Component<IProps, IState> {
           <div id="downloadsBtn" className='TopButton' onClick={this.props.downFunc}>
             <img src={downBtn} alt="downloads" />
           </div>
+          <div id="gameBtn" className="TopButton" onClick={this.props.gameFunc}>
+            <img src={gameBtn} alt="game" />
+          </div>
         </div>
       </div>
     )

src/ui/components/common/DirInput.tsx

@@ -8,9 +8,11 @@ import './DirInput.css'
 
 interface IProps {
   value?: string
+  clearable?: boolean
   onChange?: (value: string) => void
   extensions?: string[]
   readonly?: boolean
+  placeholder?: string
 }
 
 interface IState {
@@ -24,23 +26,33 @@ export default class DirInput extends React.Component<IProps, IState> {
 
     this.state = {
       value: props.value || '',
-      placeholder: 'Select file or folder...',
+      placeholder: this.props.placeholder || 'Select file or folder...',
     }
 
     this.handleIconClick = this.handleIconClick.bind(this)
   }
 
   static getDerivedStateFromProps(props: IProps, state: IState) {
-    if (!props.value || state.value !== '') return state
+    const newState = state
 
-    return { value: props.value || '' }
+    if (props.value && state.value === '') {
+      newState.value = props.value || ''
+    }
+
+    if (props.placeholder) {
+      newState.placeholder = props.placeholder
+    }
+
+    return newState
   }
 
   async componentDidMount() {
-    const translation = await translate('components.select_file')
-    this.setState( {
-      placeholder: translation
-    })
+    if (!this.props.placeholder) {
+      const translation = await translate('components.select_file')
+      this.setState( {
+        placeholder: translation
+      })
+    }
   }
 
   async handleIconClick() {
@@ -66,7 +78,7 @@ export default class DirInput extends React.Component<IProps, IState> {
         <TextInput
           value={this.state.value}
           placeholder={this.state.placeholder}
-          clearable={true}
+          clearable={this.props.clearable !== undefined ? this.props.clearable : true}
           readOnly={this.props.readonly !== undefined ? this.props.readonly : true } onChange={(text: string) => {
             this.setState({ value: text })
 

src/ui/components/menu/Game.css

@@ -0,0 +1,28 @@
+.GameDownloadMenu {
+  width: 40%;
+  height: 40%;
+}
+
+.GameDownload {
+  padding: 18px;
+}
+
+.GameDownload .BigButton {
+  height: 50px;
+}
+
+.GameDownloadDir {
+  width: 70%;
+}
+
+.GameDownloadDir .DirInput {
+  width: 100%;
+}
+
+.GameDownloadDir .DirInput .TextInputWrapper {
+  width: 100%;
+}
+
+.GameDownloadDir .DirInput .TextInputWrapper input {
+  width: 80%;
+}

src/ui/components/menu/Game.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Menu from './Menu'
+import Tr, { translate } from '../../../utils/language'
+import DownloadHandler from '../../../utils/download'
+
+import './Game.css'
+import DirInput from '../common/DirInput'
+import BigButton from '../common/BigButton'
+
+interface IProps {
+  closeFn: () => void;
+  downloadManager: DownloadHandler;
+}
+
+interface IState {
+  gameDownloading: boolean;
+  gameDownloadFolder: string;
+  dirPlaceholder: string;
+}
+
+export default class Downloads extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+
+    this.state = {
+      gameDownloading: false,
+      gameDownloadFolder: '',
+      dirPlaceholder: ''
+    }
+  }
+
+  async componentDidMount() {
+    this.setState({
+      dirPlaceholder: await translate('components.select_folder')
+    })
+  }
+
+  downloadGame() {
+    console.log('Download!')
+  }
+
+  render() {
+    return (
+      <Menu heading='Download Game' closeFn={this.props.closeFn} className="GameDownloadMenu">
+        <div className="GameDownload">
+          <BigButton id="downloadGameBtn" onClick={this.downloadGame}>Download Game</BigButton>
+        </div>
+        
+        <div className="GameDownloadDir">
+          <DirInput placeholder={this.state.dirPlaceholder} clearable={false} readonly={false} onChange={(value: string) => this.setState({
+            gameDownloading: true,
+            gameDownloadFolder: value
+          })}/>
+        </div>
+      </Menu>
+    )
+  }
+}