From ba304fa3eab9a01e0d59c74e446117457a9791d7 Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Sun, 8 May 2022 22:02:18 -0700
Subject: [PATCH] enable grasscutter checkbox

---
 src/ui/App.tsx                        |  6 +++++-
 src/ui/components/common/Checkbox.tsx | 21 +++++++++++++++++++--
 src/ui/custom.css                     | 18 +++++++++++-------
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 0059cd2..4919b47 100644
--- a/src/ui/App.tsx
+++ b/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>
diff --git a/src/ui/components/common/Checkbox.tsx b/src/ui/components/common/Checkbox.tsx
index 80a2fb6..1a5bc3e 100644
--- a/src/ui/components/common/Checkbox.tsx
+++ b/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>
+    )
   }
 }
\ No newline at end of file
diff --git a/src/ui/custom.css b/src/ui/custom.css
index 91bc409..cbfef1d 100644
--- a/src/ui/custom.css
+++ b/src/ui/custom.css
@@ -1,17 +1,21 @@
-#playButtons {
+#playButton {
   display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
+  flex-direction: column;
+  align-items: left;
   justify-content: space-between;
 
   position: absolute;
   top: 80%;
-  left: 40%;
+  left: 60%;
 
-  width: 50%;
-  height: 10%;
+  width: 30%;
+  height: 12%;
 }
 
-#playButtons .BigButton {
+#playButton .BigButton {
   height: 100%;
+}
+
+#serverControls {
+  color: white;
 }
\ No newline at end of file