server ip and port input

src/ui/components/ServerLaunchSection.css

@@ -1,3 +1,28 @@
+#playButton {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  position: absolute;
+  top: 75%;
+  left: 60%;
+
+  width: 30%;
+  height: 18%;
+}
+
+#playButton > div {
+  margin-top: 4px;
+}
+
+#playButton .BigButton {
+  height: 100%;
+}
+
+#serverControls {
+  color: white;
+}
+
 #serverControls .CheckboxDisplay {
   border-color: #fff;
   background: #fff;
@@ -23,6 +48,7 @@
   align-items: center;
 
   height: 100%;
+  max-height: 60px;
 }
 
 #officialPlay {
@@ -37,3 +63,16 @@
   height: 20px;
   filter: invert(28%) sepia(28%) saturate(1141%) hue-rotate(352deg) brightness(96%) contrast(88%);
 }
+
+.ServerConfig input {
+  padding: 6px;
+  border-radius: 6px;
+}
+
+#ip {
+  margin-right: 6px;
+}
+
+#port {
+  width: 15%;
+}

src/ui/components/ServerLaunchSection.tsx

@@ -7,6 +7,7 @@ import { invoke } from '@tauri-apps/api/tauri'
 
 import Server from '../../resources/icons/server.svg'
 import './ServerLaunchSection.css'
+import TextInput from './common/TextInput'
 
 interface IProps {
   [key: string]: any
@@ -47,6 +48,11 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
 
     config.toggle_grasscutter = !config.toggle_grasscutter
 
+    // Set state as well
+    this.setState({
+      grasscutterEnabled: config.toggle_grasscutter
+    })
+
     await saveConfig(config)
   }
 
@@ -88,6 +94,16 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
         <div id="serverControls">
           <Checkbox id="enableGC" label={this.state.checkboxLabel} onChange={this.toggleGrasscutter} checked={this.state.grasscutterEnabled}/>
         </div>
+
+        <div className="ServerConfig">
+          {
+            this.state.grasscutterEnabled ?
+              [ <TextInput id="ip" key="ip" placeholder="IP Address..." />,
+                <TextInput id="port" key="port" placeholder="Port..." /> ]
+              : null
+          }
+        </div>
+
         <div className="ServerLaunchButtons">
           <BigButton onClick={this.playGame} id="officialPlay">{this.state.buttonLabel}</BigButton>
           <BigButton onClick={this.launchServer} id="serverLaunch">

src/ui/components/common/TextInput.tsx

@@ -6,6 +6,7 @@ interface IProps {
   placeholder?: string;
   onChange?: (value: string) => void;
   readOnly?: boolean;
+  id?: string;
 }
 
 interface IState {
@@ -33,7 +34,7 @@ export default class TextInput extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <input readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => {
+      <input id={this.props?.id} readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => {
         this.setState({ value: e.target.value })
         if (this.props.onChange) this.props.onChange(e.target.value)
       }} />

src/ui/custom.css

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