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

++

Browse Source 
Updated Game Page
This commit is contained in:
Marces Zastrow
2025-01-08 13:48:06 +01:00
parent a252350323
commit fb3b1f5ba6
2 changed files with 54 additions and 51 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.jsx
+52 -49
View File
@@ -2,7 +2,7 @@ import { useState, useEffect, useContext } from 'react';
import { Link, useParams } from 'react-router-dom'; import { Link, useParams } from 'react-router-dom';
import axios from 'axios'; import axios from 'axios';
import { UserContext } from '../context/UserContext'; import { UserContext } from '../context/UserContext';
import { Box, Typography, Grid, Card, CardContent, CardMedia, Button } from '@mui/material'; import { Box, Typography, Grid2, Card, CardContent, CardMedia, Button } from '@mui/material';
import defaultCharacterImage from '../assets/default-character.png'; import defaultCharacterImage from '../assets/default-character.png';
const GamesPage = () => { const GamesPage = () => {
@@ -13,7 +13,9 @@ const GamesPage = () => {
useEffect(() => { useEffect(() => {
const fetchCharacter = async () => { const fetchCharacter = async () => {
try { try {
console.log(`Fetching character for gameId: ${gameId}, userId: ${userId}`); // Debug output
const response = await axios.get(`http://localhost:5000/games/${gameId}/${userId}/character`); const response = await axios.get(`http://localhost:5000/games/${gameId}/${userId}/character`);
console.log('Character data:', response.data); // Debug output
setCharacter(response.data); setCharacter(response.data);
} catch (error) { } catch (error) {
console.error('Error fetching character:', error); console.error('Error fetching character:', error);
@@ -37,76 +39,77 @@ const GamesPage = () => {
} }
return ( return (
<Box sx={{ p: 3 }}> <Box sx={{ p: 3, }}>
<Grid container spacing={3}> <Grid2 container spacing={3}>
{/* Character Info Section */} {/* Character Image and Details */}
<Grid item xs={12} md={8}> <Grid2 item xs={12} md={4}>
<Typography variant="h3" sx={{ mb: 4 }}>{character.CharName}</Typography> <Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f' }}>
<Box sx={{ mb: 4 }}> <Card sx={{ width: '100%', backgroundColor: '#1e1e2f', color: '#fff' }}>
{/* Health Bar */} <CardMedia
<Box sx={{ mb: 2 }}> component="img"
<Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between' }}> height="300"
image={character.Img || defaultCharacterImage}
alt={character.CharName}
sx={{ borderRadius: '3px' }}
/>
<CardContent>
<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>
<Typography variant="h5"><strong>Job:</strong> {character.Job}</Typography>
</CardContent>
</Card>
</Box>
</Grid2>
{/* 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={{ 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> <span>Health</span>
<span>{character.CurrentHealth}/{character.MaxHealth}</span> <span>{character.currentHealth}/{character.maxHealth}</span>
</Typography> </Typography>
<Box sx={{ width: '100%', backgroundColor: 'gray', borderRadius: '4px', height: '10px' }}> <Box sx={{ width: '100%', backgroundColor: '#333', borderRadius: '4px', height: '10px' }}>
<Box sx={{ width: `${(character.CurrentHealth / character.MaxHealth) * 100}%`, backgroundColor: 'red', height: '100%', borderRadius: '4px' }}></Box> <Box sx={{ width: `${(character.currentHealth / character.maxHealth) * 100}%`, backgroundColor: 'red', height: '100%', borderRadius: '4px' }}></Box>
</Box> </Box>
</Box> </Box>
{/* Mana Bar */} <Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
<Box> <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
<Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between' }}>
<span>Mana</span> <span>Mana</span>
<span>{character.CurrentMana}/{character.MaxMana}</span> <span>{character.currentMana}/{character.maxMana}</span>
</Typography> </Typography>
<Box sx={{ width: '100%', backgroundColor: 'gray', borderRadius: '4px', height: '10px' }}> <Box sx={{ width: '100%', backgroundColor: '#333', borderRadius: '4px', height: '10px' }}>
<Box sx={{ width: `${(character.CurrentMana / character.MaxMana) * 100}%`, backgroundColor: 'blue', height: '100%', borderRadius: '4px' }}></Box> <Box sx={{ width: `${(character.currentMana / character.maxMana) * 100}%`, backgroundColor: 'blue', height: '100%', borderRadius: '4px' }}></Box>
</Box> </Box>
</Box> </Box>
</Box> </Box>
{/* Character Description */} {/* Character Info Section */}
<Box sx={{ mb: 4 }}> <Box sx={{ mb: 4 }}>
<Typography variant="h5" sx={{ mb: 2 }}>Description</Typography> <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Description</Typography>
<Typography variant="body1">{character.Looks}</Typography> <Typography variant="body1" sx={{ color: '#fff' }}>{character.description}</Typography>
</Box> </Box>
{/* Inventory */} {/* Inventory */}
<Box> <Box>
<Typography variant="h5" sx={{ mb: 2 }}>Inventory</Typography> <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Inventory</Typography>
<Grid container spacing={2}> <Grid2 container spacing={2}>
{character.Items?.map((item, index) => ( {character.inventory?.map((item, index) => (
<Grid item xs={6} sm={4} md={3} key={index}> <Grid2 item xs={6} sm={4} md={3} key={index}>
<Card> <Card sx={{ backgroundColor: '#1e1e2f', color: '#fff' }}>
<CardContent> <CardContent>
<Typography variant="h6">{item.name}</Typography> <Typography variant="h6">{item.name}</Typography>
<Typography variant="body2" color="textSecondary">Quantity: {item.quantity}</Typography> <Typography variant="body2" color="textSecondary">Quantity: {item.quantity}</Typography>
</CardContent> </CardContent>
</Card> </Card>
</Grid> </Grid2>
))} ))}
</Grid> </Grid2>
</Box> </Box>
</Grid> </Grid2>
</Grid2>
{/* 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> </Box>
); );
}; };