From 1ecd38ee9fa5daa945376087debcffda80a4dbed Mon Sep 17 00:00:00 2001 From: SpikeHD Date: Tue, 26 Jul 2022 19:58:16 -0700 Subject: [PATCH] extras menu for conditional extras --- src/resources/icons/plus.svg | 11 ++ src/ui/App.css | 3 + src/ui/Main.tsx | 28 ++++- src/ui/components/ServerLaunchSection.css | 7 +- src/ui/components/ServerLaunchSection.tsx | 52 ++------- src/ui/components/menu/ExtrasMenu.css | 32 ++++++ src/ui/components/menu/ExtrasMenu.tsx | 123 ++++++++++++++++++++++ src/ui/components/mods/ModTile.tsx | 6 +- 8 files changed, 213 insertions(+), 49 deletions(-) create mode 100644 src/resources/icons/plus.svg create mode 100644 src/ui/components/menu/ExtrasMenu.css create mode 100644 src/ui/components/menu/ExtrasMenu.tsx diff --git a/src/resources/icons/plus.svg b/src/resources/icons/plus.svg new file mode 100644 index 0000000..a7eaeb4 --- /dev/null +++ b/src/resources/icons/plus.svg @@ -0,0 +1,11 @@ + +Created with Fabric.js 1.7.22 + + + + + + + + + \ No newline at end of file diff --git a/src/ui/App.css b/src/ui/App.css index 89f71a9..03fd17a 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -114,6 +114,9 @@ select:focus { padding: 0; } +.ExtrasMenu { +} + @media (max-height: 580px) { .BottomSection { height: 150px; diff --git a/src/ui/Main.tsx b/src/ui/Main.tsx index c8f6f08..6cb4588 100644 --- a/src/ui/Main.tsx +++ b/src/ui/Main.tsx @@ -24,6 +24,8 @@ import DownloadHandler from '../utils/download' import cogBtn from '../resources/icons/cog.svg' import downBtn from '../resources/icons/download.svg' import wrenchBtn from '../resources/icons/wrench.svg' +import Menu from './components/menu/Menu' +import { ExtrasMenu } from './components/menu/ExtrasMenu' interface IProps { downloadHandler: DownloadHandler @@ -35,7 +37,9 @@ interface IState { miniDownloadsOpen: boolean downloadsOpen: boolean gameDownloadsOpen: boolean + extrasOpen: boolean migotoSet: boolean + playGame: (exe?: string, proc_name?: string) => void } export class Main extends React.Component { @@ -47,7 +51,11 @@ export class Main extends React.Component { miniDownloadsOpen: false, downloadsOpen: false, gameDownloadsOpen: false, + extrasOpen: false, migotoSet: false, + playGame: () => { + alert('Error launching game') + }, } listen('lang_error', (payload) => { @@ -87,6 +95,8 @@ export class Main extends React.Component { min = false } }, 1000) + + this.openExtrasMenu = this.openExtrasMenu.bind(this) } async componentDidMount() { @@ -113,6 +123,13 @@ export class Main extends React.Component { }, 1000) } + async openExtrasMenu(playGame: () => void) { + this.setState({ + extrasOpen: true, + playGame, + }) + } + render() { return ( <> @@ -153,6 +170,15 @@ export class Main extends React.Component { + { + // Extras section + this.state.extrasOpen && ( + this.setState({ extrasOpen: false })} playGame={this.state.playGame}> + Yo + + ) + } + { // Mini downloads section this.state.miniDownloadsOpen ? ( @@ -201,7 +227,7 @@ export class Main extends React.Component { }
- +
void) => void +} + interface IState { grasscutterEnabled: boolean buttonLabel: string @@ -35,8 +39,8 @@ interface IState { migotoSet: boolean } -export default class ServerLaunchSection extends React.Component<{}, IState> { - constructor(props: {}) { +export default class ServerLaunchSection extends React.Component { + constructor(props: IProps) { super(props) this.state = { @@ -57,8 +61,6 @@ export default class ServerLaunchSection extends React.Component<{}, IState> { this.toggleGrasscutter = this.toggleGrasscutter.bind(this) this.playGame = this.playGame.bind(this) - this.launchAkebi = this.launchAkebi.bind(this) - this.launchMigoto = this.launchMigoto.bind(this) this.setIp = this.setIp.bind(this) this.setPort = this.setPort.bind(this) this.toggleHttps = this.toggleHttps.bind(this) @@ -189,30 +191,6 @@ export default class ServerLaunchSection extends React.Component<{}, IState> { }) } - async launchAkebi() { - const config = await getConfig() - - // Get game exe from game path, so we can watch it - const pathArr = config.game_install_path.replace(/\\/g, '/').split('/') - const gameExec = pathArr[pathArr.length - 1] - - await this.playGame(config.akebi_path, gameExec) - } - - async launchMigoto() { - const config = await getConfig() - - if (!config.migoto_path) return alert('Migoto not installed or set!') - - // Get game exe from game path, so we can watch it - const pathArr = config.migoto_path.replace(/\\/g, '/').split('/') - const migotoExec = pathArr[pathArr.length - 1] - - await invoke('run_program_relative', { path: config.migoto_path }) - - await this.playGame() - } - setIp(text: string) { this.setState({ ip: text, @@ -286,19 +264,9 @@ export default class ServerLaunchSection extends React.Component<{}, IState> { {this.state.buttonLabel} {this.state.swag && ( - <> - {this.state.akebiSet && ( - - - - )} - - {this.state.migotoSet && ( - - 3DM - - )} - + this.props.openExtras(this.playGame)} id="ExtrasMenuButton"> + + )} diff --git a/src/ui/components/menu/ExtrasMenu.css b/src/ui/components/menu/ExtrasMenu.css new file mode 100644 index 0000000..3c3dd2d --- /dev/null +++ b/src/ui/components/menu/ExtrasMenu.css @@ -0,0 +1,32 @@ +.ExtrasMenu { + width: 20%; + height: 40%; +} + +.ExtrasMenu .MenuInner { + justify-content: space-between; + height: 70%; +} + +.ExtrasMenuContent { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.ExtraItem { + width: 80%; + + padding: 10px; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.ExtraLaunch .BigButton { + padding: 20px 50px; +} diff --git a/src/ui/components/menu/ExtrasMenu.tsx b/src/ui/components/menu/ExtrasMenu.tsx new file mode 100644 index 0000000..e71f9d0 --- /dev/null +++ b/src/ui/components/menu/ExtrasMenu.tsx @@ -0,0 +1,123 @@ +import React from 'react' +import { getConfig } from '../../../utils/configuration' +import Checkbox from '../common/Checkbox' +import Menu from './Menu' + +import './ExtrasMenu.css' +import BigButton from '../common/BigButton' +import { invoke } from '@tauri-apps/api' +import Tr from '../../../utils/language' + +interface IProps { + children: React.ReactNode | React.ReactNode[] + closeFn: () => void + playGame: (exe?: string, proc_name?: string) => void +} + +interface IState { + migoto?: string + akebi?: string + launch_migoto: boolean + launch_akebi: boolean + reshade?: string +} + +export class ExtrasMenu extends React.Component { + constructor(props: IProps) { + super(props) + + this.state = { + launch_migoto: false, + launch_akebi: false, + } + + this.launchPreprograms = this.launchPreprograms.bind(this) + this.toggleMigoto = this.toggleMigoto.bind(this) + this.toggleAkebi = this.toggleAkebi.bind(this) + } + + async componentDidMount() { + const config = await getConfig() + + this.setState({ + migoto: config.migoto_path, + akebi: config.akebi_path, + // TODO reshade + }) + } + + async launchPreprograms() { + // This injects independent of the game + if (this.state.launch_migoto) { + await this.launchMigoto() + } + + // This will launch the game + if (this.state.launch_akebi) { + await this.launchAkebi() + + // This already launches the game + return + } + + // Launch the game + await this.props.playGame() + } + + async launchAkebi() { + const config = await getConfig() + + // Get game exe from game path, so we can watch it + const pathArr = config.game_install_path.replace(/\\/g, '/').split('/') + const gameExec = pathArr[pathArr.length - 1] + + await this.props.playGame(config.akebi_path, gameExec) + } + + async launchMigoto() { + const config = await getConfig() + + if (!config.migoto_path) return alert('Migoto not installed or set!') + + await invoke('run_program_relative', { path: config.migoto_path }) + } + + toggleMigoto() { + this.setState({ + launch_migoto: !this.state.launch_migoto, + }) + } + + toggleAkebi() { + this.setState({ + launch_akebi: !this.state.launch_akebi, + }) + } + + render() { + return ( + +
+ {this.state.migoto && ( +
+
Migoto
+ +
+ )} + + {this.state.akebi && ( +
+
Akebi
+ +
+ )} +
+
+ + + +
+ + ) + } +} diff --git a/src/ui/components/mods/ModTile.tsx b/src/ui/components/mods/ModTile.tsx index c5e64d3..0dec366 100644 --- a/src/ui/components/mods/ModTile.tsx +++ b/src/ui/components/mods/ModTile.tsx @@ -102,11 +102,7 @@ export class ModTile extends React.Component { ) : (
Open - +
))}