add reconnecting mechanism

bangsalvoserver · Sep 28, 2024 · 3bacf70 · 3bacf70
1 parent d6af2b4
commit 3bacf70
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 10 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -24,7 +24,9 @@ export default function App() {
           handleConnect={handleConnect}
         />;
       case 'loading':
-        return <LoadingScene />;
+        return <LoadingScene 
+          message={scene.message}
+        />;
       case 'waiting_area':
         return <WaitingArea
           lobbies={scene.lobbies}

diff --git a/src/Locale/English/Labels.ts b/src/Locale/English/Labels.ts
@@ -64,6 +64,7 @@ export const LABELS_ENGLISH: LabelRegistry = {
         APP_WELCOME: "Welcome to bang.salvoserver.it,\nBang! online with all expansions!\nPlay now for free with your friends!",
         DISCORD_LINK: "Join the official discord",
         LOADING: "Loading...",
+        RECONNECTING: "Reconnecting...", 
         UNKNOWN_CARD: "(Unknown card)",
         UNKNOWN_PLAYER: "(Unknown player)",
         USER_DISCONNECTED: "(Disconnected)",

diff --git a/src/Locale/Italian/Labels.ts b/src/Locale/Italian/Labels.ts
@@ -64,6 +64,7 @@ export const LABELS_ITALIAN: LabelRegistry = {
         APP_WELCOME: "Benvenuto in bang.salvoserver.it,\nBang! online con tutte le espansioni!\nGioca gratis adesso con i tuoi amici!",
         DISCORD_LINK: "Entra nel discord ufficiale",
         LOADING: "Caricamento...",
+        RECONNECTING: "Riconnessione...", 
         UNKNOWN_CARD: "(Carta sconosciuta)",
         UNKNOWN_PLAYER: "(Giocatore sconosciuto)",
         USER_DISCONNECTED: "(Disconnesso)",

diff --git a/src/Model/SceneState.ts b/src/Model/SceneState.ts
@@ -27,7 +27,8 @@ export type ErrorState =
     { type: 'server', code: number | null, message: string };
 
 export type SceneState =
-    { type: 'home' | 'loading', error?: ErrorState } |
+    { type: 'home', error?: ErrorState } |
+    { type: 'loading', error?: ErrorState, message: string } |
     { type: 'waiting_area', error?: ErrorState, lobbies: LobbyValue[] } |
     { type: 'lobby' | 'game', error?: ErrorState, lobbies: LobbyValue[], lobbyInfo: LobbyInfo, lobbyState: LobbyState };
 
@@ -36,7 +37,7 @@ export type UpdateFunction<T> = (value: T) => T;
 export type SceneUpdate =
     { reset: Empty } |
     { setError: ErrorState | null } |
-    { gotoLoading: Empty } |
+    { gotoLoading: string } |
     { gotoWaitingArea: Empty } |
     { gotoGame: Empty } |
     { updateLobbies: UpdateFunction<LobbyValue[]> } |
@@ -46,7 +47,7 @@ export type SceneUpdate =
 
 export function defaultCurrentScene(sessionId?: number): SceneState {
     if (sessionId) {
-        return { type: 'loading' };
+        return { type: 'loading', message: 'LOADING' };
     } else {
         return { type: 'home' };
     }
@@ -59,8 +60,8 @@ export const sceneReducer = createUnionReducer<SceneState, SceneUpdate>({
     setError(error) {
         return { ...this, error: error ?? undefined };
     },
-    gotoLoading() {
-        return { type: 'loading' };
+    gotoLoading(message) {
+        return { type: 'loading', error: this.error, message };
     },
     gotoWaitingArea() {
         if ('lobbies' in this) {

diff --git a/src/Model/UseBangConnection.ts b/src/Model/UseBangConnection.ts
@@ -1,4 +1,4 @@
-import { useEffect, useReducer } from "react";
+import { useEffect, useReducer, useRef } from "react";
 import useEvent from "react-use-event-hook";
 import { GameUpdate } from "../Scenes/Game/Model/GameUpdate";
 import { UserValue } from "../Scenes/Lobby/LobbyUser";
@@ -77,13 +77,16 @@ export default function useBangConnection() {
 
     const connection = useWebSocket<ServerMessage, ClientMessage>(Env.bangServerUrl);
 
+    const reconnecting = useRef(false);
+
     const initial = useEvent(() => {
         if (settings.sessionId) {
             connection.connect();
         }
     });
 
     const connected = useEvent(async () => {
+        reconnecting.current = false;
         connection.sendMessage({
             connect: {
                 username: settings.username || '',
@@ -101,6 +104,11 @@ export default function useBangConnection() {
             sceneDispatch({ setError: { type: 'server', code, message: 'ERROR_CANNOT_CONNECT_TO_SERVER' }});
         } else if (settings.sessionId) {
             sceneDispatch({ setError: { type: 'server', code, message: 'ERROR_DISCONNECTED_FROM_SERVER' }});
+            if (!reconnecting.current && code !== null && code !== 1000) {
+                sceneDispatch({ gotoLoading: 'RECONNECTING' });
+                reconnecting.current = true;
+                connection.connect();
+            }
         }
     });
 
@@ -165,7 +173,8 @@ export default function useBangConnection() {
     const handleConnect = useEvent(() => {
         if (connection.connectionState.state !== 'connected') {
             connection.connect();
-            sceneDispatch({ gotoLoading: {} });
+            reconnecting.current = false;
+            sceneDispatch({ gotoLoading: 'LOADING' });
         }
     });
 

diff --git a/src/Scenes/Loading/Loading.tsx b/src/Scenes/Loading/Loading.tsx
@@ -1,9 +1,13 @@
 import BangLogo from "../../Components/BangLogo";
 import getLabel from "../../Locale/GetLabel";
 
-export default function LoadingScene() {
+export interface LoadingProps {
+    message: string;
+}
+
+export default function LoadingScene({ message }: LoadingProps) {
     return <div className="flex flex-col items-center">
         <BangLogo />
-        <h1 className="text-2xl font-bold">{getLabel('ui', 'LOADING')}</h1>
+        <h1 className="text-2xl font-bold">{getLabel('ui', message)}</h1>
     </div>
 }