FIX:react-router prevent re render layout

FIX:layout / responsive
ADD:selected path
ADD:detect uppercase by github config

frontend/code/src/Components/Error/index.tsx

@@ -0,0 +1,11 @@
+import { Font } from './Assets/Font'
+export const Error = () =>
+{
+    return (
+        <div className=" flex flex-col bg-black h-screen z-0 w-screen relative ">
+            <Font/>
+            <div className=" absolute flex z-10 items-center top-0 left-0 bg-contain h-screen w-screen max-w-full justify-center overflow-hidden bg-gif-error bg-no-repeat bg-center"></div>
+            <h1 className='relative flex items-center pt-44 sm:pt-56 justify-center text-white text-[3.5vw] z-30 h-full font-lexend '>Page Not Found</h1>
+        </div>
+    )
+}

frontend/code/src/Components/Home/LeaderBoard.tsx

@@ -0,0 +1,13 @@
+import { Chart } from './assets/Chart'
+import { Table } from './assets/Table'
+export const LeaderBoard = () => {
+    return (
+        <div className='flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full  bg-base-200 overflow-scroll no-scrollbar'>
+           <div className="flex justify-start items-start pl-2 pt-2 sm:pl-12 sm:pt-12 gap-x-4 py-4">
+               <Chart/> <span className='font-montserrat'>Leader Board </span>
+
+           </div>
+            <Table />
+        </div>
+    )
+}

frontend/code/src/Components/Home/assets/Button.tsx

@@ -0,0 +1,22 @@
+import './css/style.css'
+import  toast from 'react-hot-toast';
+
+export const Button = () => {
+    return (
+        <div onClick={() => {toast.success("Waiting Opponenet")}} 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-[36%] sm:left-[41.4%] top-[66%] sm:top-3/4   w-[27vw] sm:w-[17.5vw]">
+            <span className=" absolute text-white font-montserrat text-[1.4vw] xl:text-[0.8vw]">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)"/>
+
+                <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>
+
+        </div>
+    )
+}

frontend/code/src/Components/Home/assets/Chart.tsx

@@ -0,0 +1,9 @@
+export const Chart = () => {
+    return (
+
+        <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16.8694 0C20.7805 0 22.9885 2.21835 23 6.1295V16.8705C23 20.7805 20.7805 23 16.8694 23H6.1295C2.21835 23 0 20.7805 0 16.8705V6.1295C0 2.21835 2.21835 0 6.1295 0H16.8694ZM12.075 4.7495C11.7519 4.554 11.3609 4.554 11.0515 4.7495C10.7399 4.94385 10.5685 5.3015 10.6019 5.658V17.3765C10.6605 17.871 11.0734 18.239 11.5564 18.239C12.052 18.239 12.4649 17.871 12.5109 17.3765V5.658C12.5569 5.3015 12.3855 4.94385 12.075 4.7495ZM6.7045 8.5215C6.394 8.326 6.00185 8.326 5.6925 8.5215C5.38085 8.717 5.2095 9.07235 5.244 9.43V17.3765C5.28885 17.871 5.70285 18.239 6.19735 18.239C6.693 18.239 7.10585 17.871 7.15185 17.3765V9.43C7.1875 9.07235 7.01385 8.717 6.7045 8.5215ZM17.3524 12.696C17.043 12.5005 16.652 12.5005 16.33 12.696C16.0184 12.8915 15.847 13.2354 15.893 13.6045V17.3765C15.939 17.871 16.3519 18.239 16.8475 18.239C17.3305 18.239 17.7434 17.871 17.802 17.3765V13.6045C17.8354 13.2354 17.664 12.8915 17.3524 12.696Z" fill="white"/>
+        </svg>
+
+    )
+}

frontend/code/src/Components/Home/assets/Daimond.tsx

@@ -0,0 +1,8 @@
+export const Daimond = () => {
+    return (
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 17L1.6797 7.84963C1.34718 7.43398 1.18092 7.22615 1.13625 6.9757C1.09159 6.72524 1.17575 6.47276 1.34407 5.96778L2.0883 3.73509C2.52832 2.41505 2.74832 1.75503 3.2721 1.37752C3.79587 1 4.49159 1 5.88304 1H12.117C13.5084 1 14.2041 1 14.7279 1.37752C15.2517 1.75503 15.4717 2.41505 15.9117 3.73509L16.6559 5.96778C16.8243 6.47276 16.9084 6.72524 16.8637 6.9757C16.8191 7.22615 16.6528 7.43398 16.3203 7.84963L9 17ZM9 17L12.5 6M9 17L5.5 6M16.5 7L12.5 6M12.5 6L11 2M12.5 6H5.5M7 2L5.5 6M5.5 6L1.5 7" stroke="#F2F2F2" strokeLinecap="round"/>
+        </svg>
+
+    )
+}

frontend/code/src/Components/Home/assets/Table.tsx

@@ -0,0 +1,84 @@
+import { Trophy } from './Trophy' 
+import { useState,useEffect } from 'react'
+import { Daimond } from './Daimond'
+import { Loading } from '../../Loading'
+// import { useLoaderData } from 'react-router'
+
+// export const dataLoader = async() => {
+
+//     var users :any[] = [];
+//     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];
+//           users.push(newUser)
+//       }
+//     }
+//        return users;
+
+
+// }
+export const Table = () =>
+{
+    const [users, setUsers] = useState<any | undefined>([])
+    // const users : any = useLoaderData();
+
+    const [loading , setLoading] = useState<boolean>(true)
+    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]);
+              }
+            }
+            setLoading(false)
+      }
+      fetchdata().catch(console.error)  
+    },[])
+
+    return (
+        <div className="overflow-x-auto no-scrollbar w-full">
+          <table className="table w-full">
+            <thead>
+              <tr className='w-[80vw] flex justify-between px-10 items-center'>
+                <th>Place</th>
+                <th>User</th>
+                <th>Score</th>
+              </tr>
+            </thead>
+            <tbody className='flex flex-col justify-between items-center gap-2 sm:gap-4'>
+              { !loading && users.map((x: any, index: number) => (
+                <tr
+                  key={index}
+                  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 + 1}
+                      </div>
+                    </div>
+                  </td>
+                  <td className='flex justify-start items-center gap-x-2'>
+                      <div className="avatar">
+                      <div className="w-10 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
+                      <img src={x.picture.thumbnail} alt="Avatar Tailwind CSS Component" />                      </div>
+                    </div>
+
+                    <div className="flex font-montserrat w-12 text-neutral font-semibold">{x.name.first}</div>
+                  </td>
+                  <td className='flex justify-start items-center gap-x-1 w-18'><Daimond/> <div>{index + 123}</div></td>
+                </tr>
+              ))}
+              {loading && (<Loading size={"lg"}/>)}
+            </tbody>
+          </table>
+        </div>
+      );
+}

frontend/code/src/Components/Home/assets/Trophy.tsx

@@ -0,0 +1,9 @@
+export const Trophy = () => {
+    return (
+
+        <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M25.0906 2.90323C25.1875 1.93548 25.1875 1.06452 25.1875 0H5.8125C5.8125 1.06452 5.8125 1.93548 5.90938 2.90323H0V3.87097C0 12.4839 10.9469 18.5806 13.5625 19.9355V23.2258C13.5625 24.871 12.3031 26.129 10.6563 26.129H8.71875V30H22.2812V26.129H20.3438C18.6969 26.129 17.4375 24.871 17.4375 23.2258V19.9355C20.0531 18.5806 31 12.4839 31 3.87097V2.90323H25.0906ZM2.03438 4.83871H6.10313C6.49063 9.19355 7.55625 12.2903 8.71875 14.5161C5.61875 12.0968 2.42188 8.70968 2.03438 4.83871ZM22.3781 14.5161C23.5406 12.2903 24.6063 9.19355 24.9938 4.83871H29.0625C28.5781 8.70968 25.3813 12.0968 22.3781 14.5161Z" fill="#7138CE"/>
+        </svg>
+
+    )
+}

frontend/code/src/Components/Home/assets/css/style.css

@@ -0,0 +1,6 @@
+.mystyle:hover > svg * ,
+.mystyle:hover {
+    transition-duration: 300ms;
+    fill: hsl(var(--p) / 1);
+}  
+

frontend/code/src/Components/Home/index.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react'
+import { Button } from './assets/Button'
+import { LeaderBoard } from './LeaderBoard'
+import { Link } from 'react-router-dom'
+import herosvg from './assets/Hero.png'
+export const Home : FC = () : JSX.Element =>{
+
+    return (
+        <>
+
+            <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-48 sm:max-h-96 w-[90vw] sm:h-3/4 sm:w-[85vw]'>
+                    <img className='w-full h-full object-cover object-top rounded-3xl' alt='leaderboard hero' src={herosvg} />
+                    <Link to={"/Play"}><Button/></Link>
+                </div>
+                <div className='flex justify-center relative items-start pt-6 h-3/6 w-[90vw] sm:h-3/4 sm:w-[85vw]'>
+                    <LeaderBoard/>
+
+                </div>
+
+            </div>
+        </>
+
+
+    )
+}

frontend/code/src/Components/Layout/Assets/Alert.tsx

@@ -0,0 +1,22 @@
+
+export const Alert = () => { 
+
+    return (
+        <>
+        <div className="hover:cursor-pointer dropdown">
+
+        <div tabIndex={0} className="dropdown-content z-[60] card card-compact w-64 p-2 shadow bg-base-200 text-primary-content relative -left-44 -bottom-32">
+            <div className="card-body">
+            <h3 className="card-title text-neutral">Notifacitions</h3>
+            <p>frend request</p>
+            </div>
+        </div>
+        <label tabIndex={0} className=""><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>
+        </label>
+        </div>
+        </>
+    )
+}

frontend/code/src/Components/Layout/Assets/Avatar.tsx

@@ -0,0 +1,19 @@
+import avatart from '../images/avatar.jpg'
+import {  Link } from "react-router-dom";
+import './style.css'
+export const Avatar = () =>{
+    return (
+        <div className="avatar myonline dropdown hover:cursor-pointer">
+        <div tabIndex={0} className="w-10 sm:w-12 rounded-full">
+            <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"><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>
+
+
+
+    )
+}

frontend/code/src/Components/Layout/Assets/Dash.tsx

@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom'
+export const Dash =  ({selected} : boolean | any) => {
+    return (
+        <Link to={"Home"}>
+            <div className={`h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer ${selected && 'bg-secondary'}`}>
+                <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"/>
+                <rect x="14" y="4" width="6" height="5" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
+                <rect x="14" y="13" width="6" height="7" rx="1" stroke="#BDBDBD" strokeWidth="2" strokeLinejoin="round"/>
+                </svg>
+            </div>
+        </Link>
+    )
+}

frontend/code/src/Components/Layout/Assets/Game.tsx

@@ -0,0 +1,10 @@
+export const Game = ({selected} : boolean | any) => {
+    return (
+        <div className={`h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer ${selected && 'bg-secondary'}`}>
+            <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>
+        </div>
+
+    )
+}