client: Display player's own cards.

Replaced the mock displayed cards with the actual
cards allotted to the player after the game starts.

TODO: A card can be determined from its id, but we
currently send the entire object, which is redundant.

backend/src/types.ts

@@ -44,7 +44,7 @@ export type APIPlayer = {
     id: string;
     // will store more info like profile pic etc of the player
     name: string;
-    cards: string[]; // only contains the card ids
+    cards: UNOCard[]; // todo: change to card ids
 };
 
 export type RunningEvents = {

backend/src/utils.ts

@@ -1,6 +1,5 @@
 import { Response } from 'express';
 import { AuthRequest } from './middlewares/authMiddleware';
-import { CardColor, UNOCard } from './types';
 
 export type ControllerFunction = (
     req: AuthRequest,
@@ -16,43 +15,3 @@ export function catchError(fn: ControllerFunction): ControllerFunction {
         }
     };
 }
-
-export function getCardImageName(card: UNOCard): string {
-    function getColorAbbreviation(color: CardColor): string {
-        switch (color) {
-            case 'red':
-                return 'r';
-            case 'blue':
-                return 'b';
-            case 'green':
-                return 'g';
-            case 'yellow':
-                return 'o';
-            default:
-                return '';
-        }
-    }
-    if (card.type === 'wild') {
-        if (card.value === 'colchange') {
-            return 'CC';
-        } else {
-            return 'P4';
-        }
-    } else if (card.type === 'special') {
-        let value;
-        switch (card.value) {
-            case 'skip':
-                value = 'r';
-                break;
-            case 'reverse':
-                value = 'x';
-                break;
-            case 'draw2':
-                value = 'p2';
-                break;
-        }
-        return `${getColorAbbreviation(card.color)}${value}`;
-    } else {
-        return `${getColorAbbreviation(card.color)}${card.value}`;
-    }
-}

frontend/src/clientDispatch.ts

@@ -99,7 +99,10 @@ const handleThrowCard = (gameState: GameState, event: GameEvent): GameState => {
         ...gameState,
         players: gameState.players.map((player) =>
             player.id === playerId
-                ? { ...player, cards: player.cards.filter((c) => c !== cardId) }
+                ? {
+                      ...player,
+                      cards: player.cards.filter((c) => c.id !== cardId),
+                  }
                 : player
         ),
         lastThrownCard:
@@ -130,7 +133,10 @@ const handleStateSync = (gameState: GameState, event: GameEvent): GameState => {
         lastThrownCard: data.lastThrownCard,
         direction: data.direction,
         status: data.status,
-        runningEvents: data.runningEvents,
+        runningEvents: {
+            vulnerableToUNO: data.runningEvents.vulnerableToUNO?.id || null,
+            hasAnnouncedUNO: data.runningEvents.hasAnnouncedUNO?.id || null,
+        },
     };
 };
 
@@ -147,19 +153,11 @@ const handleAnnounceUno = (
     const player: APIPlayer = gameState.players.find(
         (p) => p.id == playerId
     ) as APIPlayer;
-    const gamePlayer = {
-        id: player.id,
-        cards: player.cards.map((cardId) => {
-            const card = gameState.cardDeck.find((c) => c.id === cardId);
-            if (!card)
-                throw new Error(`Card with id ${cardId} not found in deck`);
-            return card;
-        }),
-    };
+
     return {
         ...gameState,
         runningEvents: {
-            hasAnnouncedUNO: gamePlayer,
+            hasAnnouncedUNO: player.id,
             vulnerableToUNO: null,
         },
     };

frontend/src/contexts/GameContext.tsx

@@ -9,7 +9,6 @@ import { clientDispatch } from '../clientDispatch';
 import {
     APIPlayer,
     GameStatus,
-    RunningEvents,
     UNOCard,
     AppEvent,
     GameEvent,
@@ -25,7 +24,10 @@ export interface GameState {
     lastThrownCard: UNOCard | null;
     direction: number;
     status: GameStatus | '';
-    runningEvents: RunningEvents;
+    runningEvents: {
+        vulnerableToUNO: string | null;
+        hasAnnouncedUNO: string | null;
+    };
 }
 
 interface GameContextProps {

frontend/src/pages/Game.tsx

@@ -1,85 +1,66 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useGameContext } from '../contexts/GameContext';
 import Button from '../library/button';
 import { useModal } from '../library/modal/ModalContext';
 import CopyButton from '../library/copyButton';
 import Chatbox from '../library/chatbox/Chatbox';
-import { GameEventTypes } from '../../../backend/src/types';
+import { CardColor, GameEventTypes, UNOCard } from '../../../backend/src/types';
 import * as channel from '../channel';
 import { IoSettings } from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
 import { triggerEvent } from '../channel';
 import { useAuth } from '../contexts/AuthContext';
 import { useToast } from '../library/toast/toast-context';
 
+function getCardImageName(card: UNOCard): string {
+    function getColorAbbreviation(color: CardColor): string {
+        switch (color) {
+            case 'red':
+                return 'r';
+            case 'blue':
+                return 'b';
+            case 'green':
+                return 'g';
+            case 'yellow':
+                return 'o';
+            default:
+                return '';
+        }
+    }
+    if (card.type === 'wild') {
+        if (card.value === 'colchange') {
+            return 'CC';
+        } else {
+            return 'P4';
+        }
+    } else if (card.type === 'special') {
+        let value: string;
+        switch (card.value) {
+            case 'skip':
+                value = 'r';
+                break;
+            case 'reverse':
+                value = 'x';
+                break;
+            case 'draw2':
+                value = 'p2';
+                break;
+            default:
+                value = '';
+        }
+        return `${getColorAbbreviation(card.color)}${value}`;
+    } else {
+        return `${getColorAbbreviation(card.color)}${card.value}`;
+    }
+}
+
 function Game() {
     const { gameState } = useGameContext();
     const toast = useToast();
     const { getUser } = useAuth();
     const navigate = useNavigate();
     const [FirstUser, setFirstUser] = useState(true);
     const modal = useModal();
-    const userCards = useMemo(() => {
-        const cards = [
-            'r0',
-            'r1',
-            'r2',
-            'r3',
-            'r4',
-            'r5',
-            'r6',
-            'r7',
-            'r8',
-            'r9',
-            'rp2',
-            'rx',
-            'rr',
-            'g0',
-            'g1',
-            'g2',
-            'g3',
-            'g4',
-            'g5',
-            'g6',
-            'g7',
-            'g8',
-            'g9',
-            'gp2',
-            'gx',
-            'gr',
-            'b0',
-            'b1',
-            'b2',
-            'b3',
-            'b4',
-            'b5',
-            'b6',
-            'b7',
-            'b8',
-            'b9',
-            'bp2',
-            'bx',
-            'br',
-            'o0',
-            'o1',
-            'o2',
-            'o3',
-            'o4',
-            'o5',
-            'o6',
-            'o7',
-            'o8',
-            'o9',
-            'op2',
-            'ox',
-            'or',
-            // 'zzzz',
-            'P4',
-            'CC',
-        ];
-        const shuffledCards = [...cards].sort(() => Math.random() - 0.5);
-        return shuffledCards.slice(0, 7);
-    }, []);
     useEffect(() => {
         modal.show(<GamePropertiesModal />, 'large', [], false);
         // eslint-disable-next-line
@@ -203,6 +184,12 @@ function Game() {
             </div>
         );
     }
+
+    const myCards = (
+        gameState.players.find((player) => player.id === getUser()!.id)
+            ?.cards ?? []
+    ).map(getCardImageName);
+
     return (
         <div className="flex justify-center items-center min-h-screen bg-table-bg bg-cover">
             <div className="relative w-full max-w-6xl h-[75vh]">
@@ -275,7 +262,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">
-                    {userCards.map((card, index) => (
+                    {myCards.map((card, index) => (
                         <img
                             key={index}
                             src={`/card_faces/${card}.svg`}