app: Add logging and minor fixes

- console logging in eventRecepients for debugging. - Hiding the chatbox instead of making it transparent to allow the UNO card underneath to be clicked. - Made the Game properties modal closable by esc. - Fallback to propagating STATE_SYNC on each event.
shivansh-bhatnagar18 · Jun 29, 2024 · 54c2f84 · 54c2f84
1 parent ac3bc0e
commit 54c2f84
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 20 deletions.
diff --git a/backend/src/controllers/eventControllers.ts b/backend/src/controllers/eventControllers.ts
@@ -17,6 +17,7 @@ export function addEventClient(req: AuthRequest, res: Response) {
     const clientId = req.user.id as string;
     // note: we might need to use a different client id if the user is allowed to have multiple clients
     // ie, the user is allowed to play multiple games on multiple devices at the same time
+    // console.log('adding client', clientId);
     addClient(clientId, res);
 }
 
@@ -56,18 +57,25 @@ export async function handleAppEvent(req: AuthRequest, res: Response) {
             res.status(400).send({ message: result.message });
             return;
         } else {
+            // propagateEventToClients(
+            //     event,
+            //     game.players.map((player) => player.id)
+            // );
+            // Emit state synchronization event
+            const stateSyncEvent = await makeStateSyncEvent(game);
             propagateEventToClients(
-                event,
+                stateSyncEvent,
                 game.players.map((player) => player.id)
             );
-            // Emit state synchronization event
-            if (event.type === 'DRAW_CARD' || event.type === 'START_GAME') {
-                const stateSyncEvent = await makeStateSyncEvent(game);
-                propagateEventToClients(
-                    stateSyncEvent,
-                    game.players.map((player) => player.id)
-                );
-            }
+            // if (
+            //     event.type === 'DRAW_CARD' ||
+            //     event.type === 'START_GAME'
+            // ) {
+            // }
+            res.status(200).send({
+                message: 'Event propagated to clients.',
+                result,
+            });
         }
     } else {
         // it is a message event etc
@@ -77,8 +85,8 @@ export async function handleAppEvent(req: AuthRequest, res: Response) {
             event,
             game.players.map((player) => player.id)
         );
+        res.status(200).send({ message: 'Chat Event propagated to clients.' });
     }
-    res.status(200).send({ message: 'Event propagated to clients.' });
 }
 
 // temporarily here
@@ -87,7 +95,6 @@ export async function makeStateSyncEvent(game: GameEngine): Promise<GameEvent> {
     const apiplayers = await User.find({
         _id: { $in: game.players.map((player) => player.id) },
     }).select('id username');
-    console.log('apiplayers', apiplayers);
     // make a map of id vs all the additional data we send
     const apiPlayers = apiplayers.reduce((acc, player) => {
         acc[player.id] = { name: player.username };
@@ -108,6 +115,7 @@ export async function makeStateSyncEvent(game: GameEngine): Promise<GameEvent> {
 
 export function propagateEventToClients(event: AppEvent, targets: ClientId[]) {
     for (const target of targets) {
+        console.log(event.type, 'propagated to', target);
         enqueueForSend(target, event);
     }
 }
diff --git a/backend/src/eventRecipients.ts b/backend/src/eventRecipients.ts
@@ -16,6 +16,7 @@ export function addClient(clientId: ClientId, res: Response) {
     // if there are new events for this client, we will send them immediately
     // else we will withhold the response object until there are new events
     clients.set(clientId, res);
+    console.log('added client', clientId);
     doSendEvents(clientId);
 }
 
@@ -51,6 +52,7 @@ export function doSendEvents(clientId: ClientId) {
     if (res && events.length > 0) {
         res.json({ events });
         eventQueue.set(clientId, []);
+        console.log('sent events to client', clientId);
         clients.delete(clientId);
     }
 }
diff --git a/frontend/src/channel.ts b/frontend/src/channel.ts
@@ -97,6 +97,7 @@ export function triggerEvent(event: Omit<types.AppEvent, 'playerId'>) {
     if (!authCreds) {
         throw new Error('Auth credentials not set');
     }
+    console.log('Triggering event:', event);
     fetch(`${process.env.REACT_APP_BACKEND_URL}/events`, {
         method: 'POST',
         headers: {

diff --git a/frontend/src/library/chatbox/Chatbox.tsx b/frontend/src/library/chatbox/Chatbox.tsx
@@ -70,8 +70,8 @@ const Chatbox: React.FC = () => {
             <div
                 className={`w-80 h-96 bg-lime-400 rounded-lg overflow-hidden mb-2 transition-all duration-300 ${
                     isVisible
-                        ? 'opacity-100 shadow-2xl'
-                        : 'opacity-0 pointer-events-none shadow-none'
+                        ? 'shadow-2xl'
+                        : 'hidden pointer-events-none shadow-none'
                 }`}
                 style={{
                     boxShadow: isVisible

diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx
@@ -69,8 +69,7 @@ function Game() {
                 'gameModal',
                 <GamePropertiesModal playerCount={gameState.players.length} />,
                 'large',
-                [],
-                false
+                []
             );
             initialMount.current = false;
         } else {
@@ -197,10 +196,9 @@ function Game() {
         );
     }
 
-    const myCards = (
+    const myCards =
         gameState.players.find((player) => player.id === getUser()!.id)
-            ?.cards ?? []
-    ).map(getCardImageName);
+            ?.cards ?? [];
 
     return (
         <div className="flex justify-center items-center min-h-screen bg-table-bg bg-cover">
@@ -237,7 +235,7 @@ function Game() {
                             <img
                                 src={
                                     gameState.lastThrownCard
-                                        ? `/card_faces/${gameState.lastThrownCard}.svg`
+                                        ? `/card_faces/${getCardImageName(gameState.lastThrownCard)}.svg`
                                         : '/card_faces/back.jpeg'
                                 }
                                 alt="Last Thrown Card"
@@ -260,7 +258,7 @@ function Game() {
                 {/* Player Mat */}
                 {/* <div className="absolute bottom-20 left-1/2 transform -translate-x-1/2 flex flex-col items-center z-20"> */}
                 <div className="absolute top-[80%] flex z-30 flex-row w-full justify-center h-96">
-                    {myCards.map((card, index) => (
+                    {myCards.map(getCardImageName).map((card, index) => (
                         <img
                             key={index}
                             src={`/card_faces/${card}.svg`}
@@ -270,6 +268,14 @@ function Game() {
                                 marginLeft: index === 0 ? 0 : '-6.4rem',
                                 zIndex: 11 + index,
                             }}
+                            onClick={() => {
+                                triggerEvent({
+                                    type: GameEventTypes.THROW_CARD,
+                                    data: {
+                                        cardId: myCards[index].id,
+                                    },
+                                });
+                            }}
                         />
                     ))}
                 </div>