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 (
-
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
{
constructor(props: IProps) {
super(props)
+
+ this.state = {
+ checked: false,
+ }
+ }
+
+ handleChange = () => {
+ this.setState({ checked: !this.state.checked })
+ }
+
+ render() {
+ return (
+
+
+
+
+ )
}
}
\ 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