Frontend: JoinExistingGame Modal implementation

JoinExistingGame modal component created to capture room code for game entry.

onClose function utilized for modal closure by tapping anywhere on the screen.

Navigation to the /game route triggered by pressing the Enter button after input entry; otherwise,a toast prompts for input completion.

Fixes #84

frontend/src/library/modal.tsx

@@ -0,0 +1,78 @@
+import { useRef, useState, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Button from './button';
+import { ToastContext } from './toast/toast-context';
+
+interface ModalProps {
+    onClose: () => void;
+}
+
+const Modal: React.FC<ModalProps> = ({ onClose }) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const navigate = useNavigate();
+    const [gameCode, setGameCode] = useState('');
+    const { open } = useContext(ToastContext);
+
+    const closeModal = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (modalRef.current === e.target) {
+            onClose();
+        }
+    };
+
+    const handleButtonClick = () => {
+        if (gameCode.trim()) {
+            navigate('/game');
+        } else {
+            open({
+                message: 'Please Enter The Game Code',
+                duration: 3000,
+                position: 'top-center',
+                color: 'warning',
+            });
+        }
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setGameCode(e.target.value);
+    };
+
+    return (
+        <div
+            ref={modalRef}
+            onClick={closeModal}
+            className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm flex items-center justify-center"
+        >
+            <div className="bg-[rgb(222,209,209)] p-5 rounded-xl border-4 border-black shadow-md flex flex-col gap-4 w-100 items-center">
+                <h1 className="font-normal font-[Kavoon] text-[30px] leading-[30px] text-black text-center">
+                    Join an
+                    <br />
+                    Existing Game
+                </h1>
+                <div className="flex justify-center">
+                    <input
+                        className="font-normal font-[Kavoon] text-[20px] py-2 px-6 border-4 border-black rounded-3xl w-64 h-10"
+                        placeholder="Enter the game code"
+                        style={{
+                            backgroundColor: 'rgb(222, 209, 209)',
+                            color: 'black',
+                        }}
+                        value={gameCode}
+                        onChange={handleInputChange}
+                    />
+                </div>
+                <Button
+                    text="Enter"
+                    onClick={handleButtonClick}
+                    backgroundColor="bg-yellow-300"
+                    textColor="text-white"
+                    borderColor="border-black border-4"
+                    hoverColor="hover:bg-yellow-400"
+                    rounded="rounded-full"
+                    buttonSize="w-32 h-10"
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Modal;

frontend/src/pages/Home.tsx

@@ -1,11 +1,14 @@
 import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
 import Button from '../library/button';
 import Navbar from '../Navbar';
+import Modal from '../library/modal';
 import '../index.css';
 import { useAuth } from '../contexts/AuthContext';
 
 const Home: React.FC = () => {
     const navigate = useNavigate();
+    const [showModal, setShowModal] = useState(false);
     const CreateGame = () => {
         // Logic to create a game
         console.log('Create Game');
@@ -14,8 +17,8 @@ const Home: React.FC = () => {
 
     const JoinGame = () => {
         // Logic to join a game
+        setShowModal(true);
         console.log('Join Game with code');
-        navigate('/error');
     };
     const auth = useAuth();
 
@@ -62,6 +65,7 @@ const Home: React.FC = () => {
                     onClick={JoinGame}
                 />
             </div>
+            {showModal && <Modal onClose={() => setShowModal(false)} />}
         </div>
     );
 };