From e26c01432ab9dd5a9ec2df5584dd3a4f5592e03a Mon Sep 17 00:00:00 2001
From: Cheelax <thomas.belloc@gmail.com>
Date: Fri, 22 Sep 2023 09:46:50 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20credits=20button=20an?=
 =?UTF-8?q?d=20modal=20functionality=20in=20App.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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]>
---
 client/src/App.tsx              | 25 ++++---------------------
 client/src/index.css            | 32 +++++++++++++++++++++++++++++---
 client/src/ui/CreditsButton.tsx |  6 +-----
 client/src/ui/NewGame.tsx       | 15 ++++++++++++++-
 client/src/ui/NewGameButton.tsx |  3 +--
 5 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 0be5fae..3596990 100644
--- 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
index 4e576b3..4e01931 100644
--- 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
index 3f777e7..e36b110 100644
--- 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
index 8af06fb..343ef29 100644
--- 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
index e0472ea..3906bee 100644
--- 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}
     >