This commit is contained in:
Marces Zastrow
2025-01-17 08:31:27 +01:00
parent a3bf8064d9
commit f65c71619e
2 changed files with 57 additions and 41 deletions
Binary file not shown.
+57 -41
View File
@@ -23,12 +23,12 @@ const GameMasterPage = () => {
const pcsResponse = await axios.get(`http://localhost:5000/games/${gameId}/playerchars`); const pcsResponse = await axios.get(`http://localhost:5000/games/${gameId}/playerchars`);
const processedPCs = Array.isArray(pcsResponse.data) ? pcsResponse.data : [pcsResponse.data]; const processedPCs = Array.isArray(pcsResponse.data) ? pcsResponse.data : [pcsResponse.data];
setPlayerCharacters(processedPCs.filter(pc => pc !== null)); setPlayerCharacters(processedPCs.filter(pc => pc !== null));
// Fetch NPCs with different structure // Fetch NPCs with different structure
const npcsResponse = await axios.get(`http://localhost:5000/games/${gameId}/npcs`); const npcsResponse = await axios.get(`http://localhost:5000/games/${gameId}/npcs`);
const processedNPCs = Array.isArray(npcsResponse.data) ? npcsResponse.data : [npcsResponse.data]; const processedNPCs = Array.isArray(npcsResponse.data) ? npcsResponse.data : [npcsResponse.data];
setNpcs(processedNPCs.filter(npc => npc !== null)); setNpcs(processedNPCs.filter(npc => npc !== null));
// Fetch Items // Fetch Items
const itemsResponse = await axios.get(`http://localhost:5000/games/${gameId}/items`); const itemsResponse = await axios.get(`http://localhost:5000/games/${gameId}/items`);
const processedItems = Array.isArray(itemsResponse.data) ? itemsResponse.data : [itemsResponse.data]; const processedItems = Array.isArray(itemsResponse.data) ? itemsResponse.data : [itemsResponse.data];
@@ -37,19 +37,20 @@ const GameMasterPage = () => {
console.error('Error fetching data:', error); console.error('Error fetching data:', error);
} }
}; };
fetchData(); fetchData();
const interval = setInterval(fetchData, 5000); const interval = setInterval(fetchData, 5000);
return () => clearInterval(interval); return () => clearInterval(interval);
}, [gameId]); }, [gameId]);
const Section = ({ title, items, createPath, createText }) => ( const Section = ({ title, items, createPath, createText }) => (
<Box sx={{ <Box sx={{
mb: 4, mb: 4,
backgroundColor: '#2e2e3f', backgroundColor: '#2e2e3f',
p: 2, p: 2,
borderRadius: '8px', borderRadius: '8px',
border: '1px solid #444' border: '1px solid #444',
height: '345px'
}}> }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}> <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Typography variant="h5" sx={{ color: '#fff' }}>{title}</Typography> <Typography variant="h5" sx={{ color: '#fff' }}>{title}</Typography>
@@ -69,8 +70,8 @@ const GameMasterPage = () => {
<Grid2 container spacing={2}> <Grid2 container spacing={2}>
{items.map((item, index) => ( {items.map((item, index) => (
<Grid2 item xs={12} sm={6} md={3} key={index}> <Grid2 item xs={12} sm={6} md={3} key={index}>
<Card sx={{ <Card sx={{
backgroundColor: '#1e1e2f', backgroundColor: '#1e1e2f',
color: '#fff', color: '#fff',
height: '95%', // Reduced height height: '95%', // Reduced height
border: '1px solid #444', border: '1px solid #444',
@@ -87,15 +88,15 @@ const GameMasterPage = () => {
image={item.Img || defaultItemImage} image={item.Img || defaultItemImage}
alt={item.ItemName} alt={item.ItemName}
className={`rarity-${item.Rarity} rarity-image`} className={`rarity-${item.Rarity} rarity-image`}
sx={{ sx={{
objectFit: 'contain', objectFit: 'contain',
width: '128px' width: '128px'
}} }}
/> />
</Box> </Box>
<CardContent> <CardContent>
<Typography <Typography
variant="h6" variant="h6"
component="div" component="div"
className={`rarity-name-${item.Rarity}`} className={`rarity-name-${item.Rarity}`}
> >
@@ -120,33 +121,34 @@ const GameMasterPage = () => {
return ( return (
// Update main container Box styling // Update main container Box styling
<Box sx={{ <Box sx={{
p: 3, p: 3,
background: 'rgba(30, 30, 47, 0.9)', background: 'rgba(30, 30, 47, 0.9)',
borderRadius: '8px', borderRadius: '8px',
width: '1200px', width: '1200px',
margin: '80px auto 40px auto', // Increased top margin margin: '100px auto -600px auto', // Increased top margin
position: 'relative', position: 'relative'
minHeight: 'calc(100vh - 120px)' // Account for margins // Removed minHeight calculation
}}> }}>
<Typography variant="h4" sx={{ mb: 4, color: '#fff' }}> <Typography variant="h4" sx={{ mb: 4, color: '#fff' }}>
Game Master Dashboard Game Master Dashboard
</Typography> </Typography>
{/* Player Characters Section */} {/* Player Characters Section */}
<Box sx={{ <Box sx={{
mb: 4, mb: 4,
backgroundColor: '#2e2e3f', backgroundColor: '#2e2e3f',
p: 2, p: 2,
borderRadius: '8px', borderRadius: '8px',
border: '1px solid #444' border: '1px solid #444',
height: '345px'
}}> }}>
<Typography variant="h5" sx={{ color: '#fff', mb: 2 }}>Player Characters</Typography> <Typography variant="h5" sx={{ color: '#fff', mb: 2 }}>Player Characters</Typography>
<Grid2 container spacing={2}> <Grid2 container spacing={2}>
{playerCharacters.map((character, index) => ( {playerCharacters.map((character, index) => (
<Grid2 item xs={12} sm={6} md={3} key={index}> <Grid2 item xs={12} sm={6} md={3} key={index}>
<Card sx={{ <Card sx={{
backgroundColor: '#1e1e2f', backgroundColor: '#1e1e2f',
color: '#fff', color: '#fff',
border: '1px solid #444', border: '1px solid #444',
height: '100%' height: '100%'
@@ -162,7 +164,7 @@ const GameMasterPage = () => {
height="140" height="140"
image={character.Img || defaultCharacterImage} image={character.Img || defaultCharacterImage}
alt={character.CharName} alt={character.CharName}
sx={{ sx={{
objectFit: 'contain', objectFit: 'contain',
width: '140px', width: '140px',
borderRadius: '3px' borderRadius: '3px'
@@ -187,12 +189,13 @@ const GameMasterPage = () => {
</Box> </Box>
{/* NPCs Section */} {/* NPCs Section */}
<Box sx={{ <Box sx={{
mb: 4, mb: 4,
backgroundColor: '#2e2e3f', backgroundColor: '#2e2e3f',
p: 2, p: 2,
borderRadius: '8px', borderRadius: '8px',
border: '1px solid #444' border: '1px solid #444',
height: '345px'
}}> }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}> <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Typography variant="h5" sx={{ color: '#fff' }}>NPCs</Typography> <Typography variant="h5" sx={{ color: '#fff' }}>NPCs</Typography>
@@ -212,8 +215,8 @@ const GameMasterPage = () => {
<Grid2 container spacing={2}> <Grid2 container spacing={2}>
{npcs.map((npc, index) => ( {npcs.map((npc, index) => (
<Grid2 item xs={12} sm={6} md={3} key={index}> <Grid2 item xs={12} sm={6} md={3} key={index}>
<Card sx={{ <Card sx={{
backgroundColor: '#1e1e2f', backgroundColor: '#1e1e2f',
color: '#fff', color: '#fff',
border: '1px solid #444', border: '1px solid #444',
height: '100%' height: '100%'
@@ -229,7 +232,7 @@ const GameMasterPage = () => {
height="140" height="140"
image={npc.Img || defaultCharacterImage} image={npc.Img || defaultCharacterImage}
alt={npc.CharName} alt={npc.CharName}
sx={{ sx={{
objectFit: 'contain', objectFit: 'contain',
width: '140px', width: '140px',
borderRadius: '3px' borderRadius: '3px'
@@ -238,13 +241,26 @@ const GameMasterPage = () => {
</Box> </Box>
<CardContent> <CardContent>
<Typography variant="h6" component="div"> <Typography variant="h6" component="div">
{npc.CharName} {npc.Name}
</Typography> </Typography>
<Typography variant="body2" sx={{ color: '#bbb' }}> <Typography variant="body2" sx={{ color: '#bbb' }}>
{npc.Race} {npc.Race} - Level {npc.Level}
</Typography> </Typography>
<Typography variant="body2" sx={{ color: '#bbb' }}> <Typography variant="body2" sx={{ color: '#bbb' }}>
{npc.Job} Job: {npc.Job}
</Typography>
<Typography variant="body2" sx={{
color: npc.Allied === 0
? '#1eff00'
: npc.Allied === 1
? '#ffd100'
: '#ff0000'
}}>
Status: {npc.Allied === 0
? 'Allied'
: npc.Allied === 1
? 'Neutral'
: 'Enemy'}
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>