✨ feat: Add credits button and modal functionality in App.tsx

- Added `CreditsButton` component in `client/src/ui/CreditsButton.tsx`. - Imported `CreditsButton` component in `client/src/App.tsx`. - Updated JSX in `App` component to include the `CreditsButton` component. - Created a `modal-medium` CSS class in `client/src/index.css` for the styling of the modal. - Added `Modal` component from 'react-modal' library in `App` component to show a modal when the credits button is clicked. - Added a close button in the modal header to close the modal. Co-authored-by: [Your Name] <[Your Email]>
z-korp · Sep 22, 2023 · e26c014 · e26c014
1 parent 9327edf
commit e26c014
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 32 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -22,6 +22,7 @@ function App() {
   Modal.setAppElement('#root');
   const [isModalOpen, setModalOpen] = useState(false);
   const [isRuleModalOpen, setRuleModalOpen] = useState(false);
+
   const [isLeaderBoardModalOpen, setLeaderBoardModalOpen] = useState(false);
   const [isMusicPlaying, setMusicPlaying] = useState(false);
 
@@ -53,23 +54,6 @@ function App() {
     setRuleModalOpen(!isRuleModalOpen);
   };
 
-  const modalStyle = {
-    content: {
-      top: '50%',
-      left: '50%',
-      width: '80%',
-      height: '57%',
-      right: 'auto',
-      bottom: 'auto',
-      marginRight: '-50%',
-      transform: 'translate(-50%, -50%)',
-      fontSize: '16px',
-      border: '4px solid #000',
-      boxShadow: '5px 5px #000',
-      textColor: 'red',
-    },
-  };
-
   const credits = async () => {
     toggleModal();
   };
@@ -101,7 +85,6 @@ function App() {
         >
           Rules
         </button>
-        <CreditsButton onClick={credits}></CreditsButton>
         <button
           onClick={toggleMusic}
           className="p-2 mr-2 text-2xl w-6 "
@@ -115,7 +98,7 @@ function App() {
         <Canvas setMusicPlaying={setMusicPlaying} />
       </div>
 
-      <Modal isOpen={isModalOpen} onRequestClose={toggleModal} style={modalStyle} ariaHideApp={false}>
+      <Modal isOpen={isModalOpen} onRequestClose={toggleModal} className="modal-base modal-medium" ariaHideApp={false}>
         <div className="relative">
           <button onClick={toggleModal} className="absolute top-[-10px] right-0 p-2">
             <div className="relative w-6 h-6">
@@ -127,7 +110,7 @@ function App() {
         </div>
       </Modal>
 
-      <Modal isOpen={isRuleModalOpen} onRequestClose={toggleRuleModal} style={modalStyle}>
+      <Modal isOpen={isRuleModalOpen} onRequestClose={toggleRuleModal} className="modal-base modal-large">
         <div className="relative">
           <button onClick={toggleRuleModal} className="absolute top-[-10px] right-0 p-2">
             <div className="relative w-6 h-6">
@@ -142,7 +125,7 @@ function App() {
       <Modal
         isOpen={isLeaderBoardModalOpen}
         onRequestClose={toggleLeaderBoardModal}
-        style={modalStyle}
+        className="modal-base modal-large"
         ariaHideApp={false}
       >
         <div className="relative">

diff --git a/client/src/index.css b/client/src/index.css
@@ -1,6 +1,6 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
@@ -28,3 +28,29 @@ body {
 canvas {
   display: block;
 }
+
+@layer components {
+  .modal-base {
+    @apply relative p-4 border-4 border-black rounded shadow-lg bg-white w-[80%] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-base;
+  }
+
+  .modal-header-close-btn {
+    @apply absolute top-[-10px] right-0 p-2;
+  }
+
+  .close-line {
+    @apply absolute inset-0 w-1 h-full bg-black origin-center;
+  }
+
+  .modal-small {
+    @apply h-48;
+  }
+
+  .modal-medium {
+    @apply h-[57%];
+  }
+
+  .modal-large {
+    @apply h-[85%];
+  }
+}
diff --git a/client/src/ui/CreditsButton.tsx b/client/src/ui/CreditsButton.tsx
@@ -6,11 +6,7 @@ interface NewGameButtonProps {
 
 const CreditsButton: React.FC<NewGameButtonProps> = ({ onClick }) => {
   return (
-    <button
-      className="bg-blue-500 hover:bg-blue-700 mx-10 my-10 text-white font-bold py-2 px-4 rounded"
-      style={{ width: '210px' }}
-      onClick={onClick}
-    >
+    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full" onClick={onClick}>
       Credits
     </button>
   );

diff --git a/client/src/ui/NewGame.tsx b/client/src/ui/NewGame.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import NewGameButton from './NewGameButton';
 import Modal from 'react-modal';
-import RulesModal from './RulesModal';
+import Credits from './Credits';
+import CreditsButton from './CreditsButton';
 
 interface NewGameProps {
   onClick: () => void;
@@ -40,6 +41,18 @@ const NewGame: React.FC<NewGameProps> = ({ onClick, onPseudoChange }) => {
         maxLength={18} // Limit the input to 30 characters
       />
       <NewGameButton onClick={onClick} disabled={!username.trim()}></NewGameButton>
+      <CreditsButton onClick={toggleModal}></CreditsButton>
+      <Modal isOpen={isModalOpen} onRequestClose={toggleModal} className="modal-base modal-medium" ariaHideApp={false}>
+        <div className="relative">
+          <button onClick={toggleModal} className="absolute top-[-10px] right-0 p-2">
+            <div className="relative w-6 h-6">
+              <div className="absolute inset-0 w-1 h-full bg-black transform rotate-45 origin-center"></div>
+              <div className="absolute inset-0 w-1 h-full bg-black transform -rotate-45 origin-center"></div>
+            </div>
+          </button>
+          <Credits />
+        </div>
+      </Modal>
     </div>
   );
 };

diff --git a/client/src/ui/NewGameButton.tsx b/client/src/ui/NewGameButton.tsx
@@ -10,8 +10,7 @@ const NewGameButton: React.FC<NewGameButtonProps> = ({ onClick, disabled }) => {
     <button
       className={`bg-blue-500 ${
         disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-700'
-      } my-10 text-white font-bold py-2 px-4 rounded`}
-      style={{ width: '100%' }}
+      } my-10 text-white font-bold py-2 px-4 rounded w-full`}
       onClick={onClick}
       disabled={disabled}
     >