Merge pull request #113 from the-ai-team/fix/112-refinements

[Related #112] Minor refinements

apps/client/src/app.tsx

@@ -0,0 +1,22 @@
+import { ReactElement, useEffect } from 'react';
+
+import {
+  clearGlobalToastManager,
+  setGlobalToastManager,
+} from './utils/globalToastManager';
+import { useToastContext } from './hooks';
+import { Router } from './router';
+
+export function App(): ReactElement {
+  const addToast = useToastContext();
+
+  useEffect(() => {
+    setGlobalToastManager(addToast);
+
+    return () => {
+      clearGlobalToastManager();
+    };
+  }, [addToast]);
+
+  return <Router />;
+}

apps/client/src/components/molecules/list-item/ListItem.component.tsx

@@ -9,6 +9,7 @@ export interface ListItemProps {
   imgURL?: string;
   rightText?: string;
   number?: number;
+  isHighlighted?: boolean;
   isTranslucent?: boolean;
 }
 
@@ -18,13 +19,15 @@ export interface ListItemProps {
  * @param imgURL - URL of the Image/Icon to be displayed on the left side of the list item (optional)
  * @param rightText - Text to be displayed on the right side of the list item (optional)
  * @param [isTranslucent=false] - Changes the item to translucent (optional)
+ * @param [isHighlighted=false] - Changes the item to highlighted (optional)
  * @param [number=-1] - Number to be displayed on the left side of the list item (optional)
  */
 export function ListItem({
   title,
   imgURL,
   rightText,
   isTranslucent = false,
+  isHighlighted = false,
   number = -1,
 }: ListItemProps): ReactElement {
   return (
@@ -34,7 +37,9 @@ export function ListItem({
         'px-10 py-3',
         'bg-neutral-20',
         'rounded-md',
-        'border-[3px] border-neutral-40',
+        isHighlighted
+          ? 'border-neutral-40 border-4'
+          : 'border-neutral-30 border-2',
         { 'opacity-60': isTranslucent },
       )}>
       <div className='flex items-center justify-center gap-4'>

apps/client/src/constants/connection.ts

@@ -2,3 +2,4 @@ import { REQUEST_WAITING_TIME } from '@razor/constants';
 
 export const REQUEST_WAITING_TIME_FOR_CLIENT =
   import.meta.env.VITE_REQUEST_WAITING_TIME || REQUEST_WAITING_TIME;
+export const RECONNECT_TRY_INTERVAL = 2000;

apps/client/src/controllers/player-join.controller.ts

@@ -3,7 +3,7 @@ import { AddPlayerPayload, store } from '@razor/store';
 
 import { AllClientPubSubEventsToTypeMap } from '../models';
 import { pubsub } from '../utils/pubsub';
-import { getSavedPlayerId } from '../utils/save-player-id';
+import { savedData } from '../utils/save-player-data';
 
 type PlayerJoinControllerArgs =
   AllClientPubSubEventsToTypeMap[SocketProtocols.PlayerJoin];
@@ -15,7 +15,7 @@ function playerJoinController({
   const { id: playerId, state, ...playerData } = data.player;
 
   // Skip if player is self
-  if (playerId === getSavedPlayerId()) {
+  if (playerId === savedData.savedPlayerId) {
     return;
   }
 

apps/client/src/hooks/index.ts

@@ -1 +1,2 @@
+export * from './useToastContext';
 export * from './useToastPortal';

apps/client/src/main.tsx

@@ -8,8 +8,8 @@ import './i18n';
 import './controllers';
 
 import { Debugger } from './utils/Debugger';
+import { App } from './app';
 import { ToastContextProvider } from './providers';
-import { Router } from './router';
 
 import './styles.css';
 
@@ -21,7 +21,7 @@ root.render(
   <StrictMode>
     <Provider store={store}>
       <ToastContextProvider>
-        <Router />
+        <App />
       </ToastContextProvider>
       <Debugger />
     </Provider>

apps/client/src/models/failures/failures.ts

@@ -0,0 +1,3 @@
+export enum Failures {
+  RequestTimeout,
+}

apps/client/src/models/failures/index.ts

@@ -0,0 +1 @@
+export * from './failures';

apps/client/src/models/index.ts

@@ -1,3 +1,4 @@
+export * from './failures';
 export * from './pubsub';
 export * from './tags';
 export * from './units';

apps/client/src/models/pubsub/pubsub-events.ts

@@ -26,6 +26,14 @@ type ModifiedEvent<T extends object, AdditionalProps extends object> = {
   data: T;
 } & AdditionalProps;
 
+// TODO: Add this in future
+// type ModifiedInitialProtocolToTypeMap = {
+//   [K in keyof InitialProtocolToTypeMap]: ModifiedEvent<
+//     InitialProtocolToTypeMap[K],
+//     { socketId: SocketId }
+//   >;
+// };
+
 type ModifiedOtherProtocolToTypeMap = {
   [K in keyof OtherProtocolToTypeMap]: ModifiedEvent<
     OtherProtocolToTypeMap[K],

apps/client/src/pages/home/Home.page.tsx

@@ -10,6 +10,9 @@ import { ReactComponent as ChevronRight } from 'pixelarticons/svg/chevron-right.
 
 import { ReactComponent as Logo } from '../../assets/images/logo.svg';
 import { ReactComponent as LogoFill } from '../../assets/images/logo-fill.svg';
+import banner1 from '../../assets/images/panel-images/home1.png';
+import banner2 from '../../assets/images/panel-images/home2.png';
+import banner3 from '../../assets/images/panel-images/home3.png';
 import {
   Button,
   ButtonWithInput,
@@ -44,19 +47,31 @@ export function Home(): ReactElement {
   const [isJoinRoomButtonValueValid, toggleIsRoomButtonValueValid] =
     useState<boolean>(false);
   const [avtarURL, setAvtarURL] = useState<string>('');
+  const [isRouteToRoomBtnDisabled, toggleIsRouteToRoomBtnDisabled] =
+    useState<boolean>(false);
 
   const routeToRoom = async (): Promise<void> => {
-    if (roomId) {
-      // TODO: Add try catch and make a error info ui popups.
-      const roomIdFromServer = await requestToJoinRoom({ playerName, roomId });
-      if (roomIdFromServer) {
-        navigate(`/${roomIdFromServer}/room`);
-      }
-    } else {
-      const roomIdFromServer = await requestToCreateRoom({ playerName });
-      if (roomIdFromServer) {
-        navigate(`/${roomIdFromServer}/room`);
+    toggleIsRouteToRoomBtnDisabled(true);
+    try {
+      if (roomId) {
+        const roomIdFromServer = await requestToJoinRoom({
+          playerName,
+          roomId,
+        });
+        if (roomIdFromServer) {
+          navigate(`/${roomIdFromServer}/room`);
+        }
+        toggleIsRouteToRoomBtnDisabled(false);
+      } else {
+        const roomIdFromServer = await requestToCreateRoom({ playerName });
+        if (roomIdFromServer) {
+          navigate(`/${roomIdFromServer}/room`);
+        }
+        toggleIsRouteToRoomBtnDisabled(false);
       }
+    } catch (_) {
+      navigate('../');
+      toggleIsRouteToRoomBtnDisabled(false);
     }
   };
 
@@ -132,11 +147,7 @@ export function Home(): ReactElement {
     }
   };
 
-  const panelImages: Array<string> = [
-    'https://via.placeholder.com/300x150',
-    'https://via.placeholder.com/300x150',
-    'https://via.placeholder.com/300x150',
-  ];
+  const panelImages: Array<string> = [banner1, banner2, banner3];
 
   return (
     <div className={cs('flex justify-center items-center', 'w-full h-full')}>
@@ -170,7 +181,7 @@ export function Home(): ReactElement {
         <Button
           onClick={routeToRoom}
           isFullWidth={true}
-          isDisabled={!isPlayerNameValid}
+          isDisabled={!isPlayerNameValid || isRouteToRoomBtnDisabled}
           isCarVisible={true}>
           {roomId ? t('actions.join') : t('actions.create')}
         </Button>
@@ -217,6 +228,7 @@ export function Home(): ReactElement {
           </Button>
         ) : (
           <ButtonWithInput
+            inputPlaceholder='i234S67B'
             onClick={(id: string): void => joinRoomButtonHandler(id)}
             onInputChange={(e): void => roomIdChangeHandler(e.target.value)}
             inputState={getInputState(

apps/client/src/pages/leaderboard/Leaderboard.page.tsx

@@ -7,8 +7,12 @@ import { RootState } from '@razor/store';
 import cs from 'classnames';
 
 import { ReactComponent as Logo } from '../../assets/images/logo.svg';
+import banner1 from '../../assets/images/panel-images/leaderboard1.png';
+import banner2 from '../../assets/images/panel-images/leaderboard2.png';
+import banner3 from '../../assets/images/panel-images/leaderboard3.png';
 import { Description, Panel } from '../../components';
 import { Timer } from '../../components/molecules/timer';
+import { savedData } from '../../utils/save-player-data';
 
 import { LeaderboardList } from './templates/leaderboard_list/LeaderboardList.template';
 export function Leaderboard(): ReactElement {
@@ -20,13 +24,9 @@ export function Leaderboard(): ReactElement {
     `T:${roomId}-R:${raceIndex}` as AppRaceId,
   );
 
-  const timeout = useRef(10);
+  const timeout = useRef(20);
 
-  const panelImages: Array<string> = [
-    'https://via.placeholder.com/300x150',
-    'https://via.placeholder.com/300x150',
-    'https://via.placeholder.com/300x150',
-  ];
+  const panelImages: Array<string> = [banner1, banner2, banner3];
 
   const handleTimeEnd = (): void => {
     navigate(`/${roomId}/room`);
@@ -44,7 +44,12 @@ export function Leaderboard(): ReactElement {
 
   return (
     <div className='h-full w-full relative'>
-      <Logo className='absolute top-0 left-10 w-[150px] h-[150px]' />
+      <Logo
+        className='absolute top-0 left-10 w-[150px] h-[150px] cursor-pointer'
+        onClick={(): void => {
+          savedData.reset();
+        }}
+      />
       <Panel title={t('panel.title')}>
         <Description
           title={t('panel.descriptions.0.title')}

apps/client/src/pages/leaderboard/templates/leaderboard_list/LeaderboardList.template.tsx

@@ -26,7 +26,7 @@ export function LeaderboardList({
   const timeoutEntries = entries.filter(
     entry => entry.status === AppPlayerStatus.Timeout,
   );
-  const playersModel = game.playersModel;
+  const racePlayers = game.racesModel[raceId]?.players || [];
 
   const raceTextLength = game.racesModel[raceId]?.text.length || 0;
 
@@ -101,8 +101,13 @@ export function LeaderboardList({
           )}
           ref={containerRef}>
           {completedEntries.map((entry, index) => {
-            const player = playersModel[entry.playerId];
+            const player = racePlayers[entry.playerId];
+            if (!player) {
+              return <></>;
+            }
+
             const values = entry.values as AppFinishedPlayerValues;
+
             return (
               <ListItem
                 title={player.name}
@@ -117,7 +122,11 @@ export function LeaderboardList({
             <div className='w-full h-2 flex-shrink-0 bg-neutral-40 bg-opacity-60 rounded-full my-6' />
           ) : null}
           {timeoutEntries.map(entry => {
-            const player = playersModel[entry.playerId];
+            const player = racePlayers[entry.playerId];
+            if (!player) {
+              return <></>;
+            }
+
             const values = entry.values as AppTimeoutPlayerValues;
             const completePercentage =
               raceTextLength > 0

apps/client/src/pages/race/Race.page.tsx

@@ -26,7 +26,7 @@ import {
   sendTypeLog,
   typeLogPusher,
 } from '../../services/handlers/send-type-log';
-import { getSavedPlayerId } from '../../utils/save-player-id';
+import { savedData } from '../../utils/save-player-data';
 
 import { RaceText } from './templates/race-text/RaceText.template';
 import { RaceTrack } from './templates/race-view/RaceTrack.template';
@@ -41,7 +41,7 @@ export function Race(): ReactElement {
   const [raceReadyTime, setRaceReadyTime] =
     useState<number>(RACE_READY_COUNTDOWN);
   const [raceTime, setRaceTime] = useState<number>(0);
-  const selfPlayerId = useRef<PlayerId>(getSavedPlayerId());
+  const selfPlayerId = useRef<PlayerId>(savedData.savedPlayerId);
   const [isTypeLocked, setIsTypeLocked] = useState<boolean>(true);
   const [isSpectator, setIsSpectator] = useState<boolean>(false);
 
@@ -69,7 +69,9 @@ export function Race(): ReactElement {
     if (selfPlayer) {
       const isIdle = selfPlayer.state === AppPlayerState.Idle;
       setIsSpectator(isIdle);
-      setRaceReadyTime(0);
+      if (isIdle) {
+        setRaceReadyTime(0);
+      }
     }
 
     // Looking for race in races model
@@ -185,11 +187,11 @@ export function Race(): ReactElement {
               />
             </div>
             {!isSpectator ? (
-              <div className='grid grid-cols-4'>
+              <div className='flex gap-12'>
                 <div
                   className={cs(
                     'm-auto 2xl:static',
-                    'scale-50 2xl:scale-90 origin-top-right 2xl:origin-center',
+                    'scale-50 2xl:scale-100 origin-top-right 2xl:origin-center',
                     'fixed -top-40 right-8 z-10',
                   )}>
                   <Timer time={raceTime} onTimeEnd={raceTimeEndHandler} />

apps/client/src/pages/race/story-common-utils/RaceLogUpdaters.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { AppPlayerId, AppRaceId } from '@razor/models';
 import { RootState } from '@razor/store';
 import { extractId, ExtractIdType } from '@razor/util';
-import { getSavedPlayerId } from 'apps/client/src/utils/save-player-id';
+import { savedData } from 'apps/client/src/utils/save-player-data';
 import { ReactComponent as ChevronRight } from 'pixelarticons/svg/chevron-right.svg';
 
 import { Button, ButtonWithInput, Text } from '../../../components';
@@ -22,7 +22,7 @@ export function RaceLogUpdaters({
   const [raceId, setRaceId] = useState<AppRaceId | null>(null);
   const [count, setCount] = useState(0);
   const [playerIds, setPlayerIds] = useState<AppPlayerId[]>([]);
-  const selfPlayerId = useRef<AppPlayerId | null>(getSavedPlayerId());
+  const selfPlayerId = useRef<AppPlayerId | null>(savedData.savedPlayerId);
 
   useEffect(() => {
     const racesModel = game.racesModel;

apps/client/src/pages/race/story-common-utils/test-race.ts

@@ -1,7 +1,7 @@
 import { M_RACE_TEXT0 } from '@razor/mocks';
 import { AppPlayerId, AppRace, AppRaceId, AppStateModel } from '@razor/models';
 import { initializeStore } from '@razor/store';
-import { savePlayerId } from 'apps/client/src/utils/save-player-id';
+import { savedData } from 'apps/client/src/utils/save-player-data';
 
 const initialState: AppStateModel = {
   tournamentsModel: {},
@@ -19,7 +19,7 @@ const selfPlayerId = store.dispatch.game.joinPlayer({
   receivedTournamentId: '',
   playerName: 'Player1',
 });
-savePlayerId(selfPlayerId);
+savedData.savedPlayerId = selfPlayerId;
 
 let game = store.getState().game;
 const playersModel = game.playersModel;

apps/client/src/pages/race/templates/race-text/RaceText.stories.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import { Provider } from 'react-redux';
 import { Meta } from '@storybook/react';
 import { ToastContextProvider } from 'apps/client/src/providers';
-import { getSavedPlayerId } from 'apps/client/src/utils/save-player-id';
+import { savedData } from 'apps/client/src/utils/save-player-data';
 
 import {
   addSampleRaceLogs,
@@ -19,7 +19,7 @@ function sendTypeLog(playerCursorAt: number): void {
     textLength: playerCursorAt + 1,
   };
 
-  const playerId = getSavedPlayerId();
+  const playerId = savedData.savedPlayerId;
   if (playerId) {
     store.dispatch.game.sendTypeLog({
       playerLog,