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

+

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