add checkConnectionAndMaybeAlert

src/MancalaApp.tsx

@@ -12,10 +12,10 @@ import Home from './routes/Home';
 import { initContext } from './context/context';
 import { RTMTWS } from './rtmt/rtmt_websocket';
 import { getColorByBrightness } from './util/ColorUtil';
-import { ConnectionState } from './models/ConnectionState';
 import { Theme } from './theme/Theme';
 import LobyPage from './routes/LobyPage';
 import swal from 'sweetalert';
+import { ConnectionState } from './rtmt/rtmt';
 
 const context = initContext();
 
@@ -89,7 +89,7 @@ const MancalaApp: FunctionComponent = () => {
                     <Route index element={<Home context={context} theme={theme} userKey={userKey} />} />
                     <Route path="/" >
                         <Route path="game" >
-                            <Route path=":gameId" element={<GamePage context={context} theme={theme} userKey={userKey} connectionState={connectionState} />}  ></Route>
+                            <Route path=":gameId" element={<GamePage context={context} theme={theme} userKey={userKey} />}  ></Route>
                         </Route>
                         <Route path="loby" element={<LobyPage context={context} theme={theme} userKey={userKey} />}>
                         </Route>

src/routes/GamePage.tsx

@@ -20,7 +20,6 @@ import UserStatus from '../components/UserStatus';
 import { channel_on_game_update, channel_on_game_crashed, channel_on_game_user_leave, channel_on_user_connection_change, channel_leave_game, channel_game_move, channel_listen_game_events, channel_unlisten_game_events } from '../const/channel_names';
 import { Context } from '../context/context';
 import useWindowDimensions from '../hooks/useWindowDimensions';
-import { ConnectionState } from '../models/ConnectionState';
 import { GameMove } from '../models/GameMove';
 import { LoadingState } from '../models/LoadingState';
 import { Theme } from '../theme/Theme';
@@ -30,13 +29,13 @@ import Center from '../components/Center';
 import { Game, GameUsersConnectionInfo } from '../models/Game';
 import notyf from '../util/Notyf';
 import swal from 'sweetalert';
+import Util from '../util/Util';
 
 const GamePage: FunctionComponent<{
     context: Context,
     userKey?: string,
     theme: Theme,
-    connectionState: ConnectionState
-}> = ({ context, userKey, theme, connectionState }) => {
+}> = ({ context, userKey, theme }) => {
     let params = useParams<{ gameId: string }>();
 
     const [game, setGame] = useState<Game | undefined>(undefined);
@@ -139,6 +138,7 @@ const GamePage: FunctionComponent<{
     const checkHasAnOngoingAction = () => hasOngoingAction;
 
     const onLeaveGameClick = () => {
+        if(Util.checkConnectionAndMaybeAlert(context)) return;
         swal({
             title: context.texts.AreYouSureToLeaveGame,
             icon: "warning",
@@ -153,6 +153,7 @@ const GamePage: FunctionComponent<{
     };
 
     const onNewGameClick = () => {
+        if(Util.checkConnectionAndMaybeAlert(context)) return;
         navigate("/loby")
     };
 
@@ -173,6 +174,7 @@ const GamePage: FunctionComponent<{
             notyf.error(context.texts.UMustWaitUntilCurrentMoveComplete);
             return;
         }
+        if(Util.checkConnectionAndMaybeAlert(context)) return;
         if (!boardViewModel) return;
         //TODO: this check should be in mancala.js
         if (pit.stoneCount === 0) {
@@ -228,13 +230,13 @@ const GamePage: FunctionComponent<{
     const bottomLocatedUser = {
         id: bottomLocatedUserId,
         name: "Anonymous",
-        isOnline: isSpectator ? isUserOnline(bottomLocatedUserId) : connectionState === "connected",
+        isOnline: isSpectator ? isUserOnline(bottomLocatedUserId) : context.rtmt.connectionState === "connected",
         isAnonymous: true
     };
     const currentUser = isSpectator ? {
         id: "2",
         name: "Anonymous",
-        isOnline: connectionState === "connected",
+        isOnline: context.rtmt.connectionState === "connected",
         isAnonymous: true
     } : bottomLocatedUser;
     const leftPlayer = userKeyWhoLeave ? (userKeyWhoLeave === topLocatedUser.id ? topLocatedUser : bottomLocatedUser) : undefined;

src/routes/Home.tsx

@@ -11,6 +11,7 @@ import ThemeSwitchMenu from "../components/headerbar/ThemeSwitchMenu";
 import Button from "../components/Button";
 import { Context } from "../context/context";
 import { Link, useNavigate } from "react-router-dom";
+import Util from "../util/Util";
 
 const Home: FunctionComponent<{
   context: Context,
@@ -21,6 +22,7 @@ const Home: FunctionComponent<{
   const navigate = useNavigate();
 
   const onNewGameClick = () => {
+    if(Util.checkConnectionAndMaybeAlert(context)) return;
     navigate("/loby")
   };