show connection state

mobile/src/App.tsx

@@ -5,7 +5,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { RootStackParamList } from './types';
 import { HomeScreen } from './screens/HomeScreen';
 import LobyScreen from './screens/LobyScreen';
-import { initContext } from './context/context';
+import { Context, initContext } from './context/context';
 import { GameScreen } from './screens/GameScreen';
 import { RTMTWS } from './rtmt/rtmt_websocket';
 import { ConnectionState } from './rtmt/rtmt';
@@ -32,8 +32,6 @@ function App() {
   const { t, i18n } = useTranslation();
 
   React.useEffect(() => {
-    console.log(deviceLanguage);
-    
     i18n.changeLanguage(deviceLanguage === "tr_TR" ? "tr" : "en")
   }, []);
 
@@ -46,7 +44,10 @@ function App() {
 
   const onConnectionError = (event: Event) => console.error("(RTMT) Connection Error: ", event);
 
-  const onConnectionChange = (_connectionState: ConnectionState) => setConnetionState(_connectionState);
+  const onConnectionChange = (_connectionState: ConnectionState) => {
+    Snackbar.show({text: getTextByConnectionState(context, _connectionState)})
+    return setConnetionState(_connectionState);
+  };
 
   const onThemeChange = (theme: Theme) => setTheme(theme);
 
@@ -57,6 +58,16 @@ function App() {
     rtmt.connectWebSocket(userKey)
     return rtmt;
   }
+  const getTextByConnectionState = (context: Context, connectionState: ConnectionState): string => {
+    const map: { [key: string]: string } = {
+        connecting: t('Connecting'),
+        connected: t('Connected'),
+        error: t('CannotConnect'),
+        closed: t('ConnectingAgain'),
+        reconnecting: t('ConnectingAgain'),
+    };
+    return map[connectionState];
+}
 
   const loadUserKeyAndConnectServer = () => {
     context.userKeyStore.getUserKey().then((userKey: string) => {

mobile/src/screens/LobyScreen.tsx

@@ -27,7 +27,7 @@ export default function LobyScreen({ navigation, route }: LobyScreenProps) {
 
     return (
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: context.themeManager.theme?.background  }}>
-            <Text>{t('SearchingOpponent')}</Text>
+            <Text style={{color: "#000"}}>{t('SearchingOpponent')}</Text>
         </View>
     );
 }