extras menu for conditional extras

src/ui/components/ServerLaunchSection.css

@@ -82,7 +82,12 @@
   width: 5%;
 }
 
-.AkebiIcon,
+#ExtrasMenuButton {
+  width: 5%;
+  padding: 0 20px;
+}
+
+.ExtrasIcon,
 .ServerIcon {
   height: 20px;
   filter: invert(28%) sepia(28%) saturate(1141%) hue-rotate(352deg) brightness(96%) contrast(88%);

src/ui/components/ServerLaunchSection.tsx

@@ -8,13 +8,17 @@ import { translate } from '../../utils/language'
 import { invoke } from '@tauri-apps/api/tauri'
 
 import Server from '../../resources/icons/server.svg'
-import Akebi from '../../resources/icons/akebi.svg'
+import Plus from '../../resources/icons/plus.svg'
 
 import './ServerLaunchSection.css'
 import { dataDir } from '@tauri-apps/api/path'
 import { getGameExecutable } from '../../utils/game'
 import { patchGame, unpatchGame } from '../../utils/metadata'
 
+interface IProps {
+  openExtras: (playGame: () => 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<IProps, IState> {
+  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}
           </BigButton>
           {this.state.swag && (
-            <>
-              {this.state.akebiSet && (
-                <BigButton onClick={this.launchAkebi} id="akebiLaunch">
-                  <img className="AkebiIcon" id="akebiIcon" src={Akebi} />
-                </BigButton>
-              )}
-
-              {this.state.migotoSet && (
-                <BigButton onClick={this.launchMigoto} id="migotoLaunch">
-                  3DM
-                </BigButton>
-              )}
-            </>
+            <BigButton onClick={() => this.props.openExtras(this.playGame)} id="ExtrasMenuButton">
+              <img className="ExtrasIcon" id="extrasIcon" src={Plus} />
+            </BigButton>
           )}
           <BigButton onClick={this.launchServer} id="serverLaunch">
             <img className="ServerIcon" id="serverLaunchIcon" src={Server} />

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;
+}

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<IProps, IState> {
+  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 (
+      <Menu closeFn={this.props.closeFn} heading="Extras" className="ExtrasMenu">
+        <div className="ExtrasMenuContent">
+          {this.state.migoto && (
+            <div className="ExtraItem">
+              <div className="ExtraItemLabel">Migoto</div>
+              <Checkbox id="MigotoCheckbox" checked={this.state.launch_migoto} onChange={this.toggleMigoto} />
+            </div>
+          )}
+
+          {this.state.akebi && (
+            <div className="ExtraItem">
+              <div className="ExtraItemLabel">Akebi</div>
+              <Checkbox id="AkebiCheckbox" checked={this.state.launch_akebi} onChange={this.toggleAkebi} />
+            </div>
+          )}
+        </div>
+        <div className="ExtraLaunch">
+          <BigButton id="ExtraLaunch" onClick={this.launchPreprograms}>
+            <Tr text="main.launch_button" />
+          </BigButton>
+        </div>
+      </Menu>
+    )
+  }
+}

src/ui/components/mods/ModTile.tsx

@@ -102,11 +102,7 @@ export class ModTile extends React.Component<IProps, IState> {
             ) : (
               <div className="ModTileOpen">
                 <img src={Folder} className="ModTileFolder" alt="Open" onClick={this.openInExplorer} />
-                <Checkbox
-                  checked={/* TODO GET ACTUAL INSTALL STATUS */ this.state.modEnabled}
-                  id={this.props.mod.name}
-                  onChange={this.toggleMod}
-                />
+                <Checkbox checked={this.state.modEnabled} id={this.props.mod.name} onChange={this.toggleMod} />
               </div>
             ))}
           <img