+

Added functionallity to start a new Game

frontend/src/App.jsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; // Use Routes here
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 
 import './App.css';
-import Header from './components/header'; // Make sure the import path is correct
+import Header from './components/header';
 import Home from './pages/home';
 import Login from './pages/login';
 import Register from './pages/register';
 import JoinGame from './pages/joinGame';
+import StartGame from './pages/startGame';
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -44,6 +45,10 @@ function App() {
             path="joinGame"
             element={<JoinGame isLoggedIn={isLoggedIn} />}
           />
+          <Route
+            path="/startGame"
+            element={<StartGame isLoggedIn={isLoggedIn} />}
+          />
         </Routes>
       </div>
     </Router>

frontend/src/pages/startGame.css

@@ -0,0 +1,56 @@
+.create-game-page {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  background: #2e2e3f;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.create-game-page h1 {
+  text-align: center;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+input,
+textarea {
+  width: calc(100% - 22px);
+  padding: 10px;
+  border-radius: 4px;
+  resize: none;
+}
+
+button {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.error-message {
+  color: red;
+  font-weight: bold;
+}
+
+.success-message {
+  color: green;
+  font-weight: bold;
+}

frontend/src/pages/startGame.jsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './startGame.css';
+
+const startGame = () => {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+
+    if (!name || !description) {
+      setError('Game name and description are required.');
+      return;
+    }
+
+    try {
+      const response = await fetch('http://localhost:5000/createGame', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name,
+          description,
+          gameMasterId: 1, // Placeholder for game master ID; replace with dynamic value if needed
+          participants: [], // Default empty participants array
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        setError(errorData.error || 'Failed to create game.');
+        return;
+      }
+
+      const data = await response.json();
+      setSuccess('Game created successfully!');
+      navigate(`/games/${data.gameId}`); // Redirect to the game details page
+    } catch (err) {
+      setError('Something went wrong. Please try again.');
+    }
+  };
+
+  return (
+    <div className="create-game-page">
+      <h1>Create a New Game</h1>
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="gameName">Game Name</label>
+          <input
+            type="text"
+            id="gameName"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Enter game name"
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="gameDescription">Game Description</label>
+          <textarea
+            id="gameDescription"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Enter game description"
+            required
+          />
+        </div>
+        {error && <p className="error-message">{error}</p>}
+        {success && <p className="success-message">{success}</p>}
+        <button type="submit">Create Game</button>
+      </form>
+    </div>
+  );
+};
+
+export default startGame;