++

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

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;