Marces/dndmaster
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

+

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/games.jsx
+4 -2
View File
@@ -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 */}
frontend/src/pages/profile.jsx
+25 -23
View File
@@ -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;