Merge UDP connection into TCP (#135)

* Covert from UDP to TCP * Remove challenge inputs * Sync MsgType enum with Runtime and remove socket ready handler for ip address listeners * Lint * Variable renaming and tweak console log for createPacket default case * Add UserInputs encoding * Remove UDP code and rename TCPConnt to RuntimeConnection * Add useRef for keyboardBitMap in useKeyboardMode hook * Lint PeripheralGroup and make peripherals not collapsed by default * Tweak console logs in Runtime.ts * Add spacing to status labels in DNav * Fix gamepad mapping buttons instead of axes * Remove UDPTunneling ip address code * Only log when errors for sending inputs and add back some comments regarding peripherals Co-authored-by: meshankhosla <[email protected]>
pioneers · Oct 2, 2021 · 26d94fd · 26d94fd
1 parent fa051e4
commit 26d94fd
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 355 deletions.
diff --git a/main/networking/Runtime.ts b/main/networking/Runtime.ts
diff --git a/renderer/actions/InfoActions.ts b/renderer/actions/InfoActions.ts
@@ -27,11 +27,6 @@ export const ipChange: InfoActions['ipChange'] = (ipAddress: string) => ({
   ipAddress
 });
 
-export const udpTunnelIpChange = (ipAddress: string) => ({
-  type: consts.InfoActionsTypes.UDP_TUNNEL_IP_CHANGE,
-  ipAddress
-});
-
 export const sshIpChange = (ipAddress: string) => ({
   type: consts.InfoActionsTypes.SSH_IP_CHANGE,
   ipAddress

diff --git a/renderer/components/ConfigBox.tsx b/renderer/components/ConfigBox.tsx
@@ -6,7 +6,7 @@ import { Dispatch } from 'redux';
 import _ from 'lodash';
 import { defaults, getValidationState, logging, isValidationState } from '../utils/utils';
 import { updateFieldControl } from '../actions/FieldActions';
-import { ipChange, udpTunnelIpChange, sshIpChange } from '../actions/InfoActions';
+import { ipChange, sshIpChange } from '../actions/InfoActions';
 import storage from 'electron-json-storage';
 import { Formik } from 'formik';
 
@@ -18,13 +18,11 @@ interface Config {
 interface StateProps {
   stationNumber: number;
   ipAddress: string;
-  udpTunnelAddress: string;
   sshAddress: string;
 }
 
 interface DispatchProps {
   onIPChange: (ipAddress: string) => void;
-  onUDPTunnelingIpAddressChange: (ipAddress: string) => void;
   onSSHAddressChange: (ipAddress: string) => void;
   onFCUpdate: (config: Config) => void;
 }
@@ -41,25 +39,17 @@ type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaEle
 
 export const ConfigBoxComponent = (props: Props) => {
   const [ipAddress, setIPAddress] = useState(props.ipAddress);
-  const [udpTunnelIpAddress, setUDPTunnelIpAddress] = useState(props.udpTunnelAddress);
   const [sshAddress, setSSHAddress] = useState(props.sshAddress);
   const [fcAddress, setFCAddress] = useState(props.fcAddress);
   const [stationNumber, setStationNumber] = useState(props.stationNumber);
   const [originalIPAddress, setOriginalIPAddress] = useState(props.ipAddress);
-  const [originalUDPTunnelIpAddress, setOriginalUDPTunnelIpAddress] = useState(props.udpTunnelAddress);
   const [originalSSHAddress, setOriginalSSHAddress] = useState(props.sshAddress);
   const [originalStationNumber, setOriginalStationNumber] = useState(props.stationNumber);
   const [originalFCAddress, setOriginalFCAddress] = useState(props.fcAddress);
 
   const saveChanges = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    props.onUDPTunnelingIpAddressChange(udpTunnelIpAddress);
-    setOriginalFCAddress(udpTunnelIpAddress);
-    storage.set('udpTunnelIpAddress', { udpTunnelIpAddress }, (err: any) => {
-      if (err) logging.log(err);
-    });
-
     props.onIPChange(ipAddress);
     setOriginalIPAddress(ipAddress);
     storage.set('ipAddress', { ipAddress }, (err: any) => {
@@ -94,10 +84,6 @@ export const ConfigBoxComponent = (props: Props) => {
     setIPAddress(e.currentTarget.value);
   };
 
-  const handleUDPTunnelIpChange = (e: React.FormEvent<FormControlElement>) => {
-    setUDPTunnelIpAddress(e.currentTarget.value);
-  };
-
   const handleSSHIpChange = (e: React.FormEvent<FormControlElement>) => {
     setSSHAddress(e.currentTarget.value);
   }
@@ -114,7 +100,6 @@ export const ConfigBoxComponent = (props: Props) => {
     setIPAddress(originalIPAddress);
     setStationNumber(originalStationNumber);
     setFCAddress(originalFCAddress);
-    setUDPTunnelIpAddress(originalUDPTunnelIpAddress);
     setSSHAddress(originalSSHAddress);
     props.hide();
   };
@@ -139,18 +124,6 @@ export const ConfigBoxComponent = (props: Props) => {
       }
     });
 
-    storage.get('udpTunnelIpAddress', (err: any, data: object) => {
-      if (err) {
-        logging.log(err);
-      } else if (!_.isEmpty(data)) {
-        const udpTunnelIpAddress = (data as { udpTunnelIpAddress: string | undefined }).udpTunnelIpAddress ?? defaults.IPADDRESS;
-
-        props.onUDPTunnelingIpAddressChange(udpTunnelIpAddress);
-        setUDPTunnelIpAddress(udpTunnelIpAddress);
-        setOriginalUDPTunnelIpAddress(udpTunnelIpAddress);
-      }
-    });
-
     storage.get('sshAddress', (err: any, data: object) => {
       if (err) {
         logging.log(err);
@@ -203,12 +176,6 @@ export const ConfigBoxComponent = (props: Props) => {
                 <Form.Control.Feedback />
             </Form.Group>
 
-            <Form.Group controlId="ipAddress">
-                <Form.Label>UDP Tunneling</Form.Label>
-                <Form.Control type="text" value={udpTunnelIpAddress} placeholder="i.e. 192.168.100.13" onChange={handleUDPTunnelIpChange} isValid={isValidationState(ipAddress)} />
-                <Form.Control.Feedback />
-            </Form.Group>
-
             <Form.Group controlId="ipAddress">
                 <Form.Label>SSH Address</Form.Label>
                 <Form.Control type="text" value={sshAddress} placeholder="i.e. 192.168.100.13" onChange={handleSSHIpChange} isValid={isValidationState(ipAddress)} />
@@ -243,9 +210,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   onIPChange: (ipAddress: string) => {
     dispatch(ipChange(ipAddress));
   },
-  onUDPTunnelingIpAddressChange: (ipAddress: string) => {
-    dispatch(udpTunnelIpChange(ipAddress));
-  },
   onSSHAddressChange: (ipAddress: string) => {
     dispatch(sshIpChange(ipAddress));
   },

diff --git a/renderer/components/DNav.tsx b/renderer/components/DNav.tsx
@@ -15,7 +15,6 @@ interface StateProps {
   blueMasterTeamNumber: number;
   goldMasterTeamNumber: number;
   ipAddress: string;
-  udpTunnelAddress: string;
   sshAddress: string;
   fieldControlStatus: boolean;
   latencyValue: number;
@@ -77,7 +76,6 @@ const DNavComponent = (props: Props) => {
     masterStatus,
     isRunningCode,
     ipAddress,
-    udpTunnelAddress,
     sshAddress,
     runtimeVersion,
     codeStatus,
@@ -101,7 +99,6 @@ const DNavComponent = (props: Props) => {
       <ConfigBox
         shouldShow={showConfigModal}
         ipAddress={ipAddress}
-        udpTunnelAddress={udpTunnelAddress}
         sshAddress={sshAddress}
         hide={() => toggleConfigModal(!showConfigModal)}
       />
@@ -117,6 +114,7 @@ const DNavComponent = (props: Props) => {
         ) : (
           ''
         )}
+        <div style={{ marginRight: '25px' }}></div>
         <Navbar.Text id="battery-indicator">
           <StatusLabel
             connectionStatus={connectionStatus}
@@ -128,6 +126,7 @@ const DNavComponent = (props: Props) => {
             fieldControlStatus={fieldControlStatus}
           />
         </Navbar.Text>
+        <div style={{ marginRight: '25px' }}></div>
         <Navbar.Text id="Latency">
           <Badge variant={getLatencyThresholdColor(props.latencyValue)}>{`Latency: ${formatLatencyValue(props.latencyValue)}`}</Badge>
         </Navbar.Text>
@@ -176,7 +175,6 @@ const mapStateToProps = (state: ApplicationState) => ({
   codeStatus: state.info.studentCodeStatus,
   heart: state.fieldStore.heart,
   ipAddress: state.info.ipAddress,
-  udpTunnelAddress: state.info.udpTunnelIpAddress,
   sshAddress: state.info.sshAddress,
   fieldControlStatus: state.fieldStore.fieldControl,
   runtimeVersion: state.peripherals.runtimeVersion,

diff --git a/renderer/components/Gamepad.tsx b/renderer/components/Gamepad.tsx
@@ -89,7 +89,7 @@ export const Gamepad = (props: Props) => {
               <tr>
                 <th>Value</th>
                 {_.range(NUM_GAMEPAD_AXES).map((gamepadButtonAxis: number) => (
-                  <td>{values.buttons[gamepadButtonAxis]}</td>
+                  <td>{values.axes[gamepadButtonAxis]}</td>
                 ))}
               </tr>
             </tbody>

diff --git a/renderer/components/PeripheralGroup.tsx b/renderer/components/PeripheralGroup.tsx
@@ -21,39 +21,39 @@ cleanerNames[PeripheralTypes.GameValues] = 'Game Values';
 cleanerNames[PeripheralTypes.PolarBear] = 'Polar Bear';
 cleanerNames[PeripheralTypes.KoalaBear] = 'Koala Bear';
 
-interface PGProps {
-    peripherals: Peripheral[],
-    groupName: string,
+interface PeripheralGroupProps {
+  peripherals: Peripheral[];
+  groupName: string;
 }
 
-const PeripheralGroup = (props: PGProps) => {
-    const [out, setOut] = useState(true); // controls toggle
+const PeripheralGroup = (props: PeripheralGroupProps) => {
+  const [out, setOut] = useState(false); // controls toggle
 
-    const { peripherals, groupName } = props;
-    const groupNameCleaned = groupName; //cleanerNames[groupName] as string;
+  const { peripherals, groupName } = props;
+  const groupNameCleaned = groupName; //cleanerNames[groupName] as string;
 
-    return (
-      <Card key={`${groupNameCleaned || 'Default'}-Card`}>
-        <Card.Header>
-          <Card.Title onClick={() => setOut(!out)} style={{ fontWeight: 'bold' }}>
-            {groupName || 'Generic'}
-          </Card.Title>
-        </Card.Header>
-        <Collapse in={!out}>
-          <Card.Body style={{ padding: '10px' }}>
-            {_.map(peripherals, (peripheral: Peripheral) => (
-              <PeripheralComponent
-                key={peripheral.uid}
-                uid={peripheral.uid}
-                name={peripheral.name}
-                type={peripheral.type}
-                params={peripheral.params}
-              />
-            ))}
-          </Card.Body>
-        </Collapse>
-      </Card>
-    )
-}
+  return (
+    <Card key={`${groupNameCleaned || 'Default'}-Card`}>
+      <Card.Header>
+        <Card.Title onClick={() => setOut(!out)} style={{ fontWeight: 'bold' }}>
+          {groupName || 'Generic'}
+        </Card.Title>
+      </Card.Header>
+      <Collapse in={!out}>
+        <Card.Body style={{ padding: '10px' }}>
+          {_.map(peripherals, (peripheral: Peripheral) => (
+            <PeripheralComponent
+              key={peripheral.uid}
+              uid={peripheral.uid}
+              name={peripheral.name}
+              type={peripheral.type}
+              params={peripheral.params}
+            />
+          ))}
+        </Card.Body>
+      </Collapse>
+    </Card>
+  );
+};
 
-export default PeripheralGroup;
+export default PeripheralGroup;
diff --git a/renderer/hooks/editor/useKeyboardMode.tsx b/renderer/hooks/editor/useKeyboardMode.tsx
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { keyboardButtons } from '../../consts';
 
 interface Props {
@@ -10,6 +10,8 @@ interface Props {
 export const useKeyboardMode = (props: Props) => {
   const [isKeyboardModeToggled, setIsKeyboardModeToggled] = useState(false);
   const [keyboardBitmap, setKeyboardBitmap] = useState(0);
+  const keyboardBitmapRef = useRef(0);
+  keyboardBitmapRef.current = keyboardBitmap;
 
   // toggle keyboard control and add/remove listening for key presses to control robot
   const toggleKeyboardControl = () => {
@@ -25,6 +27,7 @@ export const useKeyboardMode = (props: Props) => {
     } else {
       window.removeEventListener('keydown', turnCharacterOn);
       window.removeEventListener('keyup', turnCharacterOff);
+      setKeyboardBitmap(0);
     }
 
     return () => {
@@ -39,7 +42,7 @@ export const useKeyboardMode = (props: Props) => {
 
   const updateKeyboardBitmap = useCallback((currentCharacter: string, isKeyPressed: boolean) => {
     const keyboardNum = keyboardButtons[currentCharacter] as number;
-    let newKeyboardBitmap: number = keyboardBitmap;
+    let newKeyboardBitmap: number = keyboardBitmapRef.current;
 
     const shift = bitShiftLeft(1, keyboardNum);
     const MAX_INT32_BITS = 2147483648; // 2^31
@@ -56,7 +59,7 @@ export const useKeyboardMode = (props: Props) => {
     }
 
     setKeyboardBitmap(newKeyboardBitmap);
-    props.onUpdateKeyboardBitmap(keyboardBitmap);
+    props.onUpdateKeyboardBitmap(newKeyboardBitmap);
   }, []);
 
   const turnCharacterOff = useCallback(
@@ -68,7 +71,12 @@ export const useKeyboardMode = (props: Props) => {
 
   const turnCharacterOn = useCallback(
     (e: KeyboardEvent) => {
-      updateKeyboardBitmap(e.key, true);
+      // Handle special ctrl + q edge case
+      if (e.ctrlKey && e.key === 'q') {
+        setIsKeyboardModeToggled(false);
+      } else {
+        updateKeyboardBitmap(e.key, true);
+      }
     },
     [updateKeyboardBitmap]
   );

diff --git a/renderer/reducers/info.ts b/renderer/reducers/info.ts
@@ -8,7 +8,6 @@ import {
   RuntimeDisconnectAction,
   UpdateCodeStatusAction,
   IpChangeAction,
-  UDPTunnelIpChangeAction,
   SSHIpChangeAction,
   UpdateRobotAction,
   NotificationChangeAction,
@@ -21,14 +20,12 @@ type Actions =
   | RuntimeDisconnectAction
   | UpdateCodeStatusAction
   | IpChangeAction
-  | UDPTunnelIpChangeAction
   | SSHIpChangeAction
   | UpdateRobotAction
   | NotificationChangeAction;
 
 interface InfoState {
   ipAddress: string;
-  udpTunnelIpAddress: string;
   sshAddress: string;
   studentCodeStatus: number;
   isRunningCode: boolean;
@@ -42,7 +39,6 @@ interface InfoState {
 
 const initialInfoState = {
   ipAddress: defaults.IPADDRESS,
-  udpTunnelIpAddress: defaults.IPADDRESS,
   sshAddress: defaults.IPADDRESS,
   studentCodeStatus: robotState.IDLE,
   isRunningCode: false,
@@ -95,12 +91,6 @@ export const info = (state: InfoState = initialInfoState, action: Actions): Info
         ...state,
         ipAddress: action.ipAddress,
       };
-    case consts.InfoActionsTypes.UDP_TUNNEL_IP_CHANGE:
-      ipcRenderer.send('udpTunnelIpAddress', action.ipAddress);
-      return {
-        ...state,
-        udpTunnelIpAddress: action.ipAddress
-      };
     case consts.InfoActionsTypes.SSH_IP_CHANGE:
       return {
         ...state,

diff --git a/renderer/types/actions/index.ts b/renderer/types/actions/index.ts
@@ -38,7 +38,6 @@ export {
   RuntimeDisconnectAction,
   UpdateCodeStatusAction,
   IpChangeAction,
-  UDPTunnelIpChangeAction,
   SSHIpChangeAction,
   NotificationChangeAction,
 } from './info-actions';
diff --git a/renderer/types/actions/info-actions.ts b/renderer/types/actions/info-actions.ts
@@ -26,11 +26,6 @@ export interface IpChangeAction {
   ipAddress: string;
 }
 
-export interface UDPTunnelIpChangeAction {
-  type: consts.InfoActionsTypes.UDP_TUNNEL_IP_CHANGE;
-  ipAddress: string;
-}
-
 export interface SSHIpChangeAction {
   type: consts.InfoActionsTypes.SSH_IP_CHANGE;
   ipAddress: string;
@@ -54,8 +49,6 @@ export interface InfoActions {
 
   ipChange: (ipAddress: string) => IpChangeAction;
 
-  udpTunnelIpChange: (ipAddress: string) => UDPTunnelIpChangeAction;
-
   sshIpChange: (ipAddress: string) => SSHIpChangeAction;
 
   notificationChange: () => NotificationChangeAction;