https checkbox

src-tauri/lang/en.json

@@ -4,6 +4,7 @@
     "title": "Cultivation",
     "launch_button": "Launch",
     "gc_enable": "Connect via Grasscutter",
+    "https_enable": "Use HTTPS",
     "ip_placeholder": "Server Address...",
     "port_placeholder": "Port...",
     "files_downloading": "Files Downloading: ",

src/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
 
 import './index.css'
 import App from './ui/App'
-import Test from './ui/Debug'
+//import Test from './ui/Debug'
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -11,8 +11,8 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <React.StrictMode>
-    {/* <App /> */}
+    <App />
-    <Test />
+    {/* <Test /> */}
   </React.StrictMode>
 )
 

src/ui/components/ServerLaunchSection.css

@@ -8,7 +8,7 @@
   right: 10%;
   top: 50%;
 
-  width: 30%;
+  width: 32%;
   height: 80%;
   min-width: 357px;
 }
@@ -28,30 +28,36 @@
   text-shadow: 1px 1px 8px black;
 }
 
-#serverControls .CheckboxDisplay {
+.BottomSection .CheckboxDisplay {
   border-color: #c5c5c5;
   background: #fff;
 }
 
-#serverControls .Checkbox {
+.BottomSection .CheckboxDisplay {
-  margin-bottom: 6px;
-}
-
-#serverControls .CheckboxDisplay {
   margin-right: 6px;
   box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.2);
 }
 
-#serverControls .Checkbox label {
+.BottomSection .Checkbox label {
   color: #fff;
   font-weight: bold;
   text-shadow: #222222 1px 0 10px;
 }
 
-#serverControls .Checkbox label span {
+.BottomSection .Checkbox label span {
   padding-left: 4px;
 }
 
+.ServerConfig {
+  margin-bottom: 6px;
+}
+
+.ServerConfig .Checkbox {
+  display: inline-grid;
+  vertical-align: middle;
+  margin-left: 8px;
+}
+
 .ServerLaunchButtons {
   display: flex;
   flex-direction: row;

src/ui/components/ServerLaunchSection.tsx

@@ -26,6 +26,9 @@ interface IState {
   portPlaceholder: string;
 
   portHelpText: string;
+
+  httpsLabel: string;
+  httpsEnabled: boolean;
 }
 
 export default class ServerLaunchSection extends React.Component<IProps, IState> {
@@ -40,13 +43,16 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
       port: '',
       ipPlaceholder: '',
       portPlaceholder: '',
-      portHelpText: ''
+      portHelpText: '',
+      httpsLabel: '',
+      httpsEnabled: false
     }
 
     this.toggleGrasscutter = this.toggleGrasscutter.bind(this)
     this.playGame = this.playGame.bind(this)
     this.setIp = this.setIp.bind(this)
     this.setPort = this.setPort.bind(this)
+    this.toggleHttps = this.toggleHttps.bind(this)
   }
 
   async componentDidMount() {
@@ -60,7 +66,9 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
       port: config.last_port || '',
       ipPlaceholder: await translate('main.ip_placeholder'),
       portPlaceholder: await translate('help.port_placeholder'),
-      portHelpText: await translate('help.port_help_text')
+      portHelpText: await translate('help.port_help_text'),
+      httpsLabel: await translate('main.https_enable'),
+      httpsEnabled: config.https_enabled,
     })
   }
 
@@ -165,6 +173,17 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
     })
   }
 
+  async toggleHttps() {
+    const config = await getConfig()
+
+    config.https_enabled = !config.https_enabled
+
+    // Set state as well
+    this.setState({
+      httpsEnabled: config.https_enabled
+    })
+  }
+
   render() {
     return (
       <div id="playButton">
@@ -174,13 +193,17 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
 
         {
           this.state.grasscutterEnabled && (
-            <div className="ServerConfig">
+            <div>
-              <TextInput id="ip" key="ip" placeholder={this.state.ipPlaceholder} onChange={this.setIp} initalValue={this.state.ip} />
+              <div className="ServerConfig">
-              <TextInput style={{
+                <TextInput id="ip" key="ip" placeholder={this.state.ipPlaceholder} onChange={this.setIp} initalValue={this.state.ip} />
-                width: '10%',
+                <TextInput style={{
-              }} id="port" key="port" placeholder={this.state.portPlaceholder} onChange={this.setPort} initalValue={this.state.port} />
+                  width: '10%',
-              <HelpButton contents={this.state.portHelpText} />
+                }} id="port" key="port" placeholder={this.state.portPlaceholder} onChange={this.setPort} initalValue={this.state.port} />
+                <HelpButton contents={this.state.portHelpText} />
+                <Checkbox id="httpsEnable" label={this.state.httpsLabel} onChange={this.toggleHttps} checked={this.state.httpsEnabled} />
+              </div>
             </div>
+
           )
         }
 

src/utils/configuration.ts

@@ -18,7 +18,8 @@ let defaultConfig: Configuration
     language: 'en',
     customBackground: '',
     cert_generated: false,
-    theme: 'default'
+    theme: 'default',
+    https_enabled: false,
   }
 })()
 
@@ -39,6 +40,7 @@ export interface Configuration {
   customBackground: string
   cert_generated: boolean
   theme: string;
+  https_enabled: boolean
 }
 
 export async function setConfigOption(key: string, value: any): Promise<void> {