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 axios from 'axios';
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';
const GamesPage = () => {
@@ -13,7 +13,9 @@ const GamesPage = () => {
useEffect(() => {
const fetchCharacter = async () => {
try {
console.log(`Fetching character for gameId: ${gameId}, userId: ${userId}`); // Debug output
const response = await axios.get(`http://localhost:5000/games/${gameId}/${userId}/character`);
console.log('Character data:', response.data); // Debug output
setCharacter(response.data);
} catch (error) {
console.error('Error fetching character:', error);
@@ -37,76 +39,77 @@ const GamesPage = () => {
}
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' }}>
<Box sx={{ p: 3, }}>
<Grid2 container spacing={3}>
{/* Character Image and Details */}
<Grid2 item xs={12} md={4}>
<Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f' }}>
<Card sx={{ width: '100%', backgroundColor: '#1e1e2f', color: '#fff' }}>
<CardMedia
component="img"
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>{character.CurrentHealth}/{character.MaxHealth}</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 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>
</Box>
{/* Mana Bar */}
<Box>
<Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between' }}>
<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>Mana</span>
<span>{character.CurrentMana}/{character.MaxMana}</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 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>
</Box>
</Box>
{/* Character Description */}
{/* Character Info Section */}
<Box sx={{ mb: 4 }}>
<Typography variant="h5" sx={{ mb: 2 }}>Description</Typography>
<Typography variant="body1">{character.Looks}</Typography>
<Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Description</Typography>
<Typography variant="body1" sx={{ color: '#fff' }}>{character.description}</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>
<Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Inventory</Typography>
<Grid2 container spacing={2}>
{character.inventory?.map((item, index) => (
<Grid2 item xs={6} sm={4} md={3} key={index}>
<Card sx={{ backgroundColor: '#1e1e2f', color: '#fff' }}>
<CardContent>
<Typography variant="h6">{item.name}</Typography>
<Typography variant="body2" color="textSecondary">Quantity: {item.quantity}</Typography>
</CardContent>
</Card>
</Grid>
</Grid2>
))}
</Grid>
</Grid2>
</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>
</Grid2>
</Grid2>
</Box>
);
};