+

Game id changed

backend/server.js

@@ -3,6 +3,7 @@ const sqlite3 = require('sqlite3').verbose();
 const bcrypt = require('bcrypt');
 const cors = require('cors');
 const bodyParser = require('body-parser');
+const crypto = require('crypto');
 
 const app = express();
 const port = 5000;
@@ -31,6 +32,7 @@ db.run(`CREATE TABLE IF NOT EXISTS users (
 // Create games table if it doesn't exist
 db.run(`CREATE TABLE IF NOT EXISTS games (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
+    game_id TEXT,
     name TEXT,
     description TEXT,
     game_master_id INTEGER,
@@ -99,6 +101,23 @@ app.post('/games', (req, res) => {
     stmt.finalize();
 });
 
+app.post('/createGame', (req, res) => {
+    const { name, description, gameMasterId, participants } = req.body;
+
+    // Generate an 8-character alphanumeric ID
+    const gameId = crypto.randomBytes(4).toString('hex'); // 8 characters (4 bytes * 2 hex chars per byte)
+
+    const stmt = db.prepare('INSERT INTO games (game_id, name, description, game_master_id, participants) VALUES (?, ?, ?, ?, ?)');
+    stmt.run([gameId, name, description, gameMasterId, JSON.stringify(participants)], function (err) {
+        if (err) {
+            return res.status(400).json({ error: 'Failed to create game.' });
+        }
+        res.status(201).json({ message: 'Game created successfully!', gameId: gameId });
+    });
+    stmt.finalize();
+});
+
+
 // Start the server
 app.listen(port, () => {
     console.log(`Server running on http://localhost:${port}`);

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import Header from './components/header'; // Make sure the import path is correc
 import Home from './pages/home';
 import Login from './pages/login';
 import Register from './pages/register';
+import JoinGame from './pages/joinGame';
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -39,6 +40,10 @@ function App() {
               showPopup('User registered successfully!');
             }} />}
           />
+          <Route
+            path="joinGame"
+            element={<JoinGame isLoggedIn={isLoggedIn} />}
+          />
         </Routes>
       </div>
     </Router>

frontend/src/pages/home.jsx

@@ -18,8 +18,8 @@ function Home({ isLoggedIn, setIsLoggedIn }) {
                 </div>
             ) : (
                 <div className="button-group">
-                    <button className="btn" onClick={() => navigate('/start-game')}>Start Game</button>
+                    <button className="btn" onClick={() => navigate('/startGame')}>Start Game</button>
-                    <button className="btn" onClick={() => navigate('/join-game')}>Join Game</button>
+                    <button className="btn" onClick={() => navigate('/joinGame')}>Join Game</button>
                     <button className="btn" onClick={handleLogout}>Logout</button>
                 </div>
             )}

frontend/src/pages/joinGame.jsx

@@ -0,0 +1,53 @@
+
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const JoinGamePage = () => {
+  const [gameCode, setGameCode] = useState('');
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+
+  // Mock function to check if game exists (replace with your real logic)
+  const checkGameExists = (code) => {
+    const availableGames = ['game123', 'game456', 'game789']; // Example game codes
+    return availableGames.includes(code);
+  };
+
+  // Handle form submission
+  const handleJoinGame = (e) => {
+    e.preventDefault();
+
+    if (gameCode.trim() === '') {
+      setError('Please enter a game code');
+      return;
+    }
+
+    if (checkGameExists(gameCode)) {
+      // Simulate adding user to the game (replace with your actual logic)
+      setError('');
+      setTimeout(() => {
+        navigate('/games'); // Redirect to the games page
+      }, 1000);
+    } else {
+      setError('Game not found!');
+    }
+  };
+
+  return (
+    <div className="join-game-container">
+      <h1>Join a Game</h1>
+      <form onSubmit={handleJoinGame}>
+        <input
+          type="text"
+          placeholder="Enter Game Code"
+          value={gameCode}
+          onChange={(e) => setGameCode(e.target.value)}
+        />
+        <button type="submit">Join Game</button>
+      </form>
+      {error && <p className="error">{error}</p>}
+    </div>
+  );
+};
+
+export default JoinGamePage;