From e9a1fc40c45f67a25978351e0c385e51c72d6caf Mon Sep 17 00:00:00 2001
From: ritwik-69 <72665321+ritwik-69@users.noreply.github.com>
Date: Tue, 25 Jun 2024 21:56:52 +0530
Subject: [PATCH] client:Implement drawing cards from the deck

This commit adds the ability for a player to draw card by clicking on
the back uno card.On hovering the cursor changes to pointer and on
clicking it triggers the event.

fixes #160
---
 frontend/src/pages/Game.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx
index a2b4c23..d1a6059 100644
--- a/frontend/src/pages/Game.tsx
+++ b/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 { GameEventTypes } from '../../../backend/src/types';
+import * as channel from '../channel';
 
 function Game() {
     const { gameState } = useGameContext();
@@ -14,6 +16,11 @@ function Game() {
         }
         // eslint-disable-next-line
     }, [gameState]);
+    const drawCard = () => {
+        channel.triggerEvent({
+            type: GameEventTypes.DRAW_CARD,
+        });
+    };
 
     function GamePropertiesModal() {
         return (
@@ -114,7 +121,8 @@ function Game() {
                             <img
                                 src="/card_faces/back.jpeg"
                                 alt="Card 1"
-                                className="w-15 h-20"
+                                className="w-15 h-20 cursor-pointer"
+                                onClick={drawCard}
                             />
                             <img
                                 src={