diff --git a/frontend/public/cardPool.png b/frontend/public/cardPool.png new file mode 100644 index 0000000..f66b1f9 Binary files /dev/null and b/frontend/public/cardPool.png differ diff --git a/frontend/public/card_faces/back.jpeg b/frontend/public/card_faces/back.jpeg new file mode 100644 index 0000000..0e4ce5b Binary files /dev/null and b/frontend/public/card_faces/back.jpeg differ diff --git a/frontend/public/deckMat.png b/frontend/public/deckMat.png new file mode 100644 index 0000000..56f2bf5 Binary files /dev/null and b/frontend/public/deckMat.png differ diff --git a/frontend/public/playBackground.png b/frontend/public/playBackground.png new file mode 100644 index 0000000..dff9227 Binary files /dev/null and b/frontend/public/playBackground.png differ diff --git a/frontend/public/playerIcon.png b/frontend/public/playerIcon.png new file mode 100644 index 0000000..088d43f Binary files /dev/null and b/frontend/public/playerIcon.png differ diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1ad3a4b..1c2241a 100644 --- a/frontend/src/App.tsx +++ b/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: , + element: ( + + + + ), }, { path: '/about', element: }, { path: '/error', element: }, { path: '/login', element: }, { path: '/signup', element: }, + { path: '/login', element: }, + { path: '/signup', element: }, ], }, ]); diff --git a/frontend/src/contexts/GameContext.tsx b/frontend/src/contexts/GameContext.tsx new file mode 100644 index 0000000..9f37bbf --- /dev/null +++ b/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>; +} + +const GameContext = createContext(undefined); + +export const GameProvider = ({ children }: { children: ReactNode }) => { + const [gameState, setGameState] = useState({ + 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 ( + + {children} + + ); +}; + +export const useGameContext = () => { + const context = useContext(GameContext); + if (!context) { + throw new Error('useGameContext must be used within a GameProvider'); + } + return context; +}; diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx index 233c599..a740bae 100644 --- a/frontend/src/pages/Game.tsx +++ b/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
Loading...
; + } + + 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 ( -
-
X's turn
+
+
+ {/* Players */} + {gameState.players.slice(0, 6).map((player, index) => ( +
+
+ {player.cards.length} +
+
+ ))} + + {/* Center Deck and UNO Button */} +
+
+ Card Pool +
+ Card 1 + Card 2 +
+
+
+ + {/* Player Mat */} +
+ Deck Mat +
+ {Array.from({ length: 7 }).map((_, index) => ( + {`Card + ))} +
+
+
); -} +}; export default Game; diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 716f2da..5517f03 100644 --- a/frontend/src/pages/Home.tsx +++ b/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 = () => { diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index b605050..e6ecd90 100644 --- a/frontend/tailwind.config.js +++ b/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')", }, }, },