++
Updated Game Page
This commit is contained in:
Marces Zastrow
Binary file not shown.
@@ -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' }}>
|
||||
<span>Health</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>
|
||||
</Box>
|
||||
{/* Mana Bar */}
|
||||
<Box>
|
||||
<Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span>Mana</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>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Character Description */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h5" sx={{ mb: 2 }}>Description</Typography>
|
||||
<Typography variant="body1">{character.Looks}</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>
|
||||
<CardContent>
|
||||
<Typography variant="h6">{item.name}</Typography>
|
||||
<Typography variant="body2" color="textSecondary">Quantity: {item.quantity}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Box sx={{ p: 3, }}>
|
||||
<Grid2 container spacing={3}>
|
||||
{/* Character Image and Details */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card>
|
||||
<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="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>
|
||||
<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>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</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>
|
||||
</Typography>
|
||||
<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>
|
||||
<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>
|
||||
</Typography>
|
||||
<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 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>
|
||||
|
||||
{/* Inventory */}
|
||||
<Box>
|
||||
<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>
|
||||
</Grid2>
|
||||
))}
|
||||
</Grid2>
|
||||
</Box>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user