stop reconnecting at some point so firefox does not block reconnection after reload

tank-frontend/src/ClientScreen.tsx

@@ -1,8 +1,7 @@
-import useWebSocket from 'react-use-websocket';
 import {useEffect, useRef} from 'react';
 import './ClientScreen.css';
-import {hslToString, Theme} from "./theme.ts";
+import {hslToString, Theme} from './theme.ts';
-import {makeApiUrl} from './serverCalls.tsx';
+import {makeApiUrl, useMyWebSocket} from './serverCalls.tsx';
 
 const pixelsPerRow = 352;
 const pixelsPerCol = 160;
@@ -77,7 +76,7 @@ function drawPixelsToCanvas(
             return otherTanksColor;
 
         return foreground;
-    }
+    };
 
     const imageData = context.getImageData(0, 0, width, height, {colorSpace: 'srgb'});
     const data = imageData.data;
@@ -111,9 +110,7 @@ export default function ClientScreen({theme, player}: {
         lastMessage,
         sendMessage,
         getWebSocket
-    } = useWebSocket(url.toString(), {
+    } = useMyWebSocket(url.toString(), {});
-        shouldReconnect: () => true,
-    });
 
     const socket = getWebSocket();
     if (socket)

tank-frontend/src/Controls.tsx

@@ -1,7 +1,7 @@
 import './Controls.css';
-import useWebSocket, {ReadyState} from 'react-use-websocket';
+import {ReadyState} from 'react-use-websocket';
 import {useEffect} from 'react';
-import {makeApiUrl} from './serverCalls.tsx';
+import {makeApiUrl, useMyWebSocket} from './serverCalls.tsx';
 
 export default function Controls({player}: { player: string }) {
     const url = makeApiUrl('/controls', 'ws');
@@ -11,9 +11,7 @@ export default function Controls({player}: { player: string }) {
         sendMessage,
         getWebSocket,
         readyState
-    } = useWebSocket(url.toString(), {
+    } = useMyWebSocket(url.toString(), {});
-        shouldReconnect: () => true,
-    });
 
     const socket = getWebSocket();
     if (socket)

tank-frontend/src/PlayerInfo.tsx

@@ -1,6 +1,6 @@
-import {makeApiUrl, Scores} from './serverCalls';
+import {makeApiUrl, Scores, useMyWebSocket} from './serverCalls';
 import Column from './components/Column.tsx';
-import useWebSocket, {ReadyState} from 'react-use-websocket';
+import {ReadyState} from 'react-use-websocket';
 import {useEffect, useState} from 'react';
 
 function ScoreRow({name, value}: {
@@ -42,9 +42,12 @@ export default function PlayerInfo({player}: { player: string }) {
     const url = makeApiUrl('/player');
     url.searchParams.set('name', player);
 
-    const {lastJsonMessage, readyState, sendMessage} = useWebSocket<PlayerInfoMessage>(url.toString(), {
+    const {
-        onMessage: () => setShouldSendMessage(true),
+        lastJsonMessage,
-        shouldReconnect: () => true,
+        readyState,
+        sendMessage
+    } = useMyWebSocket<PlayerInfoMessage>(url.toString(), {
+        onMessage: () => setShouldSendMessage(true)
     });
 
     useEffect(() => {

tank-frontend/src/serverCalls.tsx

@@ -1,3 +1,5 @@
+import useWebSocket, {Options} from 'react-use-websocket';
+
 export function makeApiUrl(path: string, protocol: 'http' | 'ws' = 'http') {
     return new URL(`${protocol}://${window.location.hostname}${path}`);
 }
@@ -16,3 +18,12 @@ export type Player = {
     readonly name: string;
     readonly scores: Scores;
 };
+
+export function useMyWebSocket<T = unknown>(url: string, options: Options) {
+    return useWebSocket<T>(url, {
+        shouldReconnect: () => true,
+        reconnectAttempts: 5,
+        onReconnectStop: () => alert('server connection failed. please reload.'),
+        ...options
+    });
+}