+

Changed some stuff

frontend/src/pages/games.jsx

@@ -2,13 +2,16 @@ import { useState, useEffect, useContext } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import axios from 'axios';
 import { UserContext } from '../context/UserContext';
-import { Box, Typography, Grid2, Card, CardContent, CardMedia, Button } from '@mui/material';
+import { Box, Typography, Grid2, Card, CardContent, CardMedia, Button, IconButton, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
 import defaultCharacterImage from '../assets/default-character.png';
 
 const GamesPage = () => {
   const { userId } = useContext(UserContext);
   const { gameId } = useParams();
   const [character, setCharacter] = useState(null);
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [newDescription, setNewDescription] = useState('');
 
   useEffect(() => {
     const fetchCharacter = async () => {
@@ -27,11 +30,35 @@ const GamesPage = () => {
     }
   }, [userId, gameId]);
 
+  const handleEditOpen = () => {
+    setNewDescription(character.description);
+    setIsEditOpen(true);
+  };
+
+  const handleEditClose = () => {
+    setIsEditOpen(false);
+  };
+
+  const handleSaveDescription = async () => {
+    try {
+      const response = await axios.put(`http://localhost:5000/games/${gameId}/${userId}/character`, { description: newDescription });
+      setCharacter({ ...character, description: newDescription });
+      setIsEditOpen(false);
+    } catch (error) {
+      console.error('Error updating description:', error);
+    }
+  };
+
   if (!character) {
     return (
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', p: 4 }}>
         <Typography variant="h4" sx={{ mb: 4 }}>No Character Found</Typography>
-        <Button variant="contained" color="primary" component={Link} to="/create-character">
+        <Button
+          variant="contained"
+          sx={{ backgroundColor: '#764ACB', '&:hover': { backgroundColor: '#5e3aa2' } }}
+          component={Link}
+          to="/create-character"
+        >
           Create New Character
         </Button>
       </Box>
@@ -39,7 +66,8 @@ const GamesPage = () => {
   }
 
   return (
-    <Box sx={{ p: 3, }}>
+
+    <Box sx={{ p: 3, color: '#fff' }}>
       <Grid2 container spacing={3}>
         {/* Character Image and Details */}
         <Grid2 item xs={12} md={4}>
@@ -53,6 +81,7 @@ const GamesPage = () => {
                 sx={{ borderRadius: '3px' }}
               />
               <CardContent>
+                <Typography variant="h4" sx={{ mb: 4, color: '#fff' }}>{character.CharName}</Typography>
                 <Typography variant="h5"><strong>Age:</strong> {character.Age}</Typography>
                 <Typography variant="h5"><strong>Race:</strong> {character.Race}</Typography>
                 <Typography variant="h5"><strong>Sex:</strong> {character.Sex}</Typography>
@@ -64,8 +93,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: '450px'}}>
+          <Box sx={{ display: 'flex', gap: 2, mb: 4, width: '800px' }}>
             <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>
@@ -88,8 +116,13 @@ 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' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+              <Typography variant="h5" sx={{ color: '#fff', mr: 1 }}>Description</Typography>
+              <IconButton onClick={handleEditOpen} sx={{ marginLeft: '10px', color: '#fff', backgroundColor: '#764ACB', borderRadius: '4px', p: 1, width: '50px' }}>
+                <EditIcon />
+              </IconButton>
+            </Box>
+            <Box sx={{ maxHeight: '200px', maxWidth: '770px', overflowY: 'auto', backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444' }}>
               <Typography variant="body1" sx={{ color: '#fff' }}>{character.description}</Typography>
             </Box>
           </Box>
@@ -112,8 +145,55 @@ const GamesPage = () => {
           </Box>
         </Grid2>
       </Grid2>
+
+      {/* Edit Description Dialog */}
+      <Dialog
+        open={isEditOpen}
+        onClose={handleEditClose}
+        PaperProps={{
+          sx: {
+            backgroundColor: '#1e1e2f',
+            color: '#fff',
+            '& .MuiDialogTitle-root': {
+              color: '#fff'
+            }
+          }
+        }}
+      >
+        <DialogTitle>Edit Description</DialogTitle>
+        <DialogContent>
+          <DialogContentText sx={{ color: '#bbb' }}>
+            ---------------------------------------------------------------------
+          </DialogContentText>
+          <TextField
+            autoFocus
+            margin="dense"
+            id="description"
+            label="Description"
+            type="text"
+            fullWidth
+            variant="standard"
+            multiline
+            rows={6}
+            value={newDescription}
+            onChange={(e) => setNewDescription(e.target.value)}
+            sx={{
+              '& .MuiInputBase-root': {
+                color: '#fff'
+              },
+              '& .MuiInputLabel-root': {
+                color: '#ccc'
+              }
+            }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleEditClose}>Cancel</Button>
+          <Button onClick={handleSaveDescription}>Save</Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 };
 
-export default GamesPage; 
+export default GamesPage;

frontend/src/pages/home.css

@@ -10,7 +10,6 @@
 
 .button-group {
   display: flex;
-  
   align-self: center;
   flex-direction: row;
   margin-bottom: 10px;