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

.gitignore

@@ -1,4 +1,3 @@
 node_modules
 frontend/node_modules
-.DS_Store
 .env

backend/package.json

@@ -16,11 +16,9 @@
     "dependencies": {
         "@types/node": "^20.12.13",
         "@types/uuid": "^9.0.8",
-        "bcrypt": "^5.1.1",
         "cors": "^2.8.5",
         "dotenv": "^16.4.5",
         "express": "^4.19.2",
-        "jsonwebtoken": "^9.0.2",
         "mongoose": "^8.4.0",
         "ts-node": "^10.9.2",
         "uuid": "^9.0.1"
@@ -29,7 +27,6 @@
         "@types/cors": "^2.8.17",
         "@types/express": "^4.17.21",
         "@types/jest": "^29.5.12",
-        "@types/jsonwebtoken": "^9.0.6",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "eslint": "^8.57.0",
         "eslint-config-standard-with-typescript": "^43.0.1",
@@ -42,4 +39,4 @@
         "ts-jest": "^29.1.4",
         "typescript": "^5.4.5"
     }
-}
+}

backend/src/index.ts

@@ -20,11 +20,6 @@ app.get('/', (req, res) => {
     res.send('Hello from the backend!');
 });
 
-//Routes
-import userRoutes from './routes/userRoutes.js';
-
-app.use('/api/v1/auth', userRoutes);
-
 app.listen(port, () => {
     console.log(`Server running on port ${port}`);
 });

backend/src/utils.ts

@@ -1,13 +1,13 @@
 import { Request, Response } from 'express';
 
-export type ControllerFunction = (req: Request, res: Response) => Promise<void>;
+type ControllerFunction = (req: Request, res: Response) => Promise<void>;
 
 export function catchError(fn: ControllerFunction): ControllerFunction {
     return async function (req: Request, res: Response) {
         try {
             return await fn(req, res);
         } catch (error) {
-            res.status(500).json({ error: (error as Error).message });
+            res.status(500).json({ error: error });
         }
     };
 }

frontend/src/Navbar.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Button from './library/button';
 import './index.css';
+import { useNavigate } from 'react-router-dom';
 
 type NavbarProps = {
     isLoggedIn?: boolean;
@@ -17,6 +18,8 @@ const Navbar: React.FC<NavbarProps> = ({
 }) => {
     const [isOpen, setIsOpen] = useState(false);
 
+    const navigate = useNavigate();
+
     const toggleMenu = () => {
         setIsOpen(!isOpen);
     };
@@ -92,7 +95,7 @@ const Navbar: React.FC<NavbarProps> = ({
                                 buttonSize="w-[170px] h-12"
                                 px="px-0"
                                 onClick={() => {
-                                    window.location.href = '/error';
+                                    navigate('/error');
                                 }}
                             />
                         </div>

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/Error.tsx

@@ -1,7 +1,9 @@
 import ErrorImage from '../assets/tornCard.svg';
 import Button from '../library/button';
+import { useNavigate } from 'react-router-dom';
 
 function Error() {
+    const navigate = useNavigate();
     return (
         <div className="min-h-screen w-full flex items-center justify-center bg-white">
             <div className="grid grid-rows-3 justify-items-center text-center gap-4 max-w-[400px] p-8 text-[#333333] md:grid-cols-2 md:gap-2 md:gap-x-14 md:max-w-screen-xl lg:gap-x-20">
@@ -26,7 +28,7 @@ function Error() {
                         buttonSize="w-80 h-12"
                         className="border-4"
                         rounded="rounded-full"
-                        onClick={() => (window.location.href = '/')}
+                        onClick={() => navigate('/')}
                     />
                 </div>
             </div>