Game page updated
This commit is contained in:
Marces Zastrow
2025-01-08 14:08:00 +01:00
parent fb3b1f5ba6
commit 01465e844b
3 changed files with 29 additions and 25 deletions
Binary file not shown.
+4 -2
View File
@@ -65,7 +65,7 @@ const GamesPage = () => {
{/* CharName, Health and Mana Bars */} {/* CharName, Health and Mana Bars */}
<Grid2 item xs={12} md={8}> <Grid2 item xs={12} md={8}>
<Typography variant="h3" sx={{ mb: 4, color: '#fff' }}>{character.CharName}</Typography> <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' }}> <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' }}> <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
<span>Health</span> <span>Health</span>
@@ -89,7 +89,9 @@ const GamesPage = () => {
{/* Character Info Section */} {/* Character Info Section */}
<Box sx={{ mb: 4 }}> <Box sx={{ mb: 4 }}>
<Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Description</Typography> <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> </Box>
{/* Inventory */} {/* Inventory */}
+25 -23
View File
@@ -1,10 +1,11 @@
import React, { useState, useEffect, useContext } from 'react'; import React, { useState, useEffect, useContext } from 'react';
import { Link } from 'react-router-dom';
import { UserContext } from '../context/UserContext'; import { UserContext } from '../context/UserContext';
import axios from 'axios'; import axios from 'axios';
import { Box, Typography, Grid2, Card, CardContent, CardMedia } from '@mui/material'; import { Box, Typography, Grid2, Card, CardContent, CardMedia } from '@mui/material';
import defaultCharacterImage from '../assets/default-character.png'; import defaultCharacterImage from '../assets/default-character.png';
function Profile() { const Profile = () => {
const { userId, username } = useContext(UserContext); const { userId, username } = useContext(UserContext);
const [characters, setCharacters] = useState([]); const [characters, setCharacters] = useState([]);
@@ -26,7 +27,6 @@ function Profile() {
return ( return (
<Box sx={{ p: 3 }}> <Box sx={{ p: 3 }}>
{/* Username on top */}
<Typography variant="h4" sx={{ mb: 4, color: '#fff' }}> <Typography variant="h4" sx={{ mb: 4, color: '#fff' }}>
Benutzerprofil: {username} Benutzerprofil: {username}
</Typography> </Typography>
@@ -37,31 +37,33 @@ function Profile() {
<Grid2 container spacing={3}> <Grid2 container spacing={3}>
{characters.map((character) => ( {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' }}>
<CardMedia <Card sx={{ border: '1px solid #444', backgroundColor: '#2e2e3f', color: '#fff', cursor: 'pointer' }}>
component="img" <CardMedia
height="200" component="img"
image={character.imageUrl || defaultCharacterImage} height="200"
alt={character.CharName} image={character.Img || defaultCharacterImage}
/> alt={character.CharName}
<CardContent> />
<Typography variant="h6" component="div" sx={{ color: '#fff', mb: 1 }}> <CardContent>
{character.CharName} <Typography variant="h6" component="div" sx={{ color: '#fff', mb: 1 }}>
</Typography> {character.CharName}
<Typography variant="body2" sx={{ color: '#bbb', mb: 0.5 }}> </Typography>
Race: {character.Race} <Typography variant="body2" sx={{ color: '#bbb', mb: 0.5 }}>
</Typography> Race: {character.Race}
<Typography variant="body2" sx={{ color: '#bbb' }}> </Typography>
Age: {character.Age} <Typography variant="body2" sx={{ color: '#bbb' }}>
</Typography> Age: {character.Age}
</CardContent> </Typography>
</Card> </CardContent>
</Card>
</Link>
</Grid2> </Grid2>
))} ))}
</Grid2> </Grid2>
</Box> </Box>
); );
} };
export default Profile; export default Profile;