REMOTE: Added possibility to change target IP of remote API (#943)

src/GameOptions/ui/RemoteAPIPage.tsx

@@ -7,12 +7,18 @@ import { isRemoteFileApiConnectionLive, newRemoteFileApiConnection } from "../..
 
 export const RemoteAPIPage = (): React.ReactElement => {
   const [remoteFileApiPort, setRemoteFileApiPort] = useState(Settings.RemoteFileApiPort);
+  const [remoteFileApiAddress, setRemoteFileApiAddress] = useState(Settings.RemoteFileApiAddress);
 
   function handleRemoteFileApiPortChange(event: React.ChangeEvent<HTMLInputElement>): void {
     setRemoteFileApiPort(Number(event.target.value));
     Settings.RemoteFileApiPort = Number(event.target.value);
   }
 
+  function handleRemoteFileApiAddressChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setRemoteFileApiAddress(String(event.target.value));
+    Settings.RemoteFileApiAddress = String(event.target.value);
+  }
+
   return (
     <GameOptionsPage title="Remote API">
       <Typography>
@@ -31,7 +37,27 @@ export const RemoteAPIPage = (): React.ReactElement => {
       <Tooltip
         title={
           <Typography>
-            This port number is used to connect to a Remote API port, please ensure that it matches with your Remote API
+            This address is used to connect to a Remote API, please ensure that it matches with your Remote API address.
+            Default localhost.
+          </Typography>
+        }
+      >
+        <TextField
+          key={"remoteAPIAddress"}
+          InputProps={{
+            startAdornment: <Typography>Address:&nbsp;</Typography>,
+          }}
+          value={remoteFileApiAddress}
+          onChange={handleRemoteFileApiAddressChange}
+          placeholder="localhost"
+          size={"medium"}
+        />
+      </Tooltip>
+      <br />
+      <Tooltip
+        title={
+          <Typography>
+            This port number is used to connect to a Remote API, please ensure that it matches with your Remote API
             server port. Set to 0 to disable the feature.
           </Typography>
         }
@@ -44,13 +70,15 @@ export const RemoteAPIPage = (): React.ReactElement => {
                 Port:&nbsp;
               </Typography>
             ),
-            endAdornment: <Button onClick={newRemoteFileApiConnection}>Connect</Button>,
           }}
           value={remoteFileApiPort}
           onChange={handleRemoteFileApiPortChange}
           placeholder="12525"
+          size={"medium"}
         />
       </Tooltip>
+      <br />
+      <Button onClick={newRemoteFileApiConnection}>Connect</Button>
     </GameOptionsPage>
   );
 };

src/RemoteFileAPI/RemoteFileAPI.ts

@@ -5,8 +5,11 @@ let server: Remote;
 
 export function newRemoteFileApiConnection(): void {
   if (server) server.stopConnection();
-  if (Settings.RemoteFileApiPort === 0) return;
-  server = new Remote("localhost", Settings.RemoteFileApiPort);
+  if (Settings.RemoteFileApiPort === 0 || Settings.RemoteFileApiPort > 65535) return;
+  server = new Remote(
+    Settings.RemoteFileApiAddress === "" ? "localhost" : Settings.RemoteFileApiAddress,
+    Settings.RemoteFileApiPort,
+  );
   server.startConnection();
 }
 

src/Settings/Settings.ts

@@ -42,6 +42,8 @@ export const Settings = {
   MaxPortCapacity: 50,
   /** Limit the number of entries in the terminal. */
   MaxTerminalCapacity: 500,
+  /** IP address the Remote File API client will try to connect to. Default localhost . */
+  RemoteFileApiAddress: "localhost",
   /** Port the Remote File API client will try to connect to. 0 to disable. */
   RemoteFileApiPort: 0,
   /** Whether to save the game when the player saves any file. */