game download menu

src-tauri/lang/en.json

@@ -38,6 +38,7 @@
   },
   "components": {
     "select_file": "Select file or folder...",
+    "select_folder": "Select folder...",
     "download": "Download"
   },
   "news": {

src/resources/icons/game.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
+	<path d="M 31.656 39.145 h -3.003 v -3.003 c 0 -1.791 -1.457 -3.248 -3.247 -3.248 c -1.791 0 -3.247 1.457 -3.247 3.248 v 3.003 h -3.003 c -1.791 0 -3.247 1.457 -3.247 3.247 c 0 1.791 1.457 3.248 3.247 3.248 h 3.003 v 3.003 c 0 1.791 1.457 3.247 3.247 3.247 c 1.791 0 3.247 -1.457 3.247 -3.247 V 45.64 h 3.003 c 1.791 0 3.247 -1.457 3.247 -3.248 C 34.903 40.602 33.446 39.145 31.656 39.145 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 58.06 40.536 c -1.124 0 -2.039 0.915 -2.039 2.039 s 0.914 2.039 2.039 2.039 s 2.04 -0.915 2.04 -2.039 S 59.184 40.536 58.06 40.536 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 65.355 47.831 c -1.124 0 -2.04 0.914 -2.04 2.039 s 0.915 2.04 2.04 2.04 s 2.039 -0.915 2.039 -2.04 S 66.48 47.831 65.355 47.831 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 65.355 37.319 c 1.124 0 2.039 -0.915 2.039 -2.039 s -0.914 -2.039 -2.039 -2.039 s -2.04 0.915 -2.04 2.039 S 64.231 37.319 65.355 37.319 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 72.231 17.601 c -3.31 -1.291 -8.422 0.205 -14.342 1.936 C 53.467 20.83 48.893 22.168 45 22.313 c -4.346 0 -9.373 -1.518 -13.807 -2.858 c -5.496 -1.66 -10.243 -3.095 -13.366 -1.875 C 7.817 20.797 -2.802 56.227 0.674 68.226 c 0.885 3.057 2.665 4.664 5.062 4.664 c 0.506 0 1.039 -0.071 1.597 -0.216 c 4.644 -0.935 9.571 -3.191 14.789 -5.581 c 7.423 -3.4 15.099 -6.915 22.876 -7.098 c 8.066 0.248 15.694 3.76 23.07 7.156 c 5.129 2.361 9.973 4.591 14.549 5.511 c 3.253 0.844 5.64 -0.732 6.711 -4.435 C 92.802 56.227 82.183 20.797 72.231 17.601 z M 31.656 47.641 h -1.003 v 1.002 c 0 2.894 -2.354 5.248 -5.248 5.248 c -2.893 0 -5.248 -2.354 -5.248 -5.248 v -1.002 h -1.003 c -2.894 0 -5.248 -2.354 -5.248 -5.248 c 0 -2.894 2.354 -5.248 5.248 -5.248 h 1.003 v -1.002 c 0 -2.894 2.354 -5.248 5.248 -5.248 c 2.894 0 5.248 2.354 5.248 5.248 v 1.002 h 1.003 c 2.893 0 5.248 2.354 5.248 5.248 C 36.904 45.286 34.549 47.641 31.656 47.641 z M 65.355 31.24 c 2.227 0 4.039 1.812 4.039 4.04 s -1.812 4.04 -4.039 4.04 c -2.228 0 -4.04 -1.812 -4.04 -4.04 S 63.127 31.24 65.355 31.24 z M 58.06 46.615 c -2.227 0 -4.039 -1.812 -4.039 -4.04 s 1.812 -4.04 4.039 -4.04 c 2.228 0 4.04 1.812 4.04 4.04 S 60.288 46.615 58.06 46.615 z M 65.355 53.91 c -2.228 0 -4.04 -1.812 -4.04 -4.04 c 0 -2.227 1.812 -4.039 4.04 -4.039 c 2.227 0 4.039 1.812 4.039 4.039 C 69.395 52.098 67.583 53.91 65.355 53.91 z M 72.65 46.615 c -2.227 0 -4.039 -1.812 -4.039 -4.04 s 1.812 -4.04 4.039 -4.04 c 2.228 0 4.04 1.812 4.04 4.04 S 74.878 46.615 72.65 46.615 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 72.65 40.536 c -1.124 0 -2.039 0.915 -2.039 2.039 s 0.914 2.039 2.039 2.039 s 2.04 -0.915 2.04 -2.039 S 73.774 40.536 72.65 40.536 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</g>
+</svg>

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')
+    if (!this.props.placeholder) {
-    this.setState( {
+      const translation = await translate('components.select_file')
-      placeholder: translation
+      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>
+    )
+  }
+}