+

backend/server.js

@@ -95,6 +95,21 @@ app.get('/games/:userId', (req, res) => {
 });
 
 
+// Fetch game details including game master
+app.get('/games/:gameId/master', (req, res) => {
+    const gameId = req.params.gameId;
+    db.get('SELECT * FROM games WHERE game_id = ?', [gameId], (err, row) => {
+      if (err) {
+        return res.status(500).json({ error: 'Internal server error' });
+      }
+      if (!row) {
+        return res.status(404).json({ error: 'Game not found' });
+      }
+      // Convert game_master_id to number for consistent comparison
+      res.json(row);
+    });
+  });
+
 // Join Game
 app.post('/joinGame/:gameId', (req, res) => {
     const gameId = req.params.gameId;
@@ -162,18 +177,25 @@ app.post('/createGame', (req, res) => {
 // Fetch game Participant Characters
 app.get('/games/:gameId/playerchars', (req, res) => {
     const gameId = req.params.gameId;
-    db.get('SELECT * FROM PlayerCharacter WHERE GameID = ?', [gameId], (err, row) => {
+    db.all('SELECT * FROM PlayerCharacter WHERE GameID = ?', [gameId], (err, rows) => {
         if (err) {
             return res.status(500).json({ error: 'Internal server error' });
         }
-        res.json(row);
+        // Process each row and convert BLOB to base64 if image exists
+        const processedRows = rows.map(row => {
+            if (row.Img) {
+                row.Img = `data:image/jpeg;base64,${row.Img.toString('base64')}`;
+            }
+            return row;
+        });
+        res.json(processedRows);
+    });
 });
-})
 
 // Fetch game NPCs
 app.get('/games/:gameId/npcs', (req, res) => {
     const gameId = req.params.gameId;
-    db.get('SELECT * FROM NPC WHERE GameID = ?', [gameId], (err, row) => {
+    db.all('SELECT * FROM NPC WHERE GameID = ?', [gameId], (err, row) => {
         if (err) {
             return res.status(500).json({ error: 'Internal server error' });
         }
@@ -184,12 +206,19 @@ app.get('/games/:gameId/npcs', (req, res) => {
 // Fetch game Items
 app.get('/games/:gameId/items', (req, res) => {
     const gameId = req.params.gameId;
-    db.get('SELECT * FROM Item WHERE GameID = ?', [gameId], (err, row) => {
+    db.all(`
+        SELECT Item.*, PlayerCharacter.CharName as OwnerName 
+        FROM Item 
+        LEFT JOIN PlayerCharacter ON Item.OwnerID = PlayerCharacter.CharID 
+        WHERE Item.GameID = ?`, 
+        [gameId], 
+        (err, rows) => {
             if (err) {
                 return res.status(500).json({ error: 'Internal server error' });
             }
-        res.json(row);
+            res.json(rows);
-    });
+        }
+    );
 })
 
 
@@ -324,6 +353,38 @@ app.get('/games/:gameId/:charId/items', (req, res) => {
 });
 
 // Item Part
+// Create Item
+app.post('/games/item/create', upload.single('image'), (req, res) => {
+    const {
+        ItemName, Type, Art, Rarity, MaxDurability, CurrentDurability, 
+        GoldValue, Abilities, GameID, AP
+    } = req.body;
+    
+    const imageBuffer = req.file ? req.file.buffer : null;
+    
+    const stmt = db.prepare(`
+        INSERT INTO Item (
+            ItemName, Type, Art, Rarity, MaxDurability, CurrentDurability,
+            GoldValue, Abilities, GameID, OwnerID, img, AP
+        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, NULL, ?, ?)
+    `);
+
+    stmt.run([
+        ItemName, Type, Art, Rarity, MaxDurability, CurrentDurability,
+        GoldValue, Abilities, GameID, imageBuffer, AP
+    ], function(err) {
+        if (err) {
+            console.error('Database error:', err);
+            return res.status(500).json({ error: 'Internal server error' });
+        }
+        res.status(201).json({
+            message: 'Item created successfully!',
+            itemId: this.lastID
+        });
+    });
+    stmt.finalize();
+});
+
 // Set Item Owner
 app.post('/games/:charId/:itemId/owner', (req, res) => {
     const gameId = req.params.gameId;

frontend/src/App.jsx

@@ -10,6 +10,8 @@ import JoinGame from './pages/joinGame';
 import StartGame from './pages/startGame';
 import Profile from './pages/profile';
 import Games from './pages/games.jsx';
+import GameMasterPage from './pages/gameMasterPage.jsx';
+import CreateItem from './pages/createItem.jsx';
 import CreateCharacter from './pages/createCharacter.jsx';
 import { UserProvider } from './context/UserContext.jsx';
 
@@ -61,6 +63,10 @@ function App() {
               path="/profile"
               element={<Profile isLoggedIn={isLoggedIn} />}
             />
+            <Route
+              path='/games/:gameId/master'
+              element={<GameMasterPage isLoggedIn={isLoggedIn} />}
+            />
             <Route
               path='/games/:gameId'
               element={<Games isLoggedIn={isLoggedIn} />}
@@ -69,6 +75,11 @@ function App() {
               path='/create-Character'
               element={<CreateCharacter isLoggedIn={isLoggedIn} />}
             />
+            <Route
+              path='/create-item'
+              element={<CreateItem isLoggedIn={isLoggedIn} />}
+            />
+            
           </Routes>
         </div>
       </Router>

frontend/src/pages/createItem.jsx

@@ -0,0 +1,308 @@
+import React, { useState, useContext } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { UserContext } from '../context/UserContext';
+import axios from 'axios';
+import { Box, TextField, Button, Typography, Select, MenuItem, FormControl, InputLabel, Grid2, Card, CardContent, CardMedia } from '@mui/material';
+
+import defaultItemImage from '../assets/default-item.png';
+
+const CreateItem = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { userId } = useContext(UserContext);
+  const gameId = new URLSearchParams(location.search).get('gameId');
+
+  const [formData, setFormData] = useState({
+    ItemName: '',        // Match DB column names exactly
+    Type: '',
+    Art: '',
+    Rarity: 1,
+    MaxDurability: 100,
+    CurrentDurability: 100,
+    GoldValue: 0,
+    Abilities: '',
+    AP: 0,
+    GameID: gameId
+  });
+
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [imagePreview, setImagePreview] = useState(null);
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setSelectedImage(file);
+      setImagePreview(URL.createObjectURL(file));
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const formDataToSend = new FormData();
+
+    // Add all form fields with exact column names
+    Object.keys(formData).forEach(key => {
+        // Convert null values to empty strings to prevent SQL issues
+        formDataToSend.append(key, formData[key] === null ? '' : formData[key]);
+    });
+
+    // Add image if present
+    if (selectedImage) {
+        formDataToSend.append('image', selectedImage);
+    }
+
+    try {
+        const response = await axios.post(
+            'http://localhost:5000/games/item/create',
+            formDataToSend,
+            {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            }
+        );
+
+        if (response.status === 201) {
+            navigate(`/games/${gameId}/master`);
+        }
+    } catch (error) {
+        console.error('Error creating item:', error);
+    }
+};
+
+  const inputStyles = {
+    '& .MuiOutlinedInput-root': {
+      '& fieldset': { borderColor: '#444' },
+      '&:hover fieldset': { borderColor: '#764ACB' },
+      '&.Mui-focused fieldset': { borderColor: '#764ACB' },
+    },
+    '& .MuiInputLabel-root': { color: '#fff' },
+    '& .MuiInputBase-input': { color: '#fff' }
+  };
+
+  return (
+    <Box sx={{ p: 3, background: 'rgba(30, 30, 47, 0.9)', borderRadius: '8px', marginTop: '40px' }}>
+      <form onSubmit={handleSubmit}>
+        <Grid2 container spacing={3}>
+          {/* Left Column - Image and Basic Info */}
+          <Grid2 item xs={12} md={4}>
+            <Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f', width: '330px' }}>
+              <Card sx={{ backgroundColor: '#1e1e2f', color: '#fff' }}>
+                {/* Image Upload Section */}
+                {imagePreview ? (
+                  <Box component="label" htmlFor="image-upload" sx={{ cursor: 'pointer', position: 'relative' }}>
+                    <input
+                      accept="image/*"
+                      type="file"
+                      id="image-upload"
+                      style={{ display: 'none' }}
+                      onChange={handleImageChange}
+                    />
+                    <CardMedia
+                      component="img"
+                      height="300"
+                      image={imagePreview}
+                      alt="Item Preview"
+                      sx={{ borderRadius: '3px', objectFit: 'contain', margin: '0 auto', borderBottom: '1px solid #444' }}
+                    />
+                  </Box>
+                ) : (
+                  <Box
+                    component="label"
+                    htmlFor="image-upload"
+                    sx={{
+                      height: 300,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      backgroundColor: '#2e2e3f',
+                      borderRadius: '3px',
+                      cursor: 'pointer'
+                    }}
+                  >
+                    <input
+                      accept="image/*"
+                      type="file"
+                      id="image-upload"
+                      style={{ display: 'none' }}
+                      onChange={handleImageChange}
+                    />
+                    <Button
+                      variant="contained"
+                      component="span"
+                      sx={{
+                        backgroundColor: '#764ACB',
+                        '&:hover': { backgroundColor: '#9865f7' }
+                      }}
+                    >
+                      Upload Item Image
+                    </Button>
+                  </Box>
+                )}
+
+                {/* Basic Item Info */}
+                <CardContent sx={{ p: 3 }}>
+                  <TextField
+                    fullWidth
+                    label="Item Name"
+                    name="ItemName"  // Changed from itemName
+                    value={formData.ItemName}
+                    onChange={handleChange}
+                    required
+                    sx={{ ...inputStyles, mb: 2 }}
+                  />
+
+                  <Grid2 container spacing={2}>
+                    <Grid2 item xs={6}>
+                      <FormControl fullWidth sx={{ mb: 2, width: '140px' }}>  {/* Width for "Consumable" + padding */}
+                        <InputLabel sx={{ color: '#fff' }}>Type</InputLabel>
+                        <Select
+                          name="Type"
+                          value={formData.Type}
+                          onChange={handleChange}
+                          required
+                          sx={{ ...inputStyles }}
+                        >
+                          <MenuItem value="Weapon">Weapon</MenuItem>
+                          <MenuItem value="Armor">Armor</MenuItem>
+                          <MenuItem value="Consumable">Consumable</MenuItem>
+                          <MenuItem value="Quest">Quest Item</MenuItem>
+                          <MenuItem value="Other">Other</MenuItem>
+                        </Select>
+                      </FormControl>
+                    </Grid2>
+                    <Grid2 item xs={6}>
+                      <FormControl fullWidth sx={{ mb: 2, width: '120px' }}>  {/* Width for "Potion" + padding */}
+                        <InputLabel sx={{ color: '#fff' }}>Art</InputLabel>
+                        <Select
+                          name="Art"
+                          value={formData.Art}
+                          onChange={handleChange}
+                          required
+                          sx={{ ...inputStyles }}
+                        >
+                          <MenuItem value="Sword">Sword</MenuItem>
+                          <MenuItem value="Axe">Axe</MenuItem>
+                          <MenuItem value="Bow">Bow</MenuItem>
+                          <MenuItem value="Shield">Shield</MenuItem>
+                          <MenuItem value="Staff">Staff</MenuItem>
+                          <MenuItem value="Potion">Potion</MenuItem>
+                          <MenuItem value="Other">Other</MenuItem>
+                        </Select>
+                      </FormControl>
+                    </Grid2>
+                  </Grid2>
+
+                  <TextField
+                    fullWidth
+                    label="Gold Value"
+                    name="GoldValue"
+                    type="number"
+                    value={formData.GoldValue}
+                    onChange={handleChange}
+                    required
+                    sx={{ ...inputStyles, mb: 2 }}
+                  />
+                </CardContent>
+              </Card>
+            </Box>
+          </Grid2>
+
+          {/* Right Column - Details */}
+          <Grid2 item xs={12} md={8}>
+            {/* Item Properties */}
+            <Box sx={{ mb: 4 }}>
+              <Typography variant="h5" sx={{ color: '#fff', mb: 2 }}>Item Properties</Typography>
+              <Box sx={{ backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444', width: '800px', justifyItems: 'center' }}>  
+                <Grid2 container spacing={2}>
+                  <Grid2 item xs={12} md={4}>
+                    <FormControl fullWidth sx={{ mb: 2, width: '160px' }}>  {/* Width for "Legendary" + padding */}
+                      <InputLabel sx={{ color: '#fff' }}>Rarity</InputLabel>
+                      <Select
+                        name="Rarity"
+                        value={formData.Rarity}
+                        onChange={handleChange}
+                        required
+                        sx={{ ...inputStyles }}
+                      >
+                        <MenuItem value={1}>Poor</MenuItem>
+                        <MenuItem value={2}>Common</MenuItem>
+                        <MenuItem value={3}>Uncommon</MenuItem>
+                        <MenuItem value={4}>Rare</MenuItem>
+                        <MenuItem value={5}>Epic</MenuItem>
+                        <MenuItem value={6}>Legendary</MenuItem>
+                        <MenuItem value={7}>Artifact</MenuItem>
+                      </Select>
+                    </FormControl>
+                  </Grid2>
+                  <Grid2 item xs={12} md={4}>
+                    <TextField
+                      fullWidth
+                      label="Attack Power"
+                      name="AP"
+                      type="number"
+                      value={formData.AP}
+                      onChange={handleChange}
+                      sx={{ ...inputStyles }}
+                    />
+                  </Grid2>
+                  <Grid2 item xs={12} md={4}>
+                    <TextField
+                      fullWidth
+                      label="Max Durability"
+                      name="MaxDurability"
+                      type="number"
+                      value={formData.MaxDurability}
+                      onChange={handleChange}
+                      required
+                      sx={{ ...inputStyles }}
+                    />
+                  </Grid2>
+                </Grid2>
+              </Box>
+            </Box>
+
+            {/* Abilities */}
+            <Box sx={{ mb: 4 }}>
+              <Typography variant="h5" sx={{ color: '#fff', mb: 2 }}>Abilities</Typography>
+              <Box sx={{ backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444' }}>
+                <TextField
+                  fullWidth
+                  multiline
+                  rows={2}
+                  name="Abilities"
+                  value={formData.Abilities}
+                  onChange={handleChange}
+                  sx={{ ...inputStyles }}
+                />
+              </Box>
+            </Box>
+
+            {/* Submit Button */}
+            <Button
+              type="submit"
+              variant="contained"
+              fullWidth
+              sx={{
+                backgroundColor: '#764ACB',
+                '&:hover': { backgroundColor: '#9865f7' },
+                mt: 3
+              }}
+            >
+              Create Item
+            </Button>
+          </Grid2>
+        </Grid2>
+      </form>
+    </Box>
+  );
+};
+
+export default CreateItem;

frontend/src/pages/gameMasterPage.jsx

@@ -0,0 +1,267 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { UserContext } from '../context/UserContext';
+import axios from 'axios';
+import { Box, Typography, Grid2, Card, CardContent, CardMedia, Button, IconButton } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+
+import defaultCharacterImage from '../assets/default-character.png';
+import defaultItemImage from '../assets/default-item.png';
+
+const GameMasterPage = () => {
+  const { userId } = useContext(UserContext);
+  const { gameId } = useParams();
+  const [playerCharacters, setPlayerCharacters] = useState([]);
+  const [npcs, setNpcs] = useState([]);
+  const [items, setItems] = useState([]);
+
+  // Fix useEffect data fetching
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Fetch player characters
+        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];
+        setItems(processedItems.filter(item => item !== null));
+      } catch (error) {
+        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={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+        <Typography variant="h5" sx={{ color: '#fff' }}>{title}</Typography>
+        <Button
+          variant="contained"
+          component={Link}
+          to={`${createPath}?gameId=${gameId}`}
+          startIcon={<AddIcon />}
+          sx={{
+            backgroundColor: '#764ACB',
+            '&:hover': { backgroundColor: '#9865f7' }
+          }}
+        >
+          {createText}
+        </Button>
+      </Box>
+      <Grid2 container spacing={2}>
+        {items.map((item, index) => (
+          <Grid2 item xs={12} sm={6} md={3} key={index}>
+            <Card sx={{ 
+              backgroundColor: '#1e1e2f', 
+              color: '#fff',
+              height: '95%', // Reduced height
+              border: '1px solid #444',
+            }}>
+              <Box sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                padding: '8px'
+              }}>
+                <CardMedia
+                  component="img"
+                  height="135" // Reduced from 140
+                  image={item.Img || defaultItemImage}
+                  alt={item.ItemName}
+                  className={`rarity-${item.Rarity} rarity-image`}
+                  sx={{ 
+                    objectFit: 'contain',
+                    width: '128px'
+                  }}
+                />
+              </Box>
+              <CardContent>
+                <Typography 
+                  variant="h6" 
+                  component="div"
+                  className={`rarity-name-${item.Rarity}`}
+                >
+                  {item.ItemName}
+                </Typography>
+                <Typography variant="body2" sx={{ color: '#bbb' }}>
+                  Type: {item.Type}
+                </Typography>
+                <Typography variant="body2" sx={{ color: '#bbb' }}>
+                  Value: {item.GoldValue}
+                </Typography>
+                <Typography variant="body2" sx={{ color: '#bbb' }}>
+                  Owner: {item.OwnerName || 'Unassigned'}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid2>
+        ))}
+      </Grid2>
+    </Box>
+  );
+
+  return (
+    // Update main container Box styling
+    <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
+    }}>
+      <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'
+      }}>
+        <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', 
+                color: '#fff',
+                border: '1px solid #444',
+                height: '100%'
+              }}>
+                <Box sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  padding: '8px'
+                }}>
+                  <CardMedia
+                    component="img"
+                    height="140"
+                    image={character.Img || defaultCharacterImage}
+                    alt={character.CharName}
+                    sx={{ 
+                      objectFit: 'contain',
+                      width: '140px',
+                      borderRadius: '3px'
+                    }}
+                  />
+                </Box>
+                <CardContent>
+                  <Typography variant="h6" component="div">
+                    {character.CharName}
+                  </Typography>
+                  <Typography variant="body2" sx={{ color: '#bbb' }}>
+                    {character.Race} - Level {character.Level}
+                  </Typography>
+                  <Typography variant="body2" sx={{ color: '#bbb' }}>
+                    {character.Job}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid2>
+          ))}
+        </Grid2>
+      </Box>
+
+      {/* NPCs Section */}
+      <Box sx={{ 
+        mb: 4, 
+        backgroundColor: '#2e2e3f', 
+        p: 2, 
+        borderRadius: '8px', 
+        border: '1px solid #444' 
+      }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+          <Typography variant="h5" sx={{ color: '#fff' }}>NPCs</Typography>
+          <Button
+            variant="contained"
+            component={Link}
+            to={`/create-npc?gameId=${gameId}`}
+            startIcon={<AddIcon />}
+            sx={{
+              backgroundColor: '#764ACB',
+              '&:hover': { backgroundColor: '#9865f7' }
+            }}
+          >
+            Create NPC
+          </Button>
+        </Box>
+        <Grid2 container spacing={2}>
+          {npcs.map((npc, index) => (
+            <Grid2 item xs={12} sm={6} md={3} key={index}>
+              <Card sx={{ 
+                backgroundColor: '#1e1e2f', 
+                color: '#fff',
+                border: '1px solid #444',
+                height: '100%'
+              }}>
+                <Box sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  padding: '8px'
+                }}>
+                  <CardMedia
+                    component="img"
+                    height="140"
+                    image={npc.Img || defaultCharacterImage}
+                    alt={npc.CharName}
+                    sx={{ 
+                      objectFit: 'contain',
+                      width: '140px',
+                      borderRadius: '3px'
+                    }}
+                  />
+                </Box>
+                <CardContent>
+                  <Typography variant="h6" component="div">
+                    {npc.CharName}
+                  </Typography>
+                  <Typography variant="body2" sx={{ color: '#bbb' }}>
+                    {npc.Race}
+                  </Typography>
+                  <Typography variant="body2" sx={{ color: '#bbb' }}>
+                    {npc.Job}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid2>
+          ))}
+        </Grid2>
+      </Box>
+
+      {/* Items Section */}
+      <Section
+        title="Items"
+        items={items}
+        createPath="/create-item"
+        createText="Create Item"
+      />
+    </Box>
+  );
+};
+
+export default GameMasterPage;

frontend/src/pages/games.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useContext } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import { UserContext } from '../context/UserContext';
 import { Box, Typography, Grid2, Card, CardContent, CardMedia, Button, IconButton, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField } from '@mui/material';
@@ -21,6 +21,7 @@ import './games.css';
 const GamesPage = () => {
   const { userId } = useContext(UserContext);
   const { gameId } = useParams();
+  const navigate = useNavigate();
   const [character, setCharacter] = useState(null);
   const [inventory, setInventory] = useState([]);
   const [isEditOpen, setIsEditOpen] = useState(false);
@@ -68,6 +69,29 @@ const GamesPage = () => {
     return () => clearInterval(interval);
   }, [character]);
 
+  useEffect(() => {
+    const checkGameMaster = async () => {
+      if (!userId || !gameId) return;
+      
+      try {
+        console.log('Checking if user is game master...');
+        const response = await axios.get(`http://localhost:5000/games/${gameId}/master`);
+        console.log('Game data:', response.data);
+        console.log('User ID:', userId);
+        console.log('Game master ID:', response.data.game_master_id);
+        
+        if (parseInt(userId) === parseInt(response.data.game_master_id)) {
+          console.log('User is game master, redirecting...');
+          navigate(`/games/${gameId}/master`, { replace: true });
+        }
+      } catch (error) {
+        console.error('Error checking game master:', error);
+      }
+    };
+
+    checkGameMaster();
+  }, [userId, gameId, navigate]);
+
   const handleEditOpen = () => {
     setNewDescription(character.description);
     setIsEditOpen(true);