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

+

Browse Source 
jhkj
This commit is contained in:
Marces Zastrow
2025-01-10 09:15:15 +01:00
parent d3fc030c4c
commit e2512637b3
3 changed files with 57 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/database.db
BIN
View File
Binary file not shown.
frontend/src/pages/games.css
+11 -8
View File
@@ -1,6 +1,13 @@
.bar-bg { .bar-bg-mana {
width: 100%; width: 100%;
background-color: #333; background-color: #090040;
border-radius: 4px;
height: 10px;
overflow: hidden;
}
.bar-bg-health {
width: 100%;
background-color: #a10000;
border-radius: 4px; border-radius: 4px;
height: 10px; height: 10px;
overflow: hidden; overflow: hidden;
@@ -13,7 +20,7 @@
} }
.bar-fg-red { .bar-fg-red {
background-color: red; background-color: rgb(52, 190, 24);
} }
.bar-fg-blue { .bar-fg-blue {
@@ -27,11 +34,7 @@
#8A2BE2 50%, /* Purple */ #8A2BE2 50%, /* Purple */
#4169E1 100% /* Blue */ #4169E1 100% /* Blue */
); );
-webkit-background-clip: text; border-radius: 5px;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
display: inline-block; /* Ensure icon remains visible */
} }
.rarity-1 { .rarity-1 {
frontend/src/pages/games.jsx
+33 -14
View File
@@ -12,6 +12,7 @@ import WcIcon from '@mui/icons-material/Wc';
import WorkIcon from '@mui/icons-material/Work'; import WorkIcon from '@mui/icons-material/Work';
import HeartIcon from '@mui/icons-material/Favorite'; import HeartIcon from '@mui/icons-material/Favorite';
import WaterDropIcon from '@mui/icons-material/WaterDrop'; import WaterDropIcon from '@mui/icons-material/WaterDrop';
import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
import defaultCharacterImage from '../assets/default-character.png'; import defaultCharacterImage from '../assets/default-character.png';
import defaultItemImage from '../assets/default-item.png'; import defaultItemImage from '../assets/default-item.png';
@@ -112,23 +113,41 @@ const GamesPage = () => {
<Grid2 container spacing={3}> <Grid2 container spacing={3}>
{/* Character Image and Details */} {/* Character Image and Details */}
<Grid2 item xs={12} md={4}> <Grid2 item xs={12} md={4}>
<Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f'}}> <Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f' }}>
<Card sx={{ width: '100%', backgroundColor: '#1e1e2f', color: '#fff', height: '635px' }}> <Card sx={{ width: '400px', backgroundColor: '#1e1e2f', color: '#fff', height: '635px' }}>
<CardMedia <CardMedia
component="img" component="img"
height="300" height="300"
image={character.Img || defaultCharacterImage} image={character.Img || defaultCharacterImage}
alt={character.CharName} alt={character.CharName}
sx={{ borderRadius: '3px' }} sx={{ borderRadius: '3px', objectFit: 'cover', margin: '0 auto' }}
/> />
<CardContent> <CardContent sx={{padding: '4px'}}>
<Typography variant="h4" sx={{ mb: 4, color: '#fff' }}>{character.CharName}</Typography> <Typography variant="h4" sx={{ mb: 4, color: '#fff', textAlign: 'center'}}>{character.CharName}</Typography>
<Typography variant="h5"><PaidIcon sx={{ color: 'gold' }} /> <strong>Gold:</strong> {character.Gold}</Typography> <Grid2 container spacing={2} sx={{ padding: '4px'}}>
<Typography variant="h5"><CalendarTodayIcon sx={{ color: '#C0C0C0' }} /> <strong>Age:</strong> {character.Age}</Typography> <CardContent sx={{}}>
<Typography variant="h5"><PetsIcon sx={{ color: '#8B4513' }} /> <strong>Race:</strong> {character.Race}</Typography> <Typography variant='h6'><KeyboardDoubleArrowUpIcon sx={{ color: '#fff' }} /> <strong>Level:</strong> {character.Level}</Typography>
<Typography variant="h5"><WcIcon className="gender-icon" sx={{ fontSize: 'inherit' }} /> <strong>Sex:</strong> {character.Sex}</Typography> </CardContent>
<Typography variant="h5"><WorkIcon sx={{ color: '#CD7F32' }} /> <strong>Job:</strong> {character.Job}</Typography> <CardContent sx={{}}>
<Typography variant="h6"><PaidIcon sx={{ color: 'gold' }} /> <strong>Gold:</strong> {character.Gold}</Typography>
</CardContent>
</Grid2>
</CardContent> </CardContent>
<Grid2 container spacing={2} sx={{ padding: '8px', borderTop: '1px solid #444' }}>
<CardContent sx={{borderRight: '3px solid #444'}}>
<Typography variant="h6"><CalendarTodayIcon sx={{ color: '#C0C0C0' }} /> <strong>Age:</strong> {character.Age}</Typography>
<Typography variant="h6"><PetsIcon sx={{ color: '#8B4513' }} /> <strong>Race:</strong> {character.Race}</Typography>
<Typography variant="h6"><WcIcon className="gender-icon" sx={{ fontSize: 'inherit' }} /> <strong>Sex:</strong> {character.Sex}</Typography>
<Typography variant="h6"><WorkIcon sx={{ color: '#CD7F32' }} /> <strong>Job:</strong> {character.Job}</Typography>
</CardContent>
<CardContent>
<Typography variant="h6"><strong>Strength:</strong> {character.Strength}</Typography>
<Typography variant="h6"><strong>Dexterity:</strong> {character.Dexterity}</Typography>
<Typography variant="h6"><strong>Agility:</strong> {character.Agility}</Typography>
<Typography variant="h6"><strong>Endurance:</strong> {character.Endurance}</Typography>
</CardContent>
</Grid2>
</Card> </Card>
</Box> </Box>
</Grid2> </Grid2>
@@ -138,11 +157,11 @@ const GamesPage = () => {
<Box sx={{ display: 'flex', gap: 2, mb: 4, width: '885px' }}> <Box sx={{ display: 'flex', gap: 2, mb: 4, width: '885px' }}>
<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' }}>
<HeartIcon sx={{color: "red"}}/> <HeartIcon sx={{ color: "red" }} />
<span>Health</span> <span>Health</span>
<span>{character.currentHealth}/{character.maxHealth}</span> <span>{character.currentHealth}/{character.maxHealth}</span>
</Typography> </Typography>
<Box className="bar-bg"> <Box className="bar-bg-health">
<Box <Box
className="bar-fg bar-fg-red" className="bar-fg bar-fg-red"
sx={{ width: `${(character.currentHealth / character.maxHealth) * 100}%` }} sx={{ width: `${(character.currentHealth / character.maxHealth) * 100}%` }}
@@ -151,11 +170,11 @@ const GamesPage = () => {
</Box> </Box>
<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' }}>
<WaterDropIcon sx={{color: 'blue'}}/> <WaterDropIcon sx={{ color: 'blue' }} />
<span>Mana</span> <span>Mana</span>
<span>{character.currentMana}/{character.maxMana}</span> <span>{character.currentMana}/{character.maxMana}</span>
</Typography> </Typography>
<Box className="bar-bg"> <Box className="bar-bg-mana">
<Box <Box
className="bar-fg bar-fg-blue" className="bar-fg bar-fg-blue"
sx={{ width: `${(character.currentMana / character.maxMana) * 100}%` }} sx={{ width: `${(character.currentMana / character.maxMana) * 100}%` }}