frontend: Implemented the gamepage and GameContext

Created gamepage ui rendering at /game and also
Created GameContext.tsx in contexts which stores
state. Further changes will be done after backend
implementation.

fixes: #95

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import About from './pages/About';
 import { AuthProvider } from './contexts/AuthContext';
 import Login from './pages/Login';
 import SignUp from './pages/SignUp';
+import { GameProvider } from './contexts/GameContext';
 
 const router = createBrowserRouter([
     {
@@ -21,12 +22,18 @@ const router = createBrowserRouter([
             },
             {
                 path: '/game',
-                element: <Game />,
+                element: (
+                    <GameProvider>
+                        <Game />
+                    </GameProvider>
+                ),
             },
             { path: '/about', element: <About /> },
             { path: '/error', element: <Error /> },
             { path: '/login', element: <Login /> },
             { path: '/signup', element: <SignUp /> },
+            { path: '/login', element: <Login /> },
+            { path: '/signup', element: <SignUp /> },
         ],
     },
 ]);

frontend/src/contexts/GameContext.tsx

@@ -0,0 +1,97 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+//import { useLocation } from 'react-router-dom';
+
+interface GameState {
+    players: { id: number; name: string; cards: string[] }[];
+    cards: string[];
+    currentTurn: number;
+}
+
+interface GameContextProps {
+    gameState: GameState | null;
+    setGameState: React.Dispatch<React.SetStateAction<GameState | null>>;
+}
+
+const GameContext = createContext<GameContextProps | undefined>(undefined);
+
+export const GameProvider = ({ children }: { children: ReactNode }) => {
+    const [gameState, setGameState] = useState<GameState | null>({
+        players: [
+            {
+                id: 1,
+                name: 'Player 1',
+                cards: ['R1', 'G2', 'B3', 'Y4', 'R5', 'G6', 'B7'],
+            },
+            {
+                id: 2,
+                name: 'Player 2',
+                cards: ['Y4', 'R5', 'G6', 'B7', 'Y8', 'R9', 'G0'],
+            },
+            {
+                id: 3,
+                name: 'Player 3',
+                cards: ['B7', 'Y8', 'R9', 'G0', 'B1', 'Y2', 'R3'],
+            },
+            {
+                id: 4,
+                name: 'Player 4',
+                cards: ['G0', 'B1', 'Y2', 'R3', 'G4', 'B5', 'Y6'],
+            },
+            {
+                id: 5,
+                name: 'Player 5',
+                cards: ['R3', 'G4', 'B5', 'Y6', 'R7', 'G8', 'B9'],
+            },
+            {
+                id: 6,
+                name: 'Player 6',
+                cards: ['Y6', 'R7', 'G8', 'B9', 'Y0', 'R1', 'G2'],
+            },
+            {
+                id: 7,
+                name: 'Player 7',
+                cards: ['B9', 'Y0', 'R1', 'G2', 'B3', 'Y4', 'R5'],
+            },
+        ],
+        cards: ['R2', 'G3', 'B4'],
+        currentTurn: 1,
+    });
+    //const location = useLocation();
+
+    //   useEffect(() => {
+    //     const queryParams = new URLSearchParams(location.search);
+    //     const gameType = queryParams.get('type');
+
+    //     // Make initial API call to set up the game
+    //     fetch(`/api/game?type=${gameType}`)
+    //       .then(response => response.json())
+    //       .then(data => {
+    //         setGameState(data);
+    //       });
+
+    //     // Set up polling
+    //     const interval = setInterval(() => {
+    //       fetch('/api/game/state')
+    //         .then(response => response.json())
+    //         .then(data => {
+    //           setGameState(data);
+    //         });
+    //     }, 5000);
+
+    //     return () => clearInterval(interval);
+    //   }, [location.search]);
+
+    return (
+        <GameContext.Provider value={{ gameState, setGameState }}>
+            {children}
+        </GameContext.Provider>
+    );
+};
+
+export const useGameContext = () => {
+    const context = useContext(GameContext);
+    if (!context) {
+        throw new Error('useGameContext must be used within a GameProvider');
+    }
+    return context;
+};

frontend/src/pages/Game.tsx

@@ -1,9 +1,101 @@
-function Game() {
+import React from 'react';
+import { useGameContext } from '../contexts/GameContext';
+import Button from '../library/button';
+
+const Game: React.FC = () => {
+    const { gameState } = useGameContext();
+
+    if (!gameState) {
+        return <div>Loading...</div>;
+    }
+
+    const playerPositions = [
+        { top: '12%', left: '29%', transform: 'translate(-50%, -50%)' },
+        { top: '12%', left: '71%', transform: 'translate(-50%, -50%)' },
+        { top: '40%', left: '10%', transform: 'translate(-50%, -50%)' },
+        { top: '40%', left: '90%', transform: 'translate(-50%, -50%)' },
+        { top: '75%', left: '15%', transform: 'translate(-50%, -50%)' },
+        { top: '75%', left: '85%', transform: 'translate(-50%, -50%)' },
+    ];
+
     return (
-        <div>
-            <div>X's turn</div>
+        <div className="flex justify-center items-center min-h-screen bg-gray-700">
+            <div className="relative w-full max-w-6xl h-[85vh] bg-cover bg-center bg-table-bg">
+                {/* Players */}
+                {gameState.players.slice(0, 6).map((player, index) => (
+                    <div
+                        key={index}
+                        className="absolute flex flex-col items-center justify-center bg-player-icon-bg"
+                        style={{
+                            ...playerPositions[index],
+                            backgroundSize: 'contain',
+                            backgroundRepeat: 'no-repeat',
+                            width: '70px',
+                            height: '80px',
+                            zIndex: 2,
+                        }}
+                    >
+                        <div className="player-cards text-black mt-[61px]">
+                            {player.cards.length}
+                        </div>
+                    </div>
+                ))}
+
+                {/* Center Deck and UNO Button */}
+                <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center z-10">
+                    <div className="relative flex">
+                        <img
+                            src="/cardPool.png"
+                            alt="Card Pool"
+                            className="w-56 h-36"
+                        />
+                        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex space-x-4 z-20">
+                            <img
+                                src="/card_faces/back.jpeg"
+                                alt="Card 1"
+                                className="w-15 h-20"
+                            />
+                            <img
+                                src="/card_faces/r6.svg"
+                                alt="Card 2"
+                                className="w-15 h-20"
+                            />
+                        </div>
+                    </div>
+                    <Button
+                        text="UNO"
+                        className="border-2 active:bg-red-600 mt-4"
+                        backgroundColor="bg-purple-800"
+                        hoverColor="hover:bg-purple-900"
+                        buttonSize="w-18 h-10"
+                    />
+                </div>
+
+                {/* Player Mat */}
+                <div className="absolute bottom-20 left-1/2 transform -translate-x-1/2 flex flex-col items-center z-20">
+                    <img
+                        src="/deckMat.png"
+                        alt="Deck Mat"
+                        className="w-[calc(7*2.5rem)] h-20 relative z-10"
+                    />
+                    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex z-30">
+                        {Array.from({ length: 7 }).map((_, index) => (
+                            <img
+                                key={index}
+                                src="/card_faces/g8.svg"
+                                alt={`Card ${index}`}
+                                className="w-12 h-16"
+                                style={{
+                                    marginLeft: index === 0 ? 0 : '-1.2rem',
+                                    zIndex: 11 + index,
+                                }}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
         </div>
     );
-}
+};
 
 export default Game;

frontend/src/pages/Home.tsx

@@ -14,7 +14,7 @@ const Home: React.FC = () => {
     const CreateGame = () => {
         // Logic to create a game
         console.log('Create Game');
-        navigate('/error');
+        navigate('/game');
     };
 
     const JoinGame = () => {

frontend/tailwind.config.js

@@ -18,6 +18,8 @@ export default {
     extend: {
       backgroundImage: {
         'uno-bg': "url('/src/assets/bg.jpg')",
+        'table-bg': "url('/playBackground.png')",
+        'player-icon-bg': "url('/playerIcon.png')",
       },
     },
   },