Making the uno button functioning

Set uno button to trigger Announce_Uno Event

 Also added a handler for this event

Fixes : #159

frontend/src/clientDispatch.ts

@@ -1,4 +1,4 @@
-import { GameEvent, GameEventTypes } from '../../backend/src/types';
+import { APIPlayer, GameEvent, GameEventTypes } from '../../backend/src/types';
 import { GameState } from './contexts/GameContext';
 import assert from 'assert';
 
@@ -21,6 +21,9 @@ export const clientDispatch = (
         case GameEventTypes.THROW_CARD:
             newGameState = handleThrowCard(gameState, event);
             break;
+        case GameEventTypes.ANNOUNCE_UNO:
+            newGameState = handleAnnounceUno(gameState, event);
+            break;
         case GameEventTypes.STATE_SYNC:
             newGameState = handleStateSync(gameState, event);
             break;
@@ -125,3 +128,34 @@ const handleStateSync = (gameState: GameState, event: GameEvent): GameState => {
         runningEvents: data.runningEvents,
     };
 };
+
+const handleAnnounceUno = (
+    gameState: GameState,
+    event: GameEvent
+): GameState => {
+    if (event.type !== GameEventTypes.ANNOUNCE_UNO) {
+        throw new Error(
+            `Invalid event type for handleStateSync: ${event.type}`
+        );
+    }
+    const { playerId } = event;
+    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,
+            vulnerableToUNO: null,
+        },
+    };
+};

frontend/src/pages/Game.tsx

@@ -4,6 +4,8 @@ import Button from '../library/button';
 import { useModal } from '../library/modal/ModalContext';
 import CopyButton from '../library/copyButton';
 import Chatbox from '../library/chatbox/Chatbox';
+import * as channel from '../channel';
+import { GameEventTypes } from '../../../backend/src/types';
 
 function Game() {
     const { gameState } = useGameContext();
@@ -14,6 +16,11 @@ function Game() {
         }
         // eslint-disable-next-line
     }, [gameState?.players.length, gameState.id]);
+    const announceGame = () => {
+        channel.triggerEvent({
+            type: GameEventTypes.ANNOUNCE_UNO,
+        });
+    };
 
     function GamePropertiesModal() {
         return (
@@ -133,6 +140,7 @@ function Game() {
                         className="border-2 active:bg-red-600 mt-4 hover:bg-purple-900"
                         backgroundColor="bg-purple-800"
                         buttonSize="w-18 h-10"
+                        onClick={announceGame}
                     >
                         UNO
                     </Button>