+

Game id changed

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import Header from './components/header'; // Make sure the import path is correc
 import Home from './pages/home';
 import Login from './pages/login';
 import Register from './pages/register';
+import JoinGame from './pages/joinGame';
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -39,6 +40,10 @@ function App() {
               showPopup('User registered successfully!');
             }} />}
           />
+          <Route
+            path="joinGame"
+            element={<JoinGame isLoggedIn={isLoggedIn} />}
+          />
         </Routes>
       </div>
     </Router>

frontend/src/pages/home.jsx

@@ -18,8 +18,8 @@ function Home({ isLoggedIn, setIsLoggedIn }) {
                 </div>
             ) : (
                 <div className="button-group">
-                    <button className="btn" onClick={() => navigate('/start-game')}>Start Game</button>
-                    <button className="btn" onClick={() => navigate('/join-game')}>Join Game</button>
+                    <button className="btn" onClick={() => navigate('/startGame')}>Start Game</button>
+                    <button className="btn" onClick={() => navigate('/joinGame')}>Join Game</button>
                     <button className="btn" onClick={handleLogout}>Logout</button>
                 </div>
             )}

frontend/src/pages/joinGame.jsx

@@ -0,0 +1,53 @@
+
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const JoinGamePage = () => {
+  const [gameCode, setGameCode] = useState('');
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+
+  // Mock function to check if game exists (replace with your real logic)
+  const checkGameExists = (code) => {
+    const availableGames = ['game123', 'game456', 'game789']; // Example game codes
+    return availableGames.includes(code);
+  };
+
+  // Handle form submission
+  const handleJoinGame = (e) => {
+    e.preventDefault();
+
+    if (gameCode.trim() === '') {
+      setError('Please enter a game code');
+      return;
+    }
+
+    if (checkGameExists(gameCode)) {
+      // Simulate adding user to the game (replace with your actual logic)
+      setError('');
+      setTimeout(() => {
+        navigate('/games'); // Redirect to the games page
+      }, 1000);
+    } else {
+      setError('Game not found!');
+    }
+  };
+
+  return (
+    <div className="join-game-container">
+      <h1>Join a Game</h1>
+      <form onSubmit={handleJoinGame}>
+        <input
+          type="text"
+          placeholder="Enter Game Code"
+          value={gameCode}
+          onChange={(e) => setGameCode(e.target.value)}
+        />
+        <button type="submit">Join Game</button>
+      </form>
+      {error && <p className="error">{error}</p>}
+    </div>
+  );
+};
+
+export default JoinGamePage;