+

Game page updated

frontend/src/pages/games.jsx

@@ -65,7 +65,7 @@ const GamesPage = () => {
         {/* CharName, Health and Mana Bars */}
         <Grid2 item xs={12} md={8}>
           <Typography variant="h3" sx={{ mb: 4, color: '#fff' }}>{character.CharName}</Typography>
-          <Box sx={{ display: 'flex', gap: 2, mb: 4, width: '600px'}}>
+          <Box sx={{ display: 'flex', gap: 2, mb: 4, width: '450px'}}>
             <Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
               <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
                 <span>Health</span>
@@ -89,8 +89,10 @@ const GamesPage = () => {
           {/* Character Info Section */}
           <Box sx={{ mb: 4 }}>
             <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Description</Typography>
+            <Box sx={{ maxHeight: '300px', overflowY: 'auto', backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444' }}>
               <Typography variant="body1" sx={{ color: '#fff' }}>{character.description}</Typography>
             </Box>
+          </Box>
 
           {/* Inventory */}
           <Box>

frontend/src/pages/profile.jsx

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useContext } from 'react';
+import { Link } from 'react-router-dom';
 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 Profile = () => {
   const { userId, username } = useContext(UserContext);
   const [characters, setCharacters] = useState([]);
 
@@ -26,7 +27,6 @@ function Profile() {
 
   return (
     <Box sx={{ p: 3 }}>
-      {/* Username on top */}
       <Typography variant="h4" sx={{ mb: 4, color: '#fff' }}>
         Benutzerprofil: {username}
       </Typography>
@@ -37,12 +37,13 @@ function Profile() {
 
       <Grid2 container spacing={3}>
         {characters.map((character) => (
-          <Grid2 item xs={12} sm={6} md={4} key={character.id}>
+          <Grid2 item xs={12} sm={6} md={4} key={character.CharID}>
-            <Card sx={{ border: '1px solid #444', backgroundColor: '#2e2e3f', color: '#fff' }}>
+            <Link to={`/games/${character.GameID}`} style={{ textDecoration: 'none' }}>
+              <Card sx={{ border: '1px solid #444', backgroundColor: '#2e2e3f', color: '#fff', cursor: 'pointer' }}>
                 <CardMedia
                   component="img"
                   height="200"
-                image={character.imageUrl || defaultCharacterImage}
+                  image={character.Img || defaultCharacterImage}
                   alt={character.CharName}
                 />
                 <CardContent>
@@ -57,11 +58,12 @@ function Profile() {
                   </Typography>
                 </CardContent>
               </Card>
+            </Link>
           </Grid2>
         ))}
       </Grid2>
     </Box>
   );
-}
+};
 
 export default Profile;