k

frontend/src/pages/gameMasterPage.jsx

@@ -212,6 +212,14 @@ const GameMasterPage = () => {
     }
   };
 
+  // Add new handler for form changes
+  const handleFormChange = (key, value) => {
+    setFormData(prev => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
   // Update the EditModal component
   const EditModal = () => {
     const nonEditableFields = [
@@ -227,10 +235,7 @@ const GameMasterPage = () => {
             <Select
               value={formData[key] || 0}
               label="Status"
-              onChange={(e) => setFormData({
-                ...formData,
-                [key]: e.target.value
-              })}
+              onChange={(e) => handleFormChange(key, e.target.value)}
             >
               <MenuItem value={0}>Allied</MenuItem>
               <MenuItem value={1}>Neutral</MenuItem>
@@ -247,10 +252,7 @@ const GameMasterPage = () => {
             <Select
               value={formData[key] || ''}
               label="Sex"
-              onChange={(e) => setFormData({
-                ...formData,
-                [key]: e.target.value
-              })}
+              onChange={(e) => handleFormChange(key, e.target.value)}
             >
               <MenuItem value="Male">Male</MenuItem>
               <MenuItem value="Female">Female</MenuItem>
@@ -267,10 +269,7 @@ const GameMasterPage = () => {
             <Select
               value={formData[key] || 1}
               label="Rarity"
-              onChange={(e) => setFormData({
-                ...formData,
-                [key]: e.target.value
-              })}
+              onChange={(e) => handleFormChange(key, e.target.value)}
             >
               <MenuItem value={1}>Poor</MenuItem>
               <MenuItem value={2}>Common</MenuItem>
@@ -291,10 +290,7 @@ const GameMasterPage = () => {
             <Select
               value={formData[key] || ''}
               label="Type"
-              onChange={(e) => setFormData({
-                ...formData,
-                [key]: e.target.value
-              })}
+              onChange={(e) => handleFormChange(key, e.target.value)}
             >
               <MenuItem value="Weapon">Weapon</MenuItem>
               <MenuItem value="Armor">Armor</MenuItem>
@@ -313,10 +309,7 @@ const GameMasterPage = () => {
             <Select
               value={formData[key] || ''}
               label="Art"
-              onChange={(e) => setFormData({
-                ...formData,
-                [key]: e.target.value
-              })}
+              onChange={(e) => handleFormChange(key, e.target.value)}
             >
               <MenuItem value="Sword">Sword</MenuItem>
               <MenuItem value="Axe">Axe</MenuItem>
@@ -337,10 +330,7 @@ const GameMasterPage = () => {
             <Select
               value={formData[key] || ''}
               label="Owner"
-              onChange={(e) => setFormData({
-                ...formData,
-                [key]: e.target.value
-              })}
+              onChange={(e) => handleFormChange(key, e.target.value)}
               sx={{
                 color: '#fff',
                 '& .MuiOutlinedInput-notchedOutline': { borderColor: '#444' },
@@ -382,10 +372,7 @@ const GameMasterPage = () => {
           fullWidth
           label={key}
           value={formData[key] || ''}
-          onChange={(e) => setFormData({
-            ...formData,
-            [key]: e.target.value
-          })}
+          onChange={(e) => handleFormChange(key, e.target.value)}
           sx={{ ...commonStyles.input, mb: 2 }}
         />
       );

frontend/src/pages/startGame.jsx

@@ -1,8 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { UserContext } from '../context/UserContext';
 import './startGame.css';
 
-const startGame = () => {
+const StartGame = () => {
+  const { userId } = useContext(UserContext);
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [error, setError] = useState('');
@@ -14,6 +16,14 @@ const startGame = () => {
     setError('');
     setSuccess('');
 
+    // Parse userId to ensure it's a number
+    const parsedUserId = parseInt(userId);
+
+    if (!parsedUserId) {
+      setError('You must be logged in to create a game.');
+      return;
+    }
+
     if (!name || !description) {
       setError('Game name and description are required.');
       return;
@@ -28,7 +38,7 @@ const startGame = () => {
         body: JSON.stringify({
           name,
           description,
-          gameMasterId: 1, 
+          gameMasterId: parsedUserId, // Use parsed ID
           participants: [], 
         }),
       });
@@ -41,7 +51,7 @@ const startGame = () => {
 
       const data = await response.json();
       setSuccess('Game created successfully!');
-      navigate(`/games/${data.gameId}`); // Redirect to the game details page
+      navigate(`/games/${data.gameId}/master`); // Navigate to game master page directly
     } catch (err) {
       setError('Something went wrong. Please try again.');
     }
@@ -80,4 +90,4 @@ const startGame = () => {
   );
 };
 
-export default startGame;
+export default StartGame;