show status of sockets independently

tank-frontend/src/ClientScreen.tsx

@@ -1,6 +1,7 @@
-import useWebSocket, {ReadyState} from 'react-use-websocket';
+import useWebSocket from 'react-use-websocket';
 import {useEffect, useRef} from 'react';
 import './ClientScreen.css';
+import {statusTextForReadyState} from './statusTextForReadyState.tsx';
 
 const pixelsPerRow = 352;
 const pixelsPerCol = 160;
@@ -47,7 +48,6 @@ function drawPixelsToCanvas(pixels: Uint8Array, canvas: HTMLCanvasElement) {
 
     drawContext.putImageData(imageData, 0, 0);
 }
-
 export default function ClientScreen({}: {}) {
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -74,16 +74,8 @@ export default function ClientScreen({}: {}) {
         sendMessage('');
     }, [lastMessage, canvasRef.current]);
 
-    const connectionStatus = {
-        [ReadyState.CONNECTING]: 'Connecting',
-        [ReadyState.OPEN]: 'Open',
-        [ReadyState.CLOSING]: 'Closing',
-        [ReadyState.CLOSED]: 'Closed',
-        [ReadyState.UNINSTANTIATED]: 'Uninstantiated',
-    }[readyState];
-
     return <>
-        <span>The WebSocket is currently {connectionStatus}</span>
+        <span>The screen is currently {statusTextForReadyState[readyState]}</span>
         <canvas ref={canvasRef} id="screen" width={pixelsPerRow} height={pixelsPerCol}/>
     </>;
 }

tank-frontend/src/Controls.tsx

@@ -1,6 +1,7 @@
 import './Controls.css';
 import useWebSocket from 'react-use-websocket';
 import {useEffect} from 'react';
+import {statusTextForReadyState} from './statusTextForReadyState.tsx';
 
 export default function Controls({playerId}: {
     playerId: string
@@ -9,7 +10,8 @@ export default function Controls({playerId}: {
     url.searchParams.set('playerId', playerId);
     const {
         sendMessage,
-        getWebSocket
+        getWebSocket,
+        readyState
     } = useWebSocket(url.toString(), {
         shouldReconnect: () => true,
     });
@@ -56,21 +58,24 @@ export default function Controls({playerId}: {
         };
     }, [sendMessage]);
 
-    return <div className="controls">
-        <div className="control">
-            <div className="row">
-                <kbd className="up">▲</kbd>
+    return <>
+        <span>The controller is currently {statusTextForReadyState[readyState]}</span>
+        <div className="controls">
+            <div className="control">
+                <div className="row">
+                    <kbd className="up">▲</kbd>
+                </div>
+                <div className="row">
+                    <kbd>◀</kbd>
+                    <kbd>▼</kbd>
+                    <kbd>▶</kbd>
+                </div>
+                <h3>Move</h3>
             </div>
-            <div className="row">
-                <kbd>◀</kbd>
-                <kbd>▼</kbd>
-                <kbd>▶</kbd>
+            <div className="control">
+                <kbd className="space">Space</kbd>
+                <h3>Fire</h3>
             </div>
-            <h3>Move</h3>
         </div>
-        <div className="control">
-            <kbd className="space">Space</kbd>
-            <h3>Fire</h3>
-        </div>
-    </div>;
+    </>;
 }

tank-frontend/src/statusTextForReadyState.tsx

@@ -0,0 +1,9 @@
+import {ReadyState} from 'react-use-websocket';
+
+export const statusTextForReadyState = {
+    [ReadyState.CONNECTING]: 'Connecting',
+    [ReadyState.OPEN]: 'Open',
+    [ReadyState.CLOSING]: 'Closing',
+    [ReadyState.CLOSED]: 'Closed',
+    [ReadyState.UNINSTANTIATED]: 'Uninstantiated',
+};