Merge branch 'main' into feature/game-sessions

src/App.tsx

@@ -1,14 +1,16 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { lazy, Suspense, useState } from 'react';
-import { Route, Routes, Navigate } from 'react-router-dom';
+import { Suspense, lazy, useState } from 'react';
+import { Route, Routes } from 'react-router-dom';
 import Header from '~/components/Header';
+import Lobby from './components/Lobby';
+import ComingSoon, { NotFound } from './components/UI/ComingSoon.ui';
 import { AuthProvider } from './providers/AuthProvider';
 import ErrorBoundary from './providers/ErrorBoundary';
 import { SocketProvider } from './providers/SocketProvider';
-import Lobby from './components/Lobby';
 function App() {
+  const Home = lazy(() => import('./components/Home'));
   const Room = lazy(() => import('./components/Room'));
-  const GameMode = lazy(() => import('./components/GameMode'));
+  const Pools = lazy(() => import('./components/Pools'));
   const Leaderboard = lazy(() => import('./components/Leaderboard'));
   const ProfileDetails = lazy(() => import('./components/Detail/Profile'));
   const Profile = lazy(() => import('./components/Detail'));
@@ -28,19 +30,20 @@ function App() {
                 }
               >
                 <Routes>
-                  <Route index element={<Room />} />
-                  <Route path="play" element={<Lobby />}>
-                    <Route path="play/online/:roomId" element={<Room />} />
-                    <Route path="play/offline" element={<div>Test</div>} />
+                  <Route path="/" element={<Home />} />
+                  <Route path="play">
+                    <Route index element={<Lobby />} />
+                    <Route path="offline" element={<ComingSoon />} />
+                    <Route path=":roomId" element={<Room />} />
                   </Route>
-                  <Route path="/mode" element={<GameMode />} />
-                  <Route path="/leaderboard" element={<Leaderboard />} />
-                  <Route path="/profile" element={<Profile />}>
+                  <Route path="pools" element={<Pools />} />
+                  <Route path="leaderboard" element={<Leaderboard />} />
+                  <Route path="profile" element={<Profile />}>
                     <Route path="" element={<ProfileDetails />} />
                     <Route path="deposit" element={<Deposit />} />
                     <Route path="preferences" element={<Preferences />} />
                   </Route>
-                  <Route path="/*" element={<Navigate to="/" />} />
+                  <Route path="*" element={<NotFound />} />
                 </Routes>
               </Suspense>
             </div>

src/components/Detail/Profile.tsx

@@ -5,6 +5,8 @@ import Edit from '~/assets/img/edit.png';
 import { useAuth } from '~/providers/AuthProvider';
 import { ColumnDefinitionType, Image, Table } from '../UI';
 import { Bullet } from '~/assets/icons';
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 interface History {
   type: React.ReactElement;
@@ -131,7 +133,13 @@ const columns: ColumnDefinitionType<History, keyof History>[] = [
 ];
 
 const ProfileDetails: React.FC = () => {
-  const { user } = useAuth();
+  const { user, isAuthenticated } = useAuth();
+    const navigate = useNavigate();
+    useEffect(() => {
+        if(!isAuthenticated()){
+            navigate('/');
+        }
+    },[])
   return (
     <div className="ml-10 pr-14 w-full overflow-y-auto overflow-x-hidden max-h-[83vh]">
       <div className="flex items-center gap-6">

src/components/Header.tsx

@@ -41,7 +41,7 @@ const Header: FC = () => {
             <LinkButton text="Play game" to="/play" actived={pathname.includes('play')} />
           </li>
           <li>
-            <LinkButton text="Game Modes" to="/mode" actived={pathname.includes('mode')} />
+            <LinkButton text="Pools" to="/pools" actived={pathname.includes('pools')} />
           </li>
           <li>
             <LinkButton text="Leaderboard" to="/leaderboard" actived={pathname.includes('board')} />

src/components/Home/index.tsx

@@ -1,32 +1,26 @@
 import { FC } from 'react';
-import { Logo, Button, Card } from '~/components/UI';
+import { Card } from '~/components/UI';
+import Material from '~/assets/img/material.svg';
+import Solar from '~/assets/img/solar.svg';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '~/providers/AuthProvider';
+import { appActions } from '~/store';
 
-const cards = ['Quick Play', 'Computer', 'Friend']
 const Home: FC = () => {
+  const { isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+  const goTo = (param: string) => {
+    if (isAuthenticated()) {
+      navigate(param);
+    } else {
+      appActions.auth.isModalOpen(true);
+    }
+  };
   return (
-    <>
-      <div className="">
-        <div className='relative bg-yellow-400 h-[500px]'>
-            <Logo />
-            <div className='absolute flex w-full justify-center bottom-10'>
-                <Button
-                    text={'Button'}
-                />
-            </div>
-        </div>
-
-        <div className='flex flex-wrap justify-between items-center px-12 py-4'>
-            {
-                cards.map((text,index)=>(
-                    <Card
-                        key={index}
-                        text={text}    
-                    />
-                ))
-            }
-        </div>
-      </div>
-    </>
+    <div className="flex flex-col sm:flex-row justify-center items-center px-12 py-4 gap-5 sm:gap-20 my-auto">
+      <Card image={Material} text="Play For Free" to={() => navigate('/play')} />
+      <Card image={Solar} text="Wagers" to={() => goTo('/pools')} />
+    </div>
   );
 };
 

src/components/GameMode/index.tsx → src/components/Pools/index.tsx

@@ -1,6 +1,6 @@
 // import { GameModeItem } from '../UI/GameModeItem.ui'
 // import { ModeItem_1 } from '../UI/SVG_ICONS'
-const GameMode: React.FC = () => {
+const Pools: React.FC = () => {
   return (
     <div className="flex flex-col justify-center my-auto">
       <p className="font-bold text-5xl text-gray-300 mb-[150px] mx-auto">
@@ -16,4 +16,4 @@ const GameMode: React.FC = () => {
   );
 };
 
-export default GameMode;
+export default Pools;

src/components/Room/index.tsx

@@ -86,11 +86,11 @@ const Room = () => {
           <div style={{ maxWidth: '70vh', width: '70vw', margin: '0 auto' }}>
             <Chessboard
               id={'board'}
+              customSquare={Square}
               animationDuration={300}
-              isDraggablePiece={() => false}
               arePremovesAllowed={false}
               customPieces={customPieces}
-              customSquare={Square}
+              isDraggablePiece={() => false}
               customDarkSquareStyle={customDarkSquareStyle}
               customLightSquareStyle={customLightSquareStyle}
             />

src/components/UI/Card.ui.tsx

@@ -1,30 +1,18 @@
-import { Button } from '.'
-import { useNavigate } from 'react-router-dom'
+import { Image } from '.'
 
 export interface CardProps{
     text: string,
-    button?: string
+    image?: string,
+    to : (param: string) => void,
 }
 
-export const Card: React.FC<CardProps>  = ({ text, button='Button' }: CardProps) =>{
-    const navigate = useNavigate()
-    const gotoRoom = () => {     
-        navigate('/play')
-    }
+export const Card: React.FC<CardProps>  = ({ text, image, to }: CardProps) =>{
     return(
-        <div className='relative min-w-[400px] min-h-[500px] bg-cyan-300'>
-            <div className='absolute flex w-full top-52 justify-center'>
-                <p className='text-2xl'>{text}</p>
+        <button className='flex flex-col items-center justify-center w-[280px] h-[280px] border-[1px] rounded-[27.617px] bg-gradient-to-r from-white-200 from-0%  to-white-300 to-100% shadow-2xl' onClick={() => to("play")}>
+            <div className='p-5 rounded-[27.617px] shadow-xl border-[#b4c7d880] border-[0.41844px] bg-card'>
+                <Image source={image}/>
             </div>
-            <div className='absolute flex w-full bottom-12 justify-center'>
-                <Button
-                    text={button}
-                    bg_color='#000000'
-                    text_color='#ffffff'
-                    onClick={gotoRoom}
-                />
-            </div>
-
-        </div>
+            <span className='font-bold mt-10 text-2xl'>{text}</span>
+        </button>
     )
 }

src/components/UI/ComingSoon.ui.tsx

@@ -0,0 +1,14 @@
+export default function ComingSoon() {
+  return (
+    <div className="font-bold text-5xl text-gray-300 h-full w-full flex-1 flex items-center justify-center  ">
+      Coming Soon...
+    </div>
+  );
+}
+export function NotFound() {
+  return (
+    <div className="font-bold text-5xl text-gray-300 h-full w-full flex-1 flex items-center justify-center  ">
+      Not Found!
+    </div>
+  );
+}

tailwind.config.js

@@ -28,9 +28,16 @@ export default {
       Libre: 'Libre Baskerville',
       Inter: 'Inter',
     },
+    boxShadow: {
+      xl: '0px 77.5917px 31.1939px rgba(0, 146, 255, 0.03), 0px 43.7763px 26.2134px rgba(0, 146, 255, 0.1), 0px 19.3979px 19.3979px rgba(0, 146, 255, 0.17), 0px 4.98052px 10.7475px rgba(0, 146, 255, 0.2)',
+      '2xl':
+        '0px 107.28px 43.0688px rgba(53, 114, 141, 0.01), 0px 60.2963px 36.0212px rgba(53, 114, 141, 0.03), 0px 26.6243px 26.6243px rgba(53, 114, 141, 0.04), 0px 7.04762px 14.8783px rgba(53, 114, 141, 0.05)',
+    },
     colors: {
       white: {
         100: '#F7F7F7',
+        200: '#F6FBFF',
+        300: '#ffffffa6',
       },
       purple: {
         100: '#7B61FF',
@@ -39,20 +46,21 @@ export default {
         100: '#FF5F57',
         200: '#f87171',
       },
-      gray:{
-        100:'#E8EDF9',
-        200:'#B7C0D8',
-        300:'#34364C',
-        400:'#9ca3af',
+      gray: {
+        100: '#E8EDF9',
+        200: '#B7C0D8',
+        300: '#34364C',
+        400: '#9ca3af',
         500: '#6b7280',
-        600: '#868686'
+        600: '#868686',
       },
       green: {
         100: '#1BC47D',
       },
       blue: {
         100: '#1D9BF0',
       },
+      card: 'linear-gradient(292.94deg, #DCEEFF 0%, #F1F8FF 0%, #F1F8FF 0%, #FFFFFF 100%)',
       fontFamily: {
         libre: ['Libre Baskerville', ...defaultTheme.fontFamily.sans],
       },