++

Added already existing code for further development

frontend/src/pages/home.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function Home({ isLoggedIn, setIsLoggedIn }) {
+    const navigate = useNavigate();
+
+    const handleLogout = () => {
+        setIsLoggedIn(false);
+    };
+
+    return (
+        <div className="container">
+            <h2>Welcome to the Game</h2>
+            {!isLoggedIn ? (
+                <div className="button-group">
+                    <button className="btn" onClick={() => navigate('/login')}>Login</button>
+                    <button className="btn" onClick={() => navigate('/register')}>Register</button>
+                </div>
+            ) : (
+                <div className="button-group">
+                    <button className="btn" onClick={() => navigate('/start-game')}>Start Game</button>
+                    <button className="btn" onClick={() => navigate('/join-game')}>Join Game</button>
+                    <button className="btn" onClick={() => navigate('/continue-game')}>Continue Game</button>
+                    <button className="btn" onClick={handleLogout}>Logout</button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default Home;

frontend/src/pages/login.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+function Login({ setIsLoggedIn }) {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [message, setMessage] = useState('');
+    const navigate = useNavigate();
+
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        try {
+            const res = await axios.post('http://localhost:5000/login', { username, password });
+            setMessage(res.data.message);
+            setIsLoggedIn(true);
+            navigate('/');
+        } catch (err) {
+            setMessage(err.response.data.error);
+        }
+    };
+
+    return (
+        <div className="form-container">
+            <h2>Login</h2>
+            <form onSubmit={handleLogin}>
+                <input
+                    type="text"
+                    placeholder="Username"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    required
+                />
+                <input
+                    type="password"
+                    placeholder="Password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                />
+                <button className="btn" type="submit">Login</button>
+            </form>
+            <p>{message}</p>
+        </div>
+    );
+}
+
+export default Login;

frontend/src/pages/register.jsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+function Register({ setIsLoggedIn }) {
+    const [username, setUsername] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [message, setMessage] = useState('');
+    const navigate = useNavigate();
+
+    const handleRegister = async (e) => {
+        e.preventDefault();
+        try {
+            const res = await axios.post('http://localhost:5000/register', { username, email, password });
+            setMessage(res.data.message);
+            setIsLoggedIn(true);
+            navigate('/');
+        } catch (err) {
+            setMessage(err.response.data.error);
+        }
+    };
+
+    return (
+        <div className="form-container">
+            <h2>Register</h2>
+            <form onSubmit={handleRegister}>
+                <input
+                    type="text"
+                    placeholder="Username"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    required
+                />
+                <input
+                    type="email"
+                    placeholder="Email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                />
+                <input
+                    type="password"
+                    placeholder="Password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                />
+                <button className="btn" type="submit">Register</button>
+            </form>
+            <p>{message}</p>
+        </div>
+    );
+}
+
+export default Register;