SH-72 Debug lobby issues

apps/shelter-client/src/components/ActivityLogs.tsx

@@ -1,5 +1,5 @@
 import '../styles/ActivityLogs.scss';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../redux/store';
 import { getActivityLogsByLobbyId } from '../api/requests';
@@ -14,6 +14,7 @@ const ActivityLogs = () => {
   const user = useSelector((state: RootState) => state.user);
   const app = useSelector((state: RootState) => state.app);
   const lobby = useSelector((state: RootState) => state.lobby);
+  const activityLogsRef = useRef<HTMLDivElement>(null);
 
   // LOCAL STATE
   const updateState = (newState: Partial<IState>): void =>
@@ -22,6 +23,10 @@ const ActivityLogs = () => {
     activityLogs: [],
   });
 
+  if (activityLogsRef.current) {
+    activityLogsRef.current.scrollTop = activityLogsRef.current.scrollHeight;
+  }
+
   useEffect(() => {
     handleGetActivityLogs();
   }, []);
@@ -39,7 +44,7 @@ const ActivityLogs = () => {
       <div className="info-title">
         <h3>Activity Logs</h3>
       </div>
-      <div className="activity-logs-wraper">
+      <div className="activity-logs-wraper" ref={activityLogsRef}>
         {state.activityLogs.map((data: { payload: any; createdAt: string }) => {
           return (
             <div className="activity-logs-block">

apps/shelter-client/src/components/Chat.tsx

@@ -158,6 +158,8 @@ const Chat: FC = () => {
       </div>
       <div className="input-container">
         <input
+          autoComplete="off"
+          spellCheck="false"
           type="text"
           placeholder="Type your message..."
           value={state.newMessage}

apps/shelter-client/src/components/CustomDropdown.tsx

@@ -44,22 +44,21 @@ const CustomDropdown: React.FC<DropdownProps> = ({
     };
   }, [isOpened, onClose, type]);
 
-  const isTypeNotifications = type === 'notifications';
   return (
-    <div className={`login-container`} ref={dropdownRef}>
+    <div className="login-container" ref={dropdownRef}>
       {children}
       {isOpened && (
         <div
-          className={`drop-down-content ${isTypeNotifications && 'notifications-content'}`}
+          className={`drop-down-content ${type === 'notifications' && 'notifications-content'}`}
         >
           {(type === 'account' || type === 'login') && (
-            <div className={'login-down-text'}>{text}</div>
+            <div className="login-down-text">{text}</div>
           )}
           {type === 'notifications' && (
-            <div className={'notifications-down-text'}>{text}</div>
+            <div className="notifications-down-text">{text}</div>
           )}
           {list.map((item, index) => (
-            <div className={'button-wraper'} key={index}>
+            <div className="button-wraper" key={index}>
               <div className="default-btn-style">
                 <Button
                   icon={item.icon}

apps/shelter-client/src/components/Navigation.tsx

@@ -15,8 +15,8 @@ import { getUser } from '../api/requests';
 import CustomDropdown from './CustomDropdown';
 import useSocketManager from '../hooks/useSocketManager';
 import { Listener } from '../websocket/SocketManager';
-import { ServerEvents, ServerPayloads } from '../websocket/types';
-import { updateLobby } from '../redux/reducers/lobbySlice';
+import { ClientEvents, ServerEvents, ServerPayloads } from '../websocket/types';
+import { resetLobby, updateLobby } from '../redux/reducers/lobbySlice';
 import { Notification, showNotification } from '../libs/notifications';
 import { updateApp } from '../redux/reducers/appSlice';
 import { faClockRotateLeft } from '@fortawesome/free-solid-svg-icons';
@@ -38,6 +38,7 @@ const Navigation = () => {
 
   const user = useSelector((state: RootState) => state.user);
   const app = useSelector((state: RootState) => state.app);
+  const lobby = useSelector((state: RootState) => state.lobby);
 
   // LOCAL STATE
   const updateState = (newState: Partial<IState>): void =>
@@ -65,7 +66,6 @@ const Navigation = () => {
         stages: data.stages,
       };
       dispatch(updateLobby(context));
-      console.log('ss', context);
 
       // navigate to current room
       const route = ROUTES.ROOMS + '/' + data.lobbyId;
@@ -169,13 +169,38 @@ const Navigation = () => {
       isActivityLogsOpened: isOpened,
     });
   };
+  const handleLogoClick = () => {
+    const handleLobbyLeave = () => {
+      sm.emit({
+        event: ClientEvents.LobbyLeave,
+        data: {},
+      });
+    };
+    if (lobby.hasStarted && !lobby.hasFinished) {
+      const result = window.confirm(
+        'Are you sure you want to leave the game? Any progress will be lost!',
+      );
+      if (result) {
+        dispatch(resetLobby());
+        handleLobbyLeave();
+        navigate(ROUTES.MAIN);
+        return;
+      } else {
+        return;
+      }
+    } else {
+      dispatch(resetLobby());
+      handleLobbyLeave();
+      navigate(ROUTES.MAIN);
+    }
+  };
 
   // Navigation
   return (
     <div>
       <div className="navigation-wrapper">
         <div className="navigation-container">
-          <div className="logo-container" onClick={() => navigate(ROUTES.MAIN)}>
+          <div className="logo-container" onClick={handleLogoClick}>
             <img className="logo-image" src={intoTheShelter} alt={''} />
           </div>
           {user.userId && (

apps/shelter-client/src/helpers.ts

@@ -2,6 +2,7 @@ import Cookies from 'js-cookie';
 import { ROUTES, CHAR_TYPES } from './constants';
 
 export type charListType = {
+  stage: any;
   type: string;
   icon: string;
   text: string;

apps/shelter-client/src/pages/Main.tsx

@@ -41,7 +41,7 @@ const MainPage = () => {
     sm.emit({
       event: ClientEvents.LobbyCreate,
       data: {
-        maxClients: 8, // used as default
+        maxClients: 4, // used as default
         organizatorId: user.userId,
       },
     });