+
This commit is contained in:
Binary file not shown.
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user