Add setting UI for port/reconnect, swap wrong API handlers

src/GameOptions/ui/CurrentOptionsPage.tsx

@@ -1,12 +1,15 @@
-import { MenuItem, Select, SelectChangeEvent, TextField, Tooltip, Typography } from "@mui/material";
+import { MenuItem, Select, SelectChangeEvent, TextField, Tooltip, Typography, Box } from "@mui/material";
 import React, { useState } from "react";
 import { IPlayer } from "../../PersonObjects/IPlayer";
+import { isRemoteFileApiConnectionLive, newRemoteFileApiConnection } from "../../RemoteFileAPI/RemoteFileAPI";
 import { Settings } from "../../Settings/Settings";
 import { OptionSwitch } from "../../ui/React/OptionSwitch";
 import { formatTime } from "../../utils/helpers/formatTime";
 import { GameOptionsTab } from "../GameOptionsTab";
 import { GameOptionsPage } from "./GameOptionsPage";
 import { OptionsSlider } from "./OptionsSlider";
+import Button from "@mui/material/Button";
+import { ConnectionBauble } from "./ConnectionBauble";
 
 interface IProps {
   currentTab: GameOptionsTab;
@@ -21,6 +24,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
   const [terminalSize, setTerminalSize] = useState(Settings.MaxTerminalCapacity);
   const [autosaveInterval, setAutosaveInterval] = useState(Settings.AutosaveInterval);
   const [timestampFormat, setTimestampFormat] = useState(Settings.TimestampsFormat);
+  const [remoteFileApiPort, setRemoteFileApiPort] = useState(Settings.RemoteFileApiPort);
   const [locale, setLocale] = useState(Settings.Locale);
 
   function handleExecTimeChange(
@@ -81,6 +85,11 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
     Settings.TimestampsFormat = event.target.value;
   }
 
+  function handleRemoteFileApiPortChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setRemoteFileApiPort(Number(event.target.value) as number);
+    Settings.RemoteFileApiPort = Number(event.target.value);
+  }
+
   const pages = {
     [GameOptionsTab.SYSTEM]: (
       <GameOptionsPage title="System">
@@ -361,6 +370,35 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
             </>
           }
         />
+        <Tooltip title={
+          <Typography>
+            This port number is used to connect to a Remote File API port,
+            please ensure that it matches with the port the Remote File API server is publishing on (12525 by default).
+            Click the reconnect button to try and re-establish connection.
+            The little colored bauble shows whether the connection is live or not.
+        </Typography>
+      }>
+        <TextField
+            InputProps={{
+              startAdornment: (
+                <Typography
+                  color={remoteFileApiPort > 0 && remoteFileApiPort <= 65535? "success" : "error"}
+                >
+                  Remote File API port:
+                </Typography>
+              ),
+              endAdornment: (
+                <Box>
+                  <Button onClick={newRemoteFileApiConnection}>Reconnect</Button>
+                  <ConnectionBauble callback={isRemoteFileApiConnectionLive}/>
+                </Box>
+              ),
+            }}
+            value={remoteFileApiPort}
+            onChange={handleRemoteFileApiPortChange}
+            placeholder="12525"
+          />
+          </Tooltip>
       </GameOptionsPage>
     ),
   };