From 01465e844bb74aab162915c2530d956aa146b5c9 Mon Sep 17 00:00:00 2001
From: Marces Zastrow <mza@bsg.de>
Date: Wed, 8 Jan 2025 14:08:00 +0100
Subject: [PATCH] +

Game page updated
---
 backend/database.db            | Bin 40960 -> 40960 bytes
 frontend/src/pages/games.jsx   |   6 +++--
 frontend/src/pages/profile.jsx |  48 +++++++++++++++++----------------
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/backend/database.db b/backend/database.db
index 743abed89d148995d4a2d058b99472a7db375f3e..0d76e02bb4a32769d07f7446ad14fd76106b0291 100644
GIT binary patch
delta 169
zcmZoTz|?SnX@WGP;Y1l{M#GH>3;TKbS1>U1J23Fy<8S46*eobu#4qT~EWp4iD=Ew*
zDayde#K@#OdFFf-7e|H4{L;L11=pN31^3LN97QIeDt@3U1_lO3AmC>(3P~+4Q7{53
mV1AVX1V%s^Gh~DKK?W%sDKJ8GGQxElf^`}Kb%OMz7y<x%#v=6q

delta 169
zcmZoTz|?SnX@WGP`a~ILM)i#e3;TH)7#NuOI~e%y^Y7*F*es|J$Zw_2B*4HaD=Ewb
zlw$+}28Prm3nOzQ<CKup;t~ZT*PJxwS1CYX%nVg1Dayde#K^=jIdHy;vjRvvKeBcM
XG=1`n5EVd^p%y??7y?ZOnVSLt>%AfV

diff --git a/frontend/src/pages/games.jsx b/frontend/src/pages/games.jsx
index c24dc77..591896d 100644
--- a/frontend/src/pages/games.jsx
+++ b/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,7 +89,9 @@ const GamesPage = () => {
           {/* Character Info Section */}
           <Box sx={{ mb: 4 }}>
             <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Description</Typography>
-            <Typography variant="body1" sx={{ color: '#fff' }}>{character.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 */}
diff --git a/frontend/src/pages/profile.jsx b/frontend/src/pages/profile.jsx
index 80691dd..489acbf 100644
--- a/frontend/src/pages/profile.jsx
+++ b/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,31 +37,33 @@ function Profile() {
 
       <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 item xs={12} sm={6} md={4} key={character.CharID}>
+            <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.Img || 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>
+            </Link>
           </Grid2>
         ))}
       </Grid2>
     </Box>
   );
-}
+};
 
 export default Profile;
\ No newline at end of file