+ Profil

Added Profile
Updated Backend

frontend/src/App.jsx

@@ -8,6 +8,7 @@ import Login from './pages/login';
 import Register from './pages/register';
 import JoinGame from './pages/joinGame';
 import StartGame from './pages/startGame';
+import Profile from './pages/profile';
 import { UserProvider } from './context/UserContext.jsx';
 
 function App() {
@@ -47,13 +48,17 @@ function App() {
               }} />}
             />
             <Route
-              path="joinGame"
+              path="/joinGame"
               element={<JoinGame isLoggedIn={isLoggedIn} />}
             />
             <Route
               path="/startGame"
               element={<StartGame isLoggedIn={isLoggedIn} />}
             />
+            <Route
+              path="/profile"
+              element={<Profile isLoggedIn={isLoggedIn} />}
+            />
           </Routes>
         </div>
       </Router>

frontend/src/context/UserContext.jsx

@@ -4,9 +4,10 @@ export const UserContext = createContext();
 
 export const UserProvider = ({ children }) => {
     const [userId, setUserId] = useState(null);
+    const [username, setUsername] = useState('');
 
     return (
-        <UserContext.Provider value={{ userId, setUserId }}>
+        <UserContext.Provider value={{ userId, setUserId, username, setUsername }}>
             {children}
         </UserContext.Provider>
     );

frontend/src/pages/home.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import axios from 'axios';
-import { UserContext } from '../context/UserContext';
+import { UserContext} from '../context/UserContext';
 import './home.css';
 
 function Home({ isLoggedIn, setIsLoggedIn }) {
@@ -27,7 +27,7 @@ function Home({ isLoggedIn, setIsLoggedIn }) {
 
     return (
         <div className="container">
-            <h2>Welcome to the Site</h2>
+            <h2>Welcome to DND-Master</h2>
             {!isLoggedIn ? (
                 <div className="button-group">
                     <button className="btn" onClick={() => navigate('/login')}>Login</button>

frontend/src/pages/login.jsx

@@ -4,11 +4,11 @@ import axios from 'axios';
 import { UserContext } from '../context/UserContext';
 
 function Login({ setIsLoggedIn }) {
-    const [username, setUsername] = useState('');
+    const [username, setUsernameInput] = useState('');
     const [password, setPassword] = useState('');
     const [message, setMessage] = useState('');
     const navigate = useNavigate();
-    const { setUserId } = useContext(UserContext);
+    const { setUserId, setUsername } = useContext(UserContext);
 
     const handleLogin = async (e) => {
         e.preventDefault();
@@ -18,6 +18,7 @@ function Login({ setIsLoggedIn }) {
             if (res.data.success) {
                 setIsLoggedIn(true);
                 setUserId(res.data.userId);
+                setUsername(username);
                 navigate('/');
             } else {
                 setMessage(res.data.message);
@@ -35,7 +36,7 @@ function Login({ setIsLoggedIn }) {
                     type="text"
                     placeholder="Username"
                     value={username}
-                    onChange={(e) => setUsername(e.target.value)}
+                    onChange={(e) => setUsernameInput(e.target.value)}
                     required
                 />
                 <input
@@ -52,4 +53,4 @@ function Login({ setIsLoggedIn }) {
     );
 }
 
-export default Login;
+export default Login;

frontend/src/pages/profile.jsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { UserContext } from '../context/UserContext';
+import axios from 'axios';
+import { Box, Typography, Grid2, Card, CardContent, CardMedia } from '@mui/material';
+import defaultCharacterImage from '../assets/default-character.png';
+
+function Profile() {
+  const { userId, username } = useContext(UserContext);
+  const [characters, setCharacters] = useState([]);
+
+  useEffect(() => {
+    const fetchCharacters = async () => {
+      try {
+        const response = await axios.get(`http://localhost:5000/games/${userId}/characters`);
+        const charactersArray = Object.values(response.data);
+        setCharacters(charactersArray);
+      } catch (error) {
+        console.error('Error fetching characters:', error);
+      }
+    };
+
+    if (userId) {
+      fetchCharacters();
+    }
+  }, [userId]);
+
+  return (
+    <Box sx={{ p: 3 }}>
+      {/* Username on top */}
+      <Typography variant="h4" sx={{ mb: 4, color: '#fff' }}>
+        Benutzerprofil: {username}
+      </Typography>
+
+      <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>
+        Your Characters
+      </Typography>
+
+      <Grid2 container spacing={3}>
+        {characters.map((character) => (
+          <Grid2 item xs={12} sm={6} md={4} key={character.id}>
+            <Card sx={{ border: '1px solid #444', backgroundColor: '#2e2e3f', color: '#fff' }}>
+              <CardMedia
+                component="img"
+                height="200"
+                image={character.imageUrl || defaultCharacterImage}
+                alt={character.CharName}
+              />
+              <CardContent>
+                <Typography variant="h6" component="div" sx={{ color: '#fff', mb: 1 }}>
+                  {character.CharName}
+                </Typography>
+                <Typography variant="body2" sx={{ color: '#bbb', mb: 0.5 }}>
+                  Race: {character.Race}
+                </Typography>
+                <Typography variant="body2" sx={{ color: '#bbb' }}>
+                  Age: {character.Age}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid2>
+        ))}
+      </Grid2>
+    </Box>
+  );
+}
+
+export default Profile;