components: Remove redundant prop from Game component.

We can access the current game's id from the GameContext.
shivansh-bhatnagar18 · Jun 23, 2024 · 60db2de · 60db2de
1 parent cb86075
commit 60db2de
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 48 deletions.
diff --git a/backend/src/uno-game-engine/events/announceUno.ts b/backend/src/uno-game-engine/events/announceUno.ts
@@ -2,11 +2,19 @@
 // Once a player has two cards, they can announce "UNO!".
 // The announcement of "UNO" needs to be repeated every time the player is left with one or two cards.
 import assert from 'assert';
-import { EventResult, GameEvent, GameEventTypes, GamePlayer } from '../../types';
+import {
+    EventResult,
+    GameEvent,
+    GameEventTypes,
+    GamePlayer,
+} from '../../types';
 import { GameEngine } from '../engine';
 import { getPlayer, getThrowableCards } from './eventHandlerUtils';
 
-export function canAnnounceUNO(game: GameEngine, player: GamePlayer): EventResult {
+export function canAnnounceUNO(
+    game: GameEngine,
+    player: GamePlayer
+): EventResult {
     const throwableCards = getThrowableCards(game, player);
     if (
         player.cards.length > 2 ||

diff --git a/frontend/src/contexts/GameContext.tsx b/frontend/src/contexts/GameContext.tsx
@@ -5,7 +5,12 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from './AuthContext';
 import { useToast } from '../library/toast/toast-context';
 import * as channel from '../channel';
-import { APIPlayer, GameStatus, RunningEvents, UNOCard } from '../../../backend/src/types';
+import {
+    APIPlayer,
+    GameStatus,
+    RunningEvents,
+    UNOCard,
+} from '../../../backend/src/types';
 
 interface GameState {
     id: string;
@@ -15,13 +20,13 @@ interface GameState {
     currentPlayerIndex: number;
     lastThrownCard: UNOCard | null;
     direction: number;
-    status: GameStatus;
+    status: GameStatus | '';
     runningEvents: RunningEvents;
 }
 
 interface GameContextProps {
-    gameState: GameState | null;
-    setGameState: React.Dispatch<React.SetStateAction<GameState | null>>;
+    gameState: GameState;
+    setGameState: React.Dispatch<React.SetStateAction<GameState>>;
 }
 
 const defaultGameState: GameState = {
@@ -32,23 +37,20 @@ const defaultGameState: GameState = {
     thrownCards: [],
     direction: 1,
     id: '',
-    status: 'READY',
+    status: '',
     runningEvents: {
         vulnerableToUNO: null,
         hasAnnouncedUNO: null,
     },
 };
 
 const GameContext = createContext<GameContextProps>({
-    gameState: null,
+    gameState: defaultGameState,
     setGameState: () => {},
 });
 
 export const GameProvider = () => {
-    const [gameState, setGameState] = useState<GameState | null>(
-        defaultGameState
-    );
-    const [currentGame, setCurrentGame] = useState<string>('');
+    const [gameState, setGameState] = useState<GameState>(defaultGameState);
     const location = useLocation();
     const navigate = useNavigate();
     const toast = useToast();
@@ -89,7 +91,6 @@ export const GameProvider = () => {
                         throw new Error('Game state not received');
                     }
                     setGameState(data.gameState);
-                    setCurrentGame(data.gameState.id);
                 } else if (gameType === 'create') {
                     const res = await fetch(`${backendUrl}/game/create`, {
                         method: 'POST',
@@ -108,7 +109,6 @@ export const GameProvider = () => {
                     setGameState(data.gameState);
                     // extract card and player data from the game state and store in maps
                     console.log(data.gameState.id);
-                    setCurrentGame(data.gameState.id);
                 }
             } catch (e) {
                 toast.open({
@@ -128,18 +128,18 @@ export const GameProvider = () => {
             // todo: this callback will be replaced by the event dispatcher
             console.log('Handling event:', event);
             if (event.type === 'STATE_SYNC') {
-                console.log(event.data)
+                console.log(event.data);
                 setGameState(event.data);
             }
         });
     }, [gameState]);
 
     return (
         <GameContext.Provider value={{ gameState, setGameState }}>
-            {gameState ? (
-                <Game currentGame={currentGame as string} />
+            {gameState !== defaultGameState ? (
+                <Game />
             ) : (
-                <div className="bg-gray-800 h-screen text-white text-5xl font-kavoon text-center">
+                <div className="flex justify-center items-center h-screen bg-gray-800 text-white text-5xl font-kavoon">
                     Loading...
                 </div>
             )}

diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx
@@ -1,41 +1,21 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useGameContext } from '../contexts/GameContext';
 import Button from '../library/button';
 import { useModal } from '../library/modal/ModalContext';
-import { useToast } from '../library/toast/toast-context';
 import CopyButton from '../library/copyButton';
 import Chatbox from '../library/chatbox/Chatbox';
 
-interface GameProps {
-    currentGame: string;
-}
-
-const Game: React.FC<GameProps> = ({ currentGame }) => {
+function Game() {
     const { gameState } = useGameContext();
     const modal = useModal();
     useEffect(() => {
         if (gameState) {
-            modal.show(<CreateGameModalContent />, 'large', [], false);
+            modal.show(<GamePropertiesModal />, 'large', [], false);
         }
         // eslint-disable-next-line
     }, [gameState]);
 
-    function CreateGameModalContent() {
-        const { open } = useToast();
-
-        function joinHandler() {
-            if (currentGame.trim()) {
-                modal.hide();
-            } else {
-                open({
-                    message: 'Error In Game Creation',
-                    duration: 3000,
-                    position: 'top-center',
-                    color: 'warning',
-                });
-            }
-        }
-
+    function GamePropertiesModal() {
         return (
             <>
                 <div className="flex flex-col items-center justify-center p-4 space-y-6">
@@ -51,15 +31,18 @@ const Game: React.FC<GameProps> = ({ currentGame }) => {
                     <div className="flex justify-center px-5">
                         <h2 className="text-bold font-bold  font-[Kavoon]  text-[#333] text-[20px]">
                             Game Id :{' '}
-                            <span className="text-[#555] "> {currentGame}</span>
-                            &nbsp; <CopyButton copyText={currentGame} />
+                            <span className="text-[#555] ">
+                                {' '}
+                                {gameState.id}
+                            </span>
+                            &nbsp; <CopyButton copyText={gameState.id} />
                         </h2>
                     </div>
                     <div className="flex justify-center px-5">
                         <h2 className="text-bold font-bold  text-[#333]  font-[Kavoon] text-[20px]">
                             Players Joined :{' '}
                             <span className="text-[#555] font-[Roboto]">
-                                {gameState?.players.length}
+                                {gameState.players.length}
                             </span>
                         </h2>
                     </div>
@@ -68,12 +51,12 @@ const Game: React.FC<GameProps> = ({ currentGame }) => {
                             Invite More Players : &nbsp;
                             <CopyButton
                                 priorText="Copy Invite Link"
-                                copyText={`${process.env.FRONTEND_URL}/game?type=join&code='${currentGame}`}
+                                copyText={`${process.env.FRONTEND_URL}/game?type=join&code='${gameState.id}`}
                                 postText="Copied"
                             />
                         </h2>
                     </div>
-                    <Button type={'submit'} onClick={joinHandler}>
+                    <Button type={'submit'} onClick={() => modal.hide()}>
                         Join Game
                     </Button>
                 </div>
@@ -182,6 +165,6 @@ const Game: React.FC<GameProps> = ({ currentGame }) => {
             <Chatbox />
         </div>
     );
-};
+}
 
 export default Game;