Mirror/Cultivation
1
0
Fork 0
mirror of https://github.com/Grasscutters/Cultivation.git synced 2025-12-13 07:34:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

game download menu

Browse Source
This commit is contained in:
SpikeHD
2022-05-24 21:38:49 -07:00
parent 5879207181
commit b4a6c2cb35
7 changed files with 143 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src-tauri/lang/en.json
View File

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

15
src/resources/icons/game.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

15
src/ui/App.tsx
View File

@@ -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 />

8
src/ui/components/TopBar.tsx
View File

@@ -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>
)

28
src/ui/components/common/DirInput.tsx
View File

@@ -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 })

28
src/ui/components/menu/Game.css Normal file
View File

@@ -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%;
}

58
src/ui/components/menu/Game.tsx Normal file
View File

@@ -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>
)
}
}