+

Added Game page

frontend/src/App.jsx

@@ -9,6 +9,7 @@ import Register from './pages/register';
 import JoinGame from './pages/joinGame';
 import StartGame from './pages/startGame';
 import Profile from './pages/profile';
+import Games from './pages/games.jsx';
 import { UserProvider } from './context/UserContext.jsx';
 
 function App() {
@@ -59,6 +60,10 @@ function App() {
               path="/profile"
               element={<Profile isLoggedIn={isLoggedIn} />}
             />
+            <Route
+              path='/games/:gameId'
+              element={<Games isLoggedIn={isLoggedIn} />}
+            />
           </Routes>
         </div>
       </Router>

frontend/src/pages/games.jsx

@@ -0,0 +1,114 @@
+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, Grid, Card, CardContent, CardMedia, Button } from '@mui/material';
+import defaultCharacterImage from '../assets/default-character.png';
+
+const GamesPage = () => {
+  const { userId } = useContext(UserContext);
+  const { gameId } = useParams();
+  const [character, setCharacter] = useState(null);
+
+  useEffect(() => {
+    const fetchCharacter = async () => {
+      try {
+        const response = await axios.get(`http://localhost:5000/games/${gameId}/${userId}/character`);
+        setCharacter(response.data);
+      } catch (error) {
+        console.error('Error fetching character:', error);
+      }
+    };
+
+    if (userId) {
+      fetchCharacter();
+    }
+  }, [userId, gameId]);
+
+  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">
+          Create New Character
+        </Button>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ p: 3 }}>
+      <Grid container spacing={3}>
+        {/* Character Info Section */}
+        <Grid item xs={12} md={8}>
+          <Typography variant="h3" sx={{ mb: 4 }}>{character.CharName}</Typography>
+          <Box sx={{ mb: 4 }}>
+            {/* Health Bar */}
+            <Box sx={{ mb: 2 }}>
+              <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                <span>Health</span>
+                <span>{character.CurrentHealth}/{character.MaxHealth}</span>
+              </Typography>
+              <Box sx={{ width: '100%', backgroundColor: 'gray', borderRadius: '4px', height: '10px' }}>
+                <Box sx={{ width: `${(character.CurrentHealth / character.MaxHealth) * 100}%`, backgroundColor: 'red', height: '100%', borderRadius: '4px' }}></Box>
+              </Box>
+            </Box>
+            {/* Mana Bar */}
+            <Box>
+              <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                <span>Mana</span>
+                <span>{character.CurrentMana}/{character.MaxMana}</span>
+              </Typography>
+              <Box sx={{ width: '100%', backgroundColor: 'gray', borderRadius: '4px', height: '10px' }}>
+                <Box sx={{ width: `${(character.CurrentMana / character.MaxMana) * 100}%`, backgroundColor: 'blue', height: '100%', borderRadius: '4px' }}></Box>
+              </Box>
+            </Box>
+          </Box>
+          
+          {/* Character Description */}
+          <Box sx={{ mb: 4 }}>
+            <Typography variant="h5" sx={{ mb: 2 }}>Description</Typography>
+            <Typography variant="body1">{character.Looks}</Typography>
+          </Box>
+
+          {/* Inventory */}
+          <Box>
+            <Typography variant="h5" sx={{ mb: 2 }}>Inventory</Typography>
+            <Grid container spacing={2}>
+              {character.Items?.map((item, index) => (
+                <Grid item xs={6} sm={4} md={3} key={index}>
+                  <Card>
+                    <CardContent>
+                      <Typography variant="h6">{item.name}</Typography>
+                      <Typography variant="body2" color="textSecondary">Quantity: {item.quantity}</Typography>
+                    </CardContent>
+                  </Card>
+                </Grid>
+              ))}
+            </Grid>
+          </Box>
+        </Grid>
+
+        {/* Character Image and Details */}
+        <Grid item xs={12} md={4}>
+          <Card>
+            <CardMedia
+              component="img"
+              height="300"
+              image={character.Img || defaultCharacterImage}
+              alt={character.CharName}
+            />
+            <CardContent>
+              <Typography variant="body1"><strong>Age:</strong> {character.Age}</Typography>
+              <Typography variant="body1"><strong>Race:</strong> {character.Race}</Typography>
+              <Typography variant="body1"><strong>Sex:</strong> {character.Sex}</Typography>
+              <Typography variant="body1"><strong>Job:</strong> {character.Job}</Typography>
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default GamesPage;