+

frontend/src/pages/gameMasterPage.jsx

@@ -49,7 +49,8 @@ const GameMasterPage = () => {
       backgroundColor: '#2e2e3f',
       p: 2,
       borderRadius: '8px',
-      border: '1px solid #444' 
+      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>
@@ -125,9 +126,9 @@ const GameMasterPage = () => {
       background: 'rgba(30, 30, 47, 0.9)',
       borderRadius: '8px',
       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' }}>
         Game Master Dashboard
@@ -139,7 +140,8 @@ const GameMasterPage = () => {
         backgroundColor: '#2e2e3f',
         p: 2,
         borderRadius: '8px',
-        border: '1px solid #444'
+        border: '1px solid #444',
+        height: '345px'
       }}>
         <Typography variant="h5" sx={{ color: '#fff', mb: 2 }}>Player Characters</Typography>
         <Grid2 container spacing={2}>
@@ -192,7 +194,8 @@ const GameMasterPage = () => {
         backgroundColor: '#2e2e3f',
         p: 2,
         borderRadius: '8px',
-        border: '1px solid #444' 
+        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>
@@ -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>