++

- Can now join games
- Can continue games using table
- Can create accounts
- Can create Games

frontend/src/App.css

@@ -23,6 +23,8 @@ body {
   margin: 20px;
 }
 
+
+
 .btn {
   background-color: #764ACB;
   color: #f0f0f5;

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 
+import { Helmet } from 'react-helmet';
 import './App.css';
 import Header from './components/header';
 import Home from './pages/home';
@@ -7,6 +8,7 @@ import Login from './pages/login';
 import Register from './pages/register';
 import JoinGame from './pages/joinGame';
 import StartGame from './pages/startGame';
+import { UserProvider } from './context/UserContext.jsx';
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -18,41 +20,45 @@ function App() {
   };
 
   return (
-    <Router>
-      <div>
-        {popupMessage && <div className="popup">{popupMessage}</div>}
+    <UserProvider>
+      <meta name="DND Master" content="WoW. A description."/>
+      <Router>
+        <div>
+        <Helmet>
+            <title>DND Master</title>
+          </Helmet>
+          {popupMessage && <div className="popup">{popupMessage}</div>}    
+          <Header isLoggedIn={isLoggedIn} />
 
-        {/* Header is placed at the top of the page */}
-        <Header isLoggedIn={isLoggedIn} />
-
-        <Routes>
-          <Route
-            path="/"
-            element={<Home isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />}
-          />
-          <Route
-            path="/login"
-            element={<Login setIsLoggedIn={setIsLoggedIn} />}
-          />
-          <Route
-            path="/register"
-            element={<Register setIsLoggedIn={(status) => {
-              setIsLoggedIn(status);
-              showPopup('User registered successfully!');
-            }} />}
-          />
-          <Route
-            path="joinGame"
-            element={<JoinGame isLoggedIn={isLoggedIn} />}
-          />
-          <Route
-            path="/startGame"
-            element={<StartGame isLoggedIn={isLoggedIn} />}
-          />
-        </Routes>
-      </div>
-    </Router>
+          <Routes>
+            <Route
+              path="/"
+              element={<Home isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />}
+            />
+            <Route
+              path="/login"
+              element={<Login setIsLoggedIn={setIsLoggedIn} />}
+            />
+            <Route
+              path="/register"
+              element={<Register setIsLoggedIn={(status) => {
+                setIsLoggedIn(status);
+                showPopup('User registered successfully!');
+              }} />}
+            />
+            <Route
+              path="joinGame"
+              element={<JoinGame isLoggedIn={isLoggedIn} />}
+            />
+            <Route
+              path="/startGame"
+              element={<StartGame isLoggedIn={isLoggedIn} />}
+            />
+          </Routes>
+        </div>
+      </Router>
+    </UserProvider>
   );
 }
 
-export default App;
+export default App;

frontend/src/context/UserContext.jsx

@@ -0,0 +1,13 @@
+import React, { createContext, useState } from 'react';
+
+export const UserContext = createContext();
+
+export const UserProvider = ({ children }) => {
+    const [userId, setUserId] = useState(null);
+
+    return (
+        <UserContext.Provider value={{ userId, setUserId }}>
+            {children}
+        </UserContext.Provider>
+    );
+};

frontend/src/pages/home.css

@@ -0,0 +1,65 @@
+.container {
+  padding: 20px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.button-group {
+  display: flex;
+  
+  align-self: center;
+  flex-direction: row;
+  margin-bottom: 10px;
+}
+
+.button-group .btn {
+  margin-bottom: 10px;
+  padding: 10px 20px;
+  color: white;
+  border: none;
+  cursor: pointer;
+  text-align: center;
+}
+
+.table-container {
+  width: 100%;
+}
+
+.games-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+  background-color: #333;
+  color: #fff;
+}
+
+.games-table th, .games-table td {
+  border: 1px solid #555;
+  padding: 8px;
+}
+
+.games-table th {
+  background-color: #444;
+  text-align: left;
+}
+
+.games-table tr:nth-child(even) {
+  background-color: #3a3a3a;
+}
+
+.games-table tr:hover {
+  background-color: #555;
+}
+
+.game-link {
+  color: #1e90ff;
+  text-decoration: none;
+}
+
+.game-link:hover {
+  text-decoration: underline;
+}

frontend/src/pages/home.jsx

@@ -1,8 +1,25 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useContext, useEffect, useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import axios from 'axios';
+import { UserContext } from '../context/UserContext';
+import './home.css';
 
 function Home({ isLoggedIn, setIsLoggedIn }) {
     const navigate = useNavigate();
+    const [games, setGames] = useState([]);
+    const { userId } = useContext(UserContext);
+
+    useEffect(() => {
+        if (isLoggedIn && userId) {
+            axios.get(`http://localhost:5000/games/${userId}`)
+                .then(response => {
+                    setGames(response.data);
+                })
+                .catch(error => {
+                    console.error('Error fetching games:', error);
+                });
+        }
+    }, [isLoggedIn, userId]);
 
     const handleLogout = () => {
         setIsLoggedIn(false);
@@ -10,21 +27,48 @@ function Home({ isLoggedIn, setIsLoggedIn }) {
 
     return (
         <div className="container">
-            <h2>Welcome to the Game</h2>
+            <h2>Welcome to the Site</h2>
             {!isLoggedIn ? (
                 <div className="button-group">
                     <button className="btn" onClick={() => navigate('/login')}>Login</button>
                     <button className="btn" onClick={() => navigate('/register')}>Register</button>
                 </div>
             ) : (
-                <div className="button-group">
-                    <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 className="content">
+                    <div className="button-group">
+                        <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>
+                    <div className="table-container">
+                        <h3>Your Games</h3>
+                        <table className="games-table">
+                            <thead>
+                                <tr>
+                                    <th>Game ID</th>
+                                    <th>Name</th>
+                                    <th>Description</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {games.map(game => (
+                                    <tr key={game.game_id}>
+                                        <td>
+                                            <Link to={`/games/${game.game_id}`} className="game-link">
+                                                {game.game_id}
+                                            </Link>
+                                        </td>
+                                        <td>{game.name}</td>
+                                        <td>{game.description}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             )}
         </div>
     );
 }
 
-export default Home;
+export default Home;

frontend/src/pages/joinGame.jsx

@@ -1,20 +1,16 @@
-
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import { UserContext } from '../context/UserContext';
 
 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);
-  };
+  const { userId } = useContext(UserContext);
 
   // Handle form submission
-  const handleJoinGame = (e) => {
+  const handleJoinGame = async (e) => {
     e.preventDefault();
 
     if (gameCode.trim() === '') {
@@ -22,14 +18,16 @@ const JoinGamePage = () => {
       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!');
+    try {
+      const response = await axios.post(`http://localhost:5000/joinGame/${gameCode}`, { userId });
+      if (response.status === 201) {
+        setError('');
+          navigate(`/games/${gameCode}`); // Redirect to the games page
+      } else {
+        setError('Failed to join the game.');
+      }
+    } catch (err) {
+      setError(err.response ? err.response.data.error : 'Error joining the game');
     }
   };
 
@@ -50,4 +48,4 @@ const JoinGamePage = () => {
   );
 };
 
-export default JoinGamePage;
+export default JoinGamePage;

frontend/src/pages/login.jsx

@@ -1,22 +1,29 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import { UserContext } from '../context/UserContext';
 
 function Login({ setIsLoggedIn }) {
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [message, setMessage] = useState('');
     const navigate = useNavigate();
+    const { setUserId } = useContext(UserContext);
 
     const handleLogin = async (e) => {
         e.preventDefault();
         try {
             const res = await axios.post('http://localhost:5000/login', { username, password });
             setMessage(res.data.message);
-            setIsLoggedIn(true);
-            navigate('/');
+            if (res.data.success) {
+                setIsLoggedIn(true);
+                setUserId(res.data.userId);
+                navigate('/');
+            } else {
+                setMessage(res.data.message);
+            }
         } catch (err) {
-            setMessage(err.response.data.error);
+            setMessage(err.response ? err.response.data.error : 'Error logging in');
         }
     };
 

frontend/src/pages/startGame.jsx

@@ -28,8 +28,8 @@ const startGame = () => {
         body: JSON.stringify({
           name,
           description,
-          gameMasterId: 1, // Placeholder for game master ID; replace with dynamic value if needed
-          participants: [], // Default empty participants array
+          gameMasterId: 1, 
+          participants: [], 
         }),
       });