add network disconnect message

ReDBrother · ReDBrother · commit 377748dc36ac · 2021-10-15T18:57:27.000+03:00
diff --git a/services/app/assets/js/widgets/containers/NetworkAlert.jsx b/services/app/assets/js/widgets/containers/NetworkAlert.jsx
@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import { networkMachineStates } from '../machines/game';
+import GameContext from './GameContext';
+
+const NetworkAlert = () => {
+    const { current: gameCurrent } = useContext(GameContext);
+
+    if (gameCurrent.matches({ network: networkMachineStates.disconnected })) {
+        return <div className="col-12 bg-warning text-center">Check your network connection</div>;
+    }
+
+    return (<></>);
+};
+
+export default NetworkAlert;
diff --git a/services/app/assets/js/widgets/containers/RootContainer.jsx b/services/app/assets/js/widgets/containers/RootContainer.jsx
@@ -20,6 +20,7 @@ import FeedBackWidget from '../components/FeedBackWidget';
 import GamePreview from '../components/Game/GamePreview';
 import { replayerMachineStates } from '../machines/game';
 import AnimationModal from '../components/AnimationModal';
+import NetworkAlert from './NetworkAlert';
 
 const steps = [
   {
@@ -235,6 +236,7 @@ const RootContainer = ({
           <GameContext.Provider value={{ current, send, service }}>
             <div className="x-outline-none">
               <GameWidgetGuide />
+              <NetworkAlert />
               <div className="container-fluid">
                 <div className="row no-gutter cb-game">
                   <AnimationModal setModalShowing={setModalShowing} modalShowing={modalShowing} />
diff --git a/services/app/assets/js/widgets/machines/game.js b/services/app/assets/js/widgets/machines/game.js
@@ -77,7 +77,8 @@ const machine = {
         none: {
           on: {
             JOIN: { target: 'connected' },
-            FAILURE: { target: 'disconnected', actions: ['handleFailureJoin'] },
+            FAILURE_JOIN: { target: 'disconnected', actions: ['handleFailureJoin'] },
+            FAILURE: { target: 'disconnected', actions: ['handleDisconnection'] },
           },
         },
         disconnected: {
@@ -265,9 +266,15 @@ const states = {
     ended: 'on.ended',
     off: 'off',
   },
+  network: {
+    none: 'none',
+    disconnected: 'disconnected',
+    connected: 'connected',
+  },
 };
 
 export const gameMachineStates = states.game;
 export const replayerMachineStates = states.replayer;
+export const networkMachineStates = states.network;
 
 export default machine;
