Merge pull request #21 from ismail-kharrobi/DEV-FRONT

Dev front
Wadie-ess · Aug 27, 2023 · 40b9dbc · 40b9dbc
2 parents d0cb791 + 2c7f1b5
commit 40b9dbc
Show file tree

Hide file tree

Showing 31 changed files with 1,707 additions and 57 deletions.
diff --git a/frontend/code/src/components/404/assest/font.svg b/frontend/code/src/components/404/assest/font.svg
diff --git a/frontend/code/src/components/Home/assets/Button.tsx b/frontend/code/src/components/Home/assets/Button.tsx
@@ -1,20 +1,20 @@
+import './css/style.css'
 export const Button = () => {
     return (
+        <div className="mystyle transition duration-500 hover:-translate-y-1 hover:scale-110 ease-in-out hover:cursor-pointer hover:fill-primary flex absolute justify-center items-center left-[40%] sm:left-[41.4%] top-[60%] sm:top-3/4   w-[22vw] sm:w-[17.5vw]">
+            <span className=" absolute text-white font-montserrat text-[1.4vw]">PLAY NOW</span>
+            <svg width="211" height="57" viewBox="0 0 211 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect className="" x="0.84375" width="209.158" height="57" rx="6" fill="url(#paint0_linear_377_5387)"/>
 
-    <div className="flex absolute justify-center items-center left-[40%] sm:left-[41.4%] top-[60%] sm:top-3/4   w-[22vw] sm:w-[17.5vw]">
-        <span className="absolute text-white font-montserrat text-[1.4vw]">PLAY NOW</span>
-        <svg width="211" height="57" viewBox="0 0 211 57" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect x="0.84375" width="209.158" height="57" rx="6" fill="url(#paint0_linear_377_5387)"/>
-
-            <defs>
-            <linearGradient id="paint0_linear_377_5387" x1="105.423" y1="0" x2="105.423" y2="57" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#7940CF"/>
-            <stop offset="1" stopColor="#5921CB"/>
-            </linearGradient>
-            </defs>
+                <defs>
+                <linearGradient id="paint0_linear_377_5387" x1="105.423" y1="0" x2="105.423" y2="57" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#7940CF"/>
+                <stop offset="1" stopColor="#5921CB"/>
+                </linearGradient>
+                </defs>
+
+            </svg>
 
-        </svg>
-
-    </div>
+        </div>
     )
 }
diff --git a/frontend/code/src/components/Home/assets/Table.tsx b/frontend/code/src/components/Home/assets/Table.tsx
@@ -10,15 +10,16 @@ export const Table = () =>
     const [users, setUsers] = useState<any | undefined>([])
     useEffect( ()  => {
       const fetchdata = async() =>{
-
+            for (let i = 0 ; i < 10 ; ++i)
+            {
               let response = await fetch(`https://randomuser.me/api/`)
               let data  = await response.json()
               if (data.results && data.results.length > 0) {
                   const newUser = data.results[0];
                   setUsers((oldUsers : any) => [...oldUsers, newUser]);
                   console.log(newUser)
               }
-
+            }
       }
       fetchdata().catch(console.error)  
     },[])
@@ -32,16 +33,16 @@ export const Table = () =>
                 <th>Score</th>
               </tr>
             </thead>
-            <tbody className='flex flex-col justify-start items-center gap-2 sm:gap-4'>
+            <tbody className='flex flex-col justify-between items-center gap-2 sm:gap-4'>
               {users.map((x: any, index: number) => (
                 <tr
                   key={index}
-                  className='bg-accent border-base-200 rounded-3xl w-[80vw] flex justify-start sm:justify-between px-4 sm:px-10 items-center'
+                  className='bg-accent border-base-200 rounded-xl w-11/12 flex justify-between sm:justify-between px-4 h-16 xl:h-20 sm:px-10 items-center'
                 >
                   <td>
                     <div className="flex items-center space-x-3">
                       <div className='flex justify-center items-center gap-x-3'>
-                        <Trophy /> {index}
+                        <Trophy /> {index + 1}
                       </div>
                     </div>
                   </td>
@@ -51,9 +52,9 @@ export const Table = () =>
                       <img src={x.picture.thumbnail} alt="Avatar Tailwind CSS Component" />                      </div>
                     </div>
 
-                    <div className="flex font-montserrat w-12">{x.name.first}</div>
+                    <div className="flex font-montserrat w-12 text-neutral font-semibold">{x.name.first}</div>
                   </td>
-                  <td className='flex justify-between items-center'><Daimond/> 14</td>
+                  <td className='flex justify-start items-center gap-x-1 w-18'><Daimond/> <div>{index + 123}</div></td>
                 </tr>
               ))}
             </tbody>

diff --git a/frontend/code/src/components/Home/assets/css/style.css b/frontend/code/src/components/Home/assets/css/style.css
@@ -0,0 +1,5 @@
+.mystyle:hover > svg * ,
+.mystyle:hover {
+    transition-duration: 300ms;
+    fill: hsl(var(--p) / 1);
+}  
diff --git a/frontend/code/src/components/Home/index.tsx b/frontend/code/src/components/Home/index.tsx
@@ -7,11 +7,11 @@ export const Home : FC = () : JSX.Element =>{
     return (
         <Layout>
             <div className="flex flex-col items-center h-screen w-full sm:gap-y-8 gap-y-1">
-                <div className='flex justify-center relative items-start pt-6 h-2/6 max-h-36 sm:max-h-96 w-[100vw] sm:h-3/4 sm:w-[90vw]'>
-                    <img className='object-fit h-full w-full sm:px-12 px-4' src={Hero} alt="bg hero" />
+                <div className='flex justify-center relative items-start pt-6 h-2/6 max-h-36 sm:max-h-96 w-[90vw] sm:h-3/4 sm:w-[85vw]'>
+                    <img className='object-fit h-full w-full ' src={Hero} alt="bg hero" />
                     <Button/>
                 </div>
-                <div className='flex justify-center relative items-start pt-6 h-3/6 sm:px-12 px-4 w-[100vw] sm:h-3/4 sm:w-[90vw]'>
+                <div className='flex justify-center relative items-start pt-6 h-3/6 w-[90vw] sm:h-3/4 sm:w-[85vw]'>
                     <LeaderBoard/>
 
                 </div>

diff --git a/frontend/code/src/components/Layout/Assets/Alert.tsx b/frontend/code/src/components/Layout/Assets/Alert.tsx
@@ -1,9 +1,12 @@
+import React from "react"
 
 export const Alert = () => { 
     return (
-        <svg className="flex justify-center items-center w-10 sm:w-12 " width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <div className="hover:cursor-pointer">
+        <svg className="flex justify-center items-center w-10 sm:w-12 hover:cursor-pointer" width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect width="62" height="62" rx="20" fill="black"/>
         <path d="M27.9189 40.1081C28.5314 39.9785 32.2636 39.9785 32.8761 40.1081C33.3997 40.229 33.966 40.5116 33.966 41.1286C33.9355 41.716 33.5909 42.2367 33.1148 42.5674C32.4974 43.0487 31.7729 43.3535 31.0155 43.4633C30.5966 43.5176 30.185 43.5188 29.7807 43.4633C29.0221 43.3535 28.2976 43.0487 27.6814 42.5662C27.2041 42.2367 26.8594 41.716 26.829 41.1286C26.829 40.5116 27.3952 40.229 27.9189 40.1081ZM30.4698 19C33.0185 19 35.6219 20.2093 37.1684 22.2158C38.1718 23.5078 38.6321 24.7986 38.6321 26.8051V27.327C38.6321 28.8658 39.0388 29.7728 39.9338 30.818C40.6121 31.588 40.8288 32.5765 40.8288 33.6488C40.8288 34.7199 40.4769 35.7367 39.7719 36.5623C38.8488 37.552 37.5471 38.1838 36.2186 38.2936C34.2934 38.4577 32.367 38.5959 30.415 38.5959C28.4618 38.5959 26.5366 38.5132 24.6114 38.2936C23.2817 38.1838 21.98 37.552 21.0582 36.5623C20.3531 35.7367 20 34.7199 20 33.6488C20 32.5765 20.218 31.588 20.895 30.818C21.818 29.7728 22.198 28.8658 22.198 27.327V26.8051C22.198 24.7443 22.7118 23.3967 23.77 22.0776C25.3433 20.1538 27.8652 19 30.3602 19H30.4698Z" fill="#8F8F8F"/>
         </svg>
+        </div>
     )
 }
diff --git a/frontend/code/src/components/Layout/Assets/Avatar.tsx b/frontend/code/src/components/Layout/Assets/Avatar.tsx
@@ -1,13 +1,15 @@
 import avatart from '../images/avatar.jpg'
+import {  Link } from "react-router-dom";
+
 export const Avatar = () =>{
     return (
-        <div className="avatar online dropdown">
+        <div className="avatar online dropdown hover:cursor-pointer">
         <div tabIndex={0} className="w-10 sm:w-12 rounded-xl">
             <img alt="profile " src={avatart} />
         </div>
         <ul tabIndex={0} className="dropdown-content z-50 right-0 top-10 menu p-2  shadow bg-base-100 rounded-box w-52">
-            <li className="hover:bg-primary hover:rounded-xl transform duration-500"><a href="/main">Settings</a></li>
-            <li className="hover:bg-primary hover:rounded-xl transform duration-500"><a href="/main">Profile</a></li>
+            <li className="hover:bg-primary hover:rounded-xl transform duration-500"><div>Settings</div></li>
+            <Link to={"/Profile"}><li className="hover:bg-primary hover:rounded-xl transform duration-500"><div>Profile</div></li></Link>
         </ul>
         </div>
 

diff --git a/frontend/code/src/components/Layout/Assets/Dash.tsx b/frontend/code/src/components/Layout/Assets/Dash.tsx
@@ -1,6 +1,6 @@
 export const Dash =  () => {
     return (
-        <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center">
+        <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
             <svg  width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect  x="4" y="4" width="6" height="7" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
             <rect x="4" y="15" width="6" height="5" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>

diff --git a/frontend/code/src/components/Layout/Assets/Game.tsx b/frontend/code/src/components/Layout/Assets/Game.tsx
@@ -1,6 +1,6 @@
 export const Game = () => {
     return (
-        <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center ">
+        <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
             <svg   width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M7.79142 0C8.29642 0 8.69321 0.401326 8.69321 0.885278C8.69321 1.23939 8.9938 1.52268 9.35452 1.52268H10.5449C12.3605 1.53448 13.8394 2.98634 13.8514 4.7569V4.98117C14.9937 4.98117 16.1359 5.00477 17.2902 5.01658C21.4625 5.01658 24.5045 7.99111 24.5045 12.0988V17.3751C24.5045 21.4828 21.4625 24.4573 17.2902 24.4573C15.6189 24.4927 13.9476 24.5045 12.2643 24.5045C10.5809 24.5045 8.88559 24.4927 7.21428 24.4573C3.04202 24.4573 0 21.4828 0 17.3751V12.0988C0 7.99111 3.04202 5.01658 7.2263 5.01658C8.80142 4.99297 10.4126 4.96936 12.0478 4.96936V4.7687C12.0478 3.95424 11.3625 3.29324 10.5449 3.29324H9.35452C7.99583 3.29324 6.88964 2.20729 6.88964 0.885278C6.88964 0.401326 7.29845 0 7.79142 0ZM8.68118 11.7211C8.17618 11.7211 7.7794 12.1224 7.7794 12.6064V13.8458H6.50488C6.0119 13.8458 5.60309 14.2471 5.60309 14.731C5.60309 15.2268 6.0119 15.6163 6.50488 15.6163H7.7794V16.8675C7.7794 17.3515 8.17618 17.7528 8.68118 17.7528C9.17416 17.7528 9.58297 17.3515 9.58297 16.8675V15.6163H10.8455C11.3384 15.6163 11.7473 15.2268 11.7473 14.731C11.7473 14.2471 11.3384 13.8458 10.8455 13.8458H9.58297V12.6064C9.58297 12.1224 9.17416 11.7211 8.68118 11.7211ZM18.1319 15.9114H18.0117C17.5054 15.9114 17.1099 16.3127 17.1099 16.7967C17.1099 17.2924 17.5054 17.682 18.0117 17.682H18.1319C18.6249 17.682 19.0337 17.2924 19.0337 16.7967C19.0337 16.3127 18.6249 15.9114 18.1319 15.9114ZM16.0758 11.8509H15.9556C15.4506 11.8509 15.0538 12.2523 15.0538 12.7362C15.0538 13.232 15.4506 13.6215 15.9556 13.6215H16.0758C16.5688 13.6215 16.9776 13.232 16.9776 12.7362C16.9776 12.2523 16.5688 11.8509 16.0758 11.8509Z" fill="#BDBDBD"/>
             </svg>