downloads button

src/ui/App.tsx

@@ -4,7 +4,7 @@ import './App.css'
 import './custom.css'
 
 // Config
-import { getConfig } from '../utils/configuration'
+import { getConfig, saveConfig } from '../utils/configuration'
 
 // Major Components
 import Topbar from './components/TopBar'
@@ -20,13 +20,21 @@ async function playGame() {
   await invoke('run_program', { path: config.game_path })
 }
 
+async function toggleGrasscutter() {
+  const config = await getConfig()
+
+  config.toggle_grasscutter = !config.toggle_grasscutter
+
+  await saveConfig(config)
+}
+
 function App() {
   return (
     <div className="App">
       <Topbar />
       <div id="playButton">
         <div id="serverControls">
-          <Checkbox label="Connect via Grasscutter" />
+          <Checkbox label="Connect via Grasscutter" onChange={toggleGrasscutter} />
         </div>
         <BigButton text="PLAY DA GAME :D" onClick={playGame} id="officialPlay" />
       </div>

src/ui/components/TopBar.tsx

@@ -4,6 +4,7 @@ import './TopBar.css'
 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 { app } from '@tauri-apps/api'
 
 interface IProps {
@@ -47,6 +48,9 @@ export default class TopBar extends React.Component<IProps, IState> {
           <div id="settingsBtn" className='TopButton'>
             <img src={cogBtn} alt="settings" />
           </div>
+          <div id="downloadsBtn" className='TopButton'>
+            <img src={downBtn} alt="downloads" />
+          </div>
         </div>
       </div>
     )

src/ui/components/common/Checkbox.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 
 interface IProps {
-  label: string
+  label: string,
+  onChange: () => void,
 }
 
 interface IState {
@@ -13,12 +14,13 @@ export default class Checkbox extends React.Component<IProps, IState> {
     super(props)
 
     this.state = {
-      checked: false,
+      checked: false
     }
   }
 
   handleChange = () => {
     this.setState({ checked: !this.state.checked })
+    this.props.onChange()
   }
 
   render() {