diff --git a/src/App.tsx b/src/App.tsx index cdafd2e..e668209 100644 --- a/src/App.tsx +++ b/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() { } > - } /> - }> - } /> - Test} /> + } /> + + } /> + } /> + } /> - } /> - } /> - }> + } /> + } /> + }> } /> } /> } /> - } /> + } /> diff --git a/src/assets/img/material.svg b/src/assets/img/material.svg new file mode 100644 index 0000000..22e1f5d --- /dev/null +++ b/src/assets/img/material.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/img/solar.svg b/src/assets/img/solar.svg new file mode 100644 index 0000000..d3254ab --- /dev/null +++ b/src/assets/img/solar.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Detail/Profile.tsx b/src/components/Detail/Profile.tsx index 4e859ab..ef38b91 100644 --- a/src/components/Detail/Profile.tsx +++ b/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[] = [ ]; const ProfileDetails: React.FC = () => { - const { user } = useAuth(); + const { user, isAuthenticated } = useAuth(); + const navigate = useNavigate(); + useEffect(() => { + if(!isAuthenticated()){ + navigate('/'); + } + },[]) return (
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index ed57f67..e3aad50 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -41,7 +41,7 @@ const Header: FC = () => {
  • - +
  • diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index b87e34e..9bc66df 100644 --- a/src/components/Home/index.tsx +++ b/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 ( - <> -
    -
    - -
    -
    -
    - -
    - { - cards.map((text,index)=>( - - )) - } -
    -
    - +
    + navigate('/play')} /> + goTo('/pools')} /> +
    ); }; diff --git a/src/components/GameMode/index.tsx b/src/components/Pools/index.tsx similarity index 91% rename from src/components/GameMode/index.tsx rename to src/components/Pools/index.tsx index cb50ad0..897d076 100644 --- a/src/components/GameMode/index.tsx +++ b/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 (

    @@ -16,4 +16,4 @@ const GameMode: React.FC = () => { ); }; -export default GameMode; +export default Pools; diff --git a/src/components/Room/index.tsx b/src/components/Room/index.tsx index 2c1b503..955b1cb 100644 --- a/src/components/Room/index.tsx +++ b/src/components/Room/index.tsx @@ -86,11 +86,11 @@ const Room = () => {

    false} arePremovesAllowed={false} customPieces={customPieces} - customSquare={Square} + isDraggablePiece={() => false} customDarkSquareStyle={customDarkSquareStyle} customLightSquareStyle={customLightSquareStyle} /> diff --git a/src/components/UI/Card.ui.tsx b/src/components/UI/Card.ui.tsx index 6b69559..52e6e38 100644 --- a/src/components/UI/Card.ui.tsx +++ b/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 = ({ text, button='Button' }: CardProps) =>{ - const navigate = useNavigate() - const gotoRoom = () => { - navigate('/play') - } +export const Card: React.FC = ({ text, image, to }: CardProps) =>{ return( -
    -
    -

    {text}

    +
    - -
    + {text} + ) } diff --git a/src/components/UI/ComingSoon.ui.tsx b/src/components/UI/ComingSoon.ui.tsx new file mode 100644 index 0000000..3744ca6 --- /dev/null +++ b/src/components/UI/ComingSoon.ui.tsx @@ -0,0 +1,14 @@ +export default function ComingSoon() { + return ( +
    + Coming Soon... +
    + ); +} +export function NotFound() { + return ( +
    + Not Found! +
    + ); +} diff --git a/tailwind.config.js b/tailwind.config.js index 7a240ab..67486fa 100644 --- a/tailwind.config.js +++ b/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,13 +46,13 @@ 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', @@ -53,6 +60,7 @@ export default { blue: { 100: '#1D9BF0', }, + card: 'linear-gradient(292.94deg, #DCEEFF 0%, #F1F8FF 0%, #F1F8FF 0%, #FFFFFF 100%)', fontFamily: { libre: ['Libre Baskerville', ...defaultTheme.fontFamily.sans], },