enable grasscutter checkbox

src/ui/App.tsx

@@ -9,6 +9,7 @@ import { getConfig } from '../utils/configuration'
 // Major Components
 import Topbar from './components/TopBar'
 import BigButton from './components/common/BigButton'
+import Checkbox from './components/common/Checkbox'
 
 async function playGame() {
   const config = await getConfig()
@@ -23,7 +24,10 @@ function App() {
   return (
     <div className="App">
       <Topbar />
-      <div id="playButtons">
+      <div id="playButton">
+        <div id="serverControls">
+          <Checkbox label="Connect via Grasscutter" />
+        </div>
         <BigButton text="PLAY DA GAME :D" onClick={playGame} id="officialPlay" />
       </div>
     </div>

src/ui/components/common/Checkbox.tsx

@@ -1,15 +1,32 @@
 import React from 'react'
 
 interface IProps {
-
+  label: string
 }
 
 interface IState {
-
+  checked: boolean
 }
 
 export default class Checkbox extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
+
+    this.state = {
+      checked: false,
+    }
+  }
+
+  handleChange = () => {
+    this.setState({ checked: !this.state.checked })
+  }
+
+  render() {
+    return (
+      <div className="Checkbox">
+        <input type="checkbox" onChange={this.handleChange} />
+        <label>{this.props.label}</label>
+      </div>
+    )
   }
 }

src/ui/custom.css

@@ -1,17 +1,21 @@
-#playButtons {
+#playButton {
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: column;
-  align-items: center;
+  align-items: left;
   justify-content: space-between;
 
   position: absolute;
   top: 80%;
-  left: 40%;
+  left: 60%;
 
-  width: 50%;
+  width: 30%;
-  height: 10%;
+  height: 12%;
 }
 
-#playButtons .BigButton {
+#playButton .BigButton {
   height: 100%;
+}
+
+#serverControls {
+  color: white;
 }