client:Implement the rules modal

This commit creates the rules modal which is triggered when rules button
in pressed in the sidebar.Rules were aquired through chatGPT and a link
to the uno rules is present.Also used overflow.

fixes:shivansh-bhatnagar18#99

frontend/src/Navbar.tsx

@@ -2,21 +2,25 @@ import React, { useState } from 'react';
 import Button from './library/button';
 import './index.css';
 import { useNavigate } from 'react-router-dom';
+import RulesModal from './library/rulesModal';
 
 type NavbarProps = {
     isLoggedIn?: boolean;
     username?: string;
     onLogin?: () => void;
     onLogout?: () => void;
+    onOpenRulesModal?: () => void;
 };
 
 const Navbar: React.FC<NavbarProps> = ({
     isLoggedIn,
     username = 'unknown',
     onLogin,
     onLogout,
+    onOpenRulesModal,
 }) => {
     const [isOpen, setIsOpen] = useState(false);
+    const [showRulesModal, setShowRulesModal] = useState(false);
 
     const navigate = useNavigate();
 
@@ -113,10 +117,8 @@ const Navbar: React.FC<NavbarProps> = ({
                                 buttonSize="w-[170px] h-12"
                                 px="px-0"
                                 onClick={() => {
-                                    window.open(
-                                        'https://www.unorules.com/',
-                                        '_blank'
-                                    );
+                                    toggleMenu();
+                                    onOpenRulesModal?.();
                                 }}
                             />
                         </div>
@@ -127,6 +129,9 @@ const Navbar: React.FC<NavbarProps> = ({
                     ></div>
                 </div>
             )}
+            {showRulesModal && (
+                <RulesModal onClose={() => setShowRulesModal(false)} />
+            )}
         </div>
     );
 };

frontend/src/library/rulesModal.tsx

@@ -0,0 +1,105 @@
+import { useRef } from 'react';
+
+interface ModalProps {
+    onClose: () => void;
+}
+
+const RulesModal: React.FC<ModalProps> = ({ onClose }) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    const closeModal = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (modalRef.current === e.target) {
+            onClose();
+        }
+    };
+
+    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-10 w-1/2 h-1/2 items-center justify-center">
+                <div className="relative flex flex-col h-full overflow-y-auto">
+                    <h1 className="font-normal font-[Kavoon] text-[30px] leading-[30px] text-black text-center">
+                        Rules
+                    </h1>
+                    <div className="text-left font-[Kavoon] px-4">
+                        <h2 className="font-bold text-lg">Objective:</h2>
+                        <ul className="list-disc list-inside">
+                            <li>Be the first to get rid of all your cards</li>
+                        </ul>
+
+                        <h2 className="font-bold text-lg mt-4">Setup:</h2>
+                        <ul className="list-disc list-inside">
+                            <li>
+                                <b>Players:</b> 2-10.
+                            </li>
+                            <li>
+                                <b>Deck:</b> 108 cards.
+                            </li>
+                            <li>
+                                <b>Dealing:</b> 7 cards each, remaining cards
+                                form draw pile. Top card starts discard pile.
+                            </li>
+                        </ul>
+
+                        <h2 className="font-bold text-lg mt-4">Gameplay:</h2>
+                        <ul className="list-disc list-inside">
+                            <li>
+                                <b>Turns:</b> Match a card from your hand to the
+                                top card of the discard pile by color or number,
+                                or play a Wild card.
+                            </li>
+                            <li>
+                                <b>Draw:</b> If you can't play, draw one card.
+                                Play it if possible; if not, turn passes.
+                            </li>
+                            <li>
+                                <b>UNO:</b>If at any point in play you are left
+                                with a single card you have to say uno.
+                            </li>
+                        </ul>
+
+                        <h2 className="font-bold text-lg mt-4">
+                            Action Cards:
+                        </h2>
+                        <ul className="list-disc list-inside">
+                            <li>
+                                <b>Skip:</b> Next player misses a turn.
+                            </li>
+                            <li>
+                                <b>Reverse:</b> Reverses play direction.
+                            </li>
+                            <li>
+                                <b>Draw Two:</b> Next player draws 2 cards and
+                                misses a turn.
+                            </li>
+                            <li>
+                                <b>Wild:</b> Choose the color to continue play.
+                            </li>
+                            <li>
+                                <b>Wild Draw Four:</b> Choose color and next
+                                player draws 4 cards.
+                            </li>
+                        </ul>
+                        <p className="text-lg mt-4">
+                            If you would like to learn more about the Rules of
+                            UNO click{' '}
+                            <a
+                                href="https://www.unorules.com"
+                                target="_blank"
+                                className="underline"
+                            >
+                                here
+                            </a>
+                            .
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default RulesModal;

frontend/src/pages/Home.tsx

@@ -5,10 +5,12 @@ import Navbar from '../Navbar';
 import Modal from '../library/modal';
 import '../index.css';
 import { useAuth } from '../contexts/AuthContext';
+import RulesModal from '../library/rulesModal';
 
 const Home: React.FC = () => {
     const navigate = useNavigate();
     const [showModal, setShowModal] = useState(false);
+    const [showRulesModal, setShowRulesModal] = useState(false);
     const CreateGame = () => {
         // Logic to create a game
         console.log('Create Game');
@@ -29,6 +31,9 @@ const Home: React.FC = () => {
     const handleLogout = () => {
         auth.logout();
     };
+    const openRulesModal = () => {
+        setShowRulesModal(true);
+    };
 
     return (
         <div className="min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative">
@@ -37,6 +42,7 @@ const Home: React.FC = () => {
                 username={auth.getUser()?.name || ''}
                 onLogin={handleLogin}
                 onLogout={handleLogout}
+                onOpenRulesModal={openRulesModal}
             />
             <div className="flex flex-col items-center justify-center flex-grow">
                 <div className="w-[520px] h-[180px] sm:w-[600px] sm:h-[200px] md:w-[720px] md:h-[235px] lg:w-[900px] lg:h-[300px] overflow-hidden mt-4 mb-5">
@@ -66,6 +72,9 @@ const Home: React.FC = () => {
                 />
             </div>
             {showModal && <Modal onClose={() => setShowModal(false)} />}
+            {showRulesModal && (
+                <RulesModal onClose={() => setShowRulesModal(false)} />
+            )}
         </div>
     );
 };