ADD:new routing system

ADD:fetch checks

frontend/code/src/Routes/ReactTouter.tsx

@@ -0,0 +1,45 @@
+import { createBrowserRouter  , RouterProvider } from "react-router-dom";
+import { Login } from "../components/Login";
+const router = createBrowserRouter([
+    {
+        path:"/",
+        element:<Login/>, 
+    },
+    {
+        path:"/Home",
+        lazy: async () => {let { Home } = await import("../components/Home")
+        return { Component: Home }},  
+    },
+    {
+        path:"/Play",
+        lazy: async () => {let { Play } = await import("../components/Play")
+        return { Component: Play }},  
+    },
+    {
+        path:"/Settings",
+        lazy: async () => {let { Setting } = await import("../components/Settings")
+
+        return { Component: Setting }},  
+    },
+    {
+        path:"/Lobby",
+        lazy: async () => {let { Lobby } = await import("../components/Lobby/index")
+        return { Component: Lobby }},  
+    },
+    {
+        path:"/Profile/:id",
+        lazy: async () => {let { Profile } = await import("../components/Profile")
+        return { Component: Profile }},  
+    },
+    {
+        path:"*",
+        lazy: async () => {let { Error } = await import("../components/404/")
+        return { Component: Error }},  
+    },
+])
+
+export const AllRouters = () => {
+    return (
+        <RouterProvider router={router} />
+    )
+}

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

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

frontend/code/src/components/Layout/Assets/Profile.tsx

@@ -2,7 +2,7 @@ import {Link} from 'react-router-dom'
 
 export const Profile = () => {
     return (
-    <Link to={"/Profile"}>
+    <Link to={"/Profile/1ea7e67fb3b0cf97"}>
         <div className="h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer">
             <svg width="19" height="24" viewBox="0 0 19 24" fill="#BDBDBD" xmlns="http://www.w3.org/2000/svg">
             <path d="M9.3615 15.416C14.4385 15.416 18.723 16.241 18.723 19.4239C18.723 22.608 14.4104 23.4037 9.3615 23.4037C4.28566 23.4037 0 22.5788 0 19.3958C0 16.2117 4.31259 15.416 9.3615 15.416ZM9.3615 0C12.8008 0 15.5565 2.75465 15.5565 6.19152C15.5565 9.6284 12.8008 12.3842 9.3615 12.3842C5.92337 12.3842 3.16654 9.6284 3.16654 6.19152C3.16654 2.75465 5.92337 0 9.3615 0Z" fill="#BDBDBD"/>

frontend/code/src/components/Layout/Assets/style.css

@@ -0,0 +1,16 @@
+.avatar.myonline:before {
+    content: "";
+    position: absolute;
+    z-index: 10;
+    display: block;
+    border-radius: 9999px;
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--su) / var(--tw-bg-opacity));
+    outline-style: solid;
+    outline-width: 2px;
+    outline-color: hsl(var(--b1) / 1);
+    width: 25%;
+    height: 25%;
+    bottom: 0;
+    right: 0;
+}

frontend/code/src/components/Loading.tsx

@@ -0,0 +1,4 @@
+export const Loading = () => {
+    return (<span className="relative top-14 left-10 loading loading-bars loading-lg"></span>)
+
+}

frontend/code/src/components/Profile/History.tsx

@@ -1,13 +1,13 @@
 import { Chart } from './assets/Chart'
 import { Table } from './assets/Table'
-export const History = () => {
+export const History = (props:any) => {
     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'>Matches History</span>
 
            </div>
-            <Table />
+            <Table props={props}/>
         </div>
     )
 }

frontend/code/src/components/Profile/assets/Table.tsx

@@ -1,31 +1,52 @@
 import { useState,useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { Loading } from '../../Loading';
+import { useParams } from 'react-router-dom';
+const Load = (size:any) => {
+  return (
+    <span className={`loading loading-ring loading-${size}`}></span>
+  )
+}
 
-
-
-
-export const Table = () =>
+export const Table = (props:any) =>
 {
-    const [users, setUsers] = useState<any | undefined>([])
+    const param = useParams();
+    const [users, setUsers] = useState<any | undefined>([]);
+    const [enemys , setEnemys] = useState<any | undefined>([]);
     useEffect( ()  => {
+      setUsers([])
+      setEnemys([])
       const fetchdata = async() =>{
-          for (let i = 0 ; i < 5 ; ++i)
-          {
+        for (let i = 0 ; i < 5 ; ++i){
+          let response = await fetch(`https://randomuser.me/api/`)
+          let data  = await response.json()
+          if (data.results && data.results.length > 0) {
+            console.log(data)
+              const newUser = data.results[0];
+              newUser.seed = data.info.seed;
+              console.log(newUser)
+              setEnemys((oldUsers : any) => [...oldUsers, newUser]);
+          }
+        }
+        for (let i = 0 ; i < 5 ; ++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];
+                newUser.seed = data.info.seed;
+                console.log(newUser)
                 setUsers((oldUsers : any) => [...oldUsers, newUser]);
             }
-          }
+        }
       }
       fetchdata().catch(console.error)  
-    },[])
+    },[param])
     return (
         <div className=" no-scrollbar w-full ">
           <table className="table w-full ">
 
             <tbody className='flex flex-col justify-start items-center gap-y-2 md:gap-y-4'>
-              {users.map((x: any,index:number, elemetns: any) => (
+              {users.map((x: any ,index:number) => (
                 <tr
                   key={index}
                   className='bg-primary border-base-200 grow-0 rounded-xl w-11/12  flex justify-center md:justify-evenly px-1  items-center h-16 md:h-24'
@@ -39,14 +60,14 @@ export const Table = () =>
                   </td>
                   <td className='px-1 flex justify-center items-center md:gap-x-2 grow gap-y-1 w-auto'>
                     <div className=" flex justify-start items-center gap-x-2 md:gap-x-10 w-full">
-                      <div className="flex justify-center items-center text-xs font-poppins font-medium w-20 md:w-28 text-neutral">{x.name.first}</div>
-                      <img className='md:rounded-2xl rounded-xl h-8 md:h-12' src={x.picture.thumbnail} alt="Avatar Tailwind CSS Component" />                    
+                      {x?.name?.first ?  <div className="flex justify-center items-center text-xs font-poppins font-medium w-20 md:w-28 text-neutral">{x.name.first}</div> : <Loading/>}
+                      {x?.seed ?  <Link to={`/Profile/${x.seed}`}><img className='md:rounded-2xl rounded-xl h-8 md:h-12' src={x.picture.thumbnail} alt="Avatar Tailwind CSS Component" /> </Link> : <Loading/>}                
                       <div className='flex flex-row items-center  gap-x-1 justify-center w-16  md:w-20 h-6 rounded-r-3xl rounded-l-3xl bg-neutral text-accent font-poppins'> 
                         <span className='font-poppins font-medium'>1</span><span className='font-poppins font-medium'> : </span><span className='font-poppins font-medium'>1</span>
                       </div>
-                      <img className='md:rounded-2xl rounded-xl h-8 md:h-12' src={ users[Math.floor(users.length % (Math.random()*  users.length - 1))].picture.thumbnail} alt="Avatar Tailwind CSS Component" />  
-                      <div className="flex justify-center items-center text-xs font-poppins font-medium  w-20 md:w-28 text-neutral">{ elemetns[Math.floor(elemetns.length % (Math.random()*  elemetns.length - 1))].name.first}</div>
-
+
+                      {enemys[index]?.seed ? <Link to={`/Profile/${x.seed}`}><img className='md:rounded-2xl rounded-xl h-8 md:h-12' src={enemys[index].picture.thumbnail } alt="Avatar Tailwind CSS Component" />  </Link> : <Load props={"lg"}/>}
+                      <div className="flex justify-center items-center text-xs font-poppins font-medium  w-20 md:w-28 text-neutral">{enemys[index]?.name?.first  ? enemys[index].name.first : <Load props={"sm"}/>}  </div> 
                     </div>
                   </td>
                   <td className='flex px-1 grow-0 justify-end items-center gap-x-1  w-auto'><div className='w-18 text-lime-400'> + 1</div></td>

frontend/code/src/components/Profile/index.tsx

@@ -8,7 +8,22 @@ import { Master } from './assets/Master'
 import { Ultimate } from './assets/Ultimate'
 import { History } from './History'
 import Hero from './assets/Hero.gif'
+import { useState , useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { Loading } from '../Loading'
 export const Profile = () =>{
+    const params = useParams()
+    const [user, setUser] = useState<null | any>(undefined);
+    useEffect(() => {
+        const fetchUser = async() => {
+            const response = await fetch(`https://randomuser.me/api?seed=${params.id}`)
+            const data = await response.json();
+            const collecteduser = data.results[0]
+            console.log(collecteduser)
+            setUser(collecteduser)
+        }
+        fetchUser();
+    },[params])
     return (
     <Layout>
         <div className=" flex flex-col items-center h-full min-h-screen">
@@ -17,17 +32,21 @@ export const Profile = () =>{
                 <img className='flex-1   w-full h-full  rounded-t-3xl' src={Hero} alt="bg hero" />
                 <Pong/>           
                 <div className="avatar w-[10vw] absolute z-40 -bottom-4 sm:-bottom-6 md:-bottom-11 left-6 sm:left-12 ">
-                    <div className="w-[13vw] xl:w-[8vw] rounded-full ring ring-neutral ring-offset-base-100 ring-offset-1">
-                        <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" alt="profile avatar" />
+                    <div className="w-[13vw] xl:w-[8vw] rounded-full ring ring-neutral flex justify-center items-center ring-offset-base-100 ring-offset-1">
+                        {
+                            user?.picture?.large ? <img src={user?.picture?.large} alt="profile avatar" />: <Loading/>
+                        }
+
                     </div>
                 </div>   
                 <div className='absolute top-0 bg-gray-300-80 opacity-40 object-contain h-full  w-full rounded-t-3xl  z-10'></div>
 
 
             </div>
             <div className='relative flex flex-col gap-y-2 sm:gap-y-0 pl-4 sm:pt-12 pt-6 text-neutral font-montserrat bg-base-200  justify-start  items-start h-[35%] min-h-[30%] rounded-b-3xl w-[85vw] overflow-scroll no-scrollbar'>
-                <h6>Mark Zzzz</h6>
-                <div className="flex justify-center items-center gap-x-2">
+                    {
+                            user?.name?.first ? <h6>{user?.name?.first} </h6>: <Loading/>
+                    }                <div className="flex justify-center items-center gap-x-2">
                     <File/>
                     <span className='text-xs font-mono '>bio bla bla bla</span>
                 </div>
@@ -44,7 +63,7 @@ export const Profile = () =>{
                 </div>
             </div>
             <div className="relative flex w-[85vw] justify-center h-auto">
-                <History/>
+                <History props={params.id}/>
             </div>
         </div>
     </Layout>

frontend/code/src/index.tsx

@@ -1,23 +1,17 @@
+import './index.css';
 import React from 'react';
-import  { Toaster } from 'react-hot-toast';
-import { UserContextProvider } from './Context';
 import ReactDOM from 'react-dom/client';
-import './index.css';
-import {Login} from './components/Login'
-import {Main} from './components/Login/main'
-import {Lobby} from './components/Lobby/index'
-import {Error} from './components/404/index'
-import {Profile} from './components/Profile'
 import reportWebVitals from './reportWebVitals';
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { Home } from './components/Home';
-import { Play } from './components/Play';
-import { Setting } from './components/Settings';
+import { Toaster } from 'react-hot-toast';
+import { UserContextProvider } from './Context';
+import { AllRouters } from './Routes/ReactTouter';
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
-  <React.StrictMode>
+  // <React.StrictMode>
+    <>
       <Toaster
       position="top-right"
       reverseOrder={false}
@@ -26,25 +20,12 @@ root.render(
         duration: 5000
       }}
     />
-
-    <BrowserRouter>
-      <UserContextProvider>
-        <Routes>
-            <Route path="/" element={<Login />}></Route>
-            <Route path="/main" element={<Main/>}></Route>
-            <Route path="/lobby" element={<Lobby/>}></Route>
-            <Route path="/home" element={<Home/>}></Route>
-            <Route path="/profile" element={<Profile/>}></Route>
-            <Route path="/play" element={<Play/>}></Route>
-            <Route path="/Settings" element={<Setting/>}></Route>
-            <Route path="/*" element={<Error/>}></Route>
-        </Routes>
-      </UserContextProvider>
-    </BrowserRouter>
-  </React.StrictMode>
+    <UserContextProvider>
+      <AllRouters/>
+    </UserContextProvider>
+    </>
+  // </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+
 reportWebVitals();