diff --git a/frontend/index.html b/frontend/index.html index e4b78ea..04208f3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,13 +1,20 @@ - - - - - Vite + React + TS - - -
- - + + + + + + Vite + React + TS + + +
+ + diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx index 54c75a6..9085549 100644 --- a/frontend/src/Navbar.tsx +++ b/frontend/src/Navbar.tsx @@ -4,10 +4,12 @@ import './index.css'; import { useLocation, useNavigate } from 'react-router-dom'; import RulesModal from './library/rulesModal'; import { useAuth } from './contexts/AuthContext'; +import AboutUsModal from './library/aboutUsModal'; const Navbar: React.FC = () => { const [sidebarOpen, setSidebarOpen] = useState(false); const [showRulesModal, setShowRulesModal] = useState(false); + const [showAboutUsModal, setShowAboutUsModal] = useState(false); const auth = useAuth(); const navigate = useNavigate(); const location = useLocation(); @@ -109,7 +111,8 @@ const Navbar: React.FC = () => { buttonSize="w-[170px] h-12" px="px-0" onClick={() => { - navigate('/about'); + setShowAboutUsModal(true); + setSidebarOpen(false); }} /> @@ -136,6 +139,9 @@ const Navbar: React.FC = () => { {showRulesModal && ( setShowRulesModal(false)} /> )} + {showAboutUsModal && ( + setShowAboutUsModal(false)} /> + )} ); }; diff --git a/frontend/src/library/aboutUsModal.tsx b/frontend/src/library/aboutUsModal.tsx new file mode 100644 index 0000000..507519a --- /dev/null +++ b/frontend/src/library/aboutUsModal.tsx @@ -0,0 +1,71 @@ +import { useRef } from 'react'; + +interface ModalProps { + onClose: () => void; +} + +const AboutUsModal: React.FC = ({ onClose }) => { + const modalRef = useRef(null); + + const closeModal = (e: React.MouseEvent) => { + if (modalRef.current === e.target) { + onClose(); + } + }; + + return ( +
+
+
+

+ About Us +

+
+
+ Welcome to our Multiplayer UNO Game website where our + aim is to bring the joy of UNO to the digital realm, + allowing friends and families to connect and play this + beloved card game from anywhere in the world. It is a + passion project developed under the CSOC’24 (COPS Summer + of Code) initiative by COPS.
+ CSOC is one of our flagship programs, designed to + provide students with hands-on coding experience during + the summer break. Participants engage in a variety of + projects, ranging from web development to machine + learning, all while being mentored by experienced + members of the COPS community. This Multiplayer UNO Game + is one of the exciting outcomes of CSOC, showcasing the + talent and dedication of our participants. COPS is an + enthusiastic community of developers and programmers + dedicated to fostering a culture of coding and + innovation. It provides a collaborative environment + where students can enhance their programming skills, + work on real-world projects, and contribute to + open-source initiatives.
We invite you to join us + in this exciting journey. Whether you are here to play + UNO, provide feedback, or become a part of our vibrant + community, we welcome you with open arms. Let's connect, + code, and create together! For more information about + COPS and our initiatives, visit our{' '} + + {' '} + official website   + + + . Thank you for visiting, and we hope you enjoy your + time playing UNO! +
+
+
+
+ ); +}; + +export default AboutUsModal; diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 74c74a0..bf0fe11 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -4,12 +4,10 @@ import Button from '../library/button'; import Navbar from '../Navbar'; import Modal from '../library/modal'; import '../index.css'; -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'); @@ -53,9 +51,6 @@ const Home: React.FC = () => { /> {showModal && setShowModal(false)} />} - {showRulesModal && ( - setShowRulesModal(false)} /> - )} ); };