Skip to content

Commit 88c44c0

Browse files
manish591manish591
committed
updated design, landing page,themes style added
1 parent 124e5cc commit 88c44c0

File tree

16 files changed

+204
-106
lines changed

16 files changed

+204
-106
lines changed

‎apps/frontend/src/App.tsx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,53 @@
1-
import './App.css';
1+
import "./App.css";
2+
import "./themes.css";
23
import { BrowserRouter, Route, Routes } from 'react-router-dom';
34
import { Landing } from './screens/Landing';
45
import { Game } from './screens/Game';
56
import Login from './screens/Login';
67
import { Suspense } from 'react';
78
import { RecoilRoot } from 'recoil';
8-
import { useUser } from '@repo/store/useUser';
99
import { Loader } from './components/Loader';
1010
import { Layout } from './layout';
11+
import { Settings } from './screens/Settings';
12+
import { Themes } from "./components/themes";
13+
import { ThemesProvider } from "./context/themeContext";
1114

1215
function App() {
1316
return (
14-
<div className="min-h-screen bg-stone-800">
17+
<div className="min-h-screen bg-bgMain text-textMain">
1518
<RecoilRoot>
1619
<Suspense fallback={<Loader />}>
17-
<AuthApp />
20+
<ThemesProvider>
21+
<AuthApp />
22+
</ThemesProvider>
1823
</Suspense>
1924
</RecoilRoot>
2025
</div>
2126
);
2227
}
2328

2429
function AuthApp() {
25-
const user = useUser();
2630
return (
2731
<BrowserRouter>
2832
<Routes>
29-
<Route path="/" element={<Layout children={<Landing />} />} />
33+
<Route
34+
path="/"
35+
element={<Layout><Landing /></Layout>}
36+
/>
3037
<Route
3138
path="/login"
3239
element={<Login />}
3340
/>
3441
<Route
3542
path="/game/:gameId"
36-
element={<Layout children={<Game />} />}
43+
element={<Layout><Game /></Layout>}
3744
/>
45+
<Route
46+
path='/settings'
47+
element={<Layout><Settings /></Layout>}
48+
>
49+
<Route path="themes" element={<Themes />} />
50+
</Route>
3851
</Routes>
3952
</BrowserRouter>
4053
);

‎apps/frontend/src/components/Card.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,17 +84,16 @@ export function PlayCard() {
8484
const navigate = useNavigate();
8585
return (
8686
<Card className="bg-transparent border-none">
87-
<CardHeader className="pb-3 text-center text-white shadow-md">
87+
<CardHeader className="pb-3 text-center">
8888
<CardTitle className="font-semibold tracking-wide flex flex-col items-center justify-center">
89-
<p>
90-
Play
91-
<span className="text-green-700 font-bold pt-1"> Chess</span>
89+
<p className='text-white'>
90+
Play <span className="text-green-600 font-bold pt-1">Chess</span>
9291
</p>
9392
<img className="pl-1 w-1/2 mt-4" src={chessIcon} alt="chess" />
9493
</CardTitle>
95-
<CardDescription></CardDescription>
94+
<CardDescription />
9695
</CardHeader>
97-
<CardContent className="grid gap-2 cursor-pointer shadow-md mt-1">
96+
<CardContent className="grid gap-2 cursor-pointer mt-1">
9897
{gameModeData.map((data) => {
9998
return <GameModeComponent {...data} />;
10099
})}

‎apps/frontend/src/components/ChessBoard.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@ export const ChessBoard = memo(({
7474
socket: WebSocket;
7575
}) => {
7676
console.log("chessboard reloaded")
77-
const { height, width } = useWindowSize();
7877

7978
const [isFlipped, setIsFlipped] = useRecoilState(isBoardFlippedAtom);
8079
const [userSelectedMoveIndex, setUserSelectedMoveIndex] = useRecoilState(
@@ -93,11 +92,7 @@ export const ChessBoard = memo(({
9392

9493
const labels = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
9594
const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
96-
const OFFSET = 100;
97-
const boxSize =
98-
width > height
99-
? Math.floor((height - OFFSET) / 8)
100-
: Math.floor((width - OFFSET) / 8);
95+
const boxSize = 80;
10196
const [gameOver, setGameOver] = useState(false);
10297
const moveAudio = new Audio(MoveSound);
10398
const captureAudio = new Audio(CaptureSound);
@@ -337,7 +332,7 @@ export const ChessBoard = memo(({
337332
height: boxSize,
338333
}}
339334
key={j}
340-
className={`${isRightClickedSquare ? (isMainBoxColor ? 'bg-[#CF664E]' : 'bg-[#E87764]') : isKingInCheckSquare ? 'bg-[#FF6347]' : isHighlightedSquare ? `${isMainBoxColor ? 'bg-[#BBCB45]' : 'bg-[#F4F687]'}` : isMainBoxColor ? 'bg-[#739552]' : 'bg-[#EBEDD0]'} ${''}`}
335+
className={`${isRightClickedSquare ? (isMainBoxColor ? 'bg-[#CF664E]' : 'bg-[#E87764]') : isKingInCheckSquare ? 'bg-[#FF6347]' : isHighlightedSquare ? `${isMainBoxColor ? 'bg-[#BBCB45]' : 'bg-[#F4F687]'}` : isMainBoxColor ? 'bg-boardDark' : 'bg-boardLight'} ${''}`}
341336
onContextMenu={(e) => {
342337
e.preventDefault();
343338
}}

‎apps/frontend/src/components/Footer.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import {
33
VideoIcon,
44
TwitterLogoIcon,
55
} from '@radix-ui/react-icons';
6+
import { Link } from 'react-router-dom';
67

78
export const Footer = () => {
89
return (
9-
<footer className="mt-40 border-t border-gray-600 py-16 text-white">
10-
<div className="w-[96%] max-w-screen-lg mx-auto flex flex-row justify-between">
11-
<div className="flex items-center">
12-
<img
13-
className="w-4 h-4 mt-[-5px]"
14-
src="https://res.cloudinary.com/dcugqfvvg/image/upload/v1713654408/chess-svgrepo-com_m9g5p1.svg"
15-
/>
16-
<h2 className="text-lg text-white">chess.100x</h2>
10+
<footer className="mt-40 py-16 text-gray-400">
11+
<div className="w-[96%] max-w-screen-lg mx-auto flex flex-col items-center justify-center">
12+
<div>
13+
<Link to={"/"}>Home</Link> |
14+
<Link to={"/settings"}> Settings</Link> |
15+
<Link to={"/login"}> Login</Link> |
16+
<Link to={"/game/random"}> Play</Link>
1717
</div>
1818
<div>
1919
<div className="flex gap-3 mt-4">

‎apps/frontend/src/components/GameModeComponent.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@ const GameModeComponent = ({
1717
}: GameModeComponent) => (
1818
<div
1919
onClick={onClick}
20-
className="-mx-2 mt-1 bg-stone-800 flex items-start space-x-4 rounded-sm p-2 transition-all hover:bg-stone-700 hover:text-accent-foreground shadow-lg"
20+
className="-mx-2 mt-1 bg-bgAuxiliary2 flex items-start space-x-4 rounded-sm p-2 transition-all shadow-lg"
2121
>
2222
{icon}
2323

2424
<div className="space-y-1">
25-
<p className="text-sm pt-1 font-medium leading-none text-slate-200">
25+
<p className="text-sm pt-1 font-medium leading-none text-slate-400">
2626
{title}
2727
</p>
2828
<p className="text-xs pt-2 text-muted-foreground">{description}</p>

‎apps/frontend/src/components/Navbar.tsx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import { Button } from './ui/button';
33
import { useNavigate } from 'react-router-dom';
44

55
export default function Navbar() {
6-
// const { data: sessionData } = useSession();
76
const navigate = useNavigate();
87
return (
9-
<div className="chess-board supports-backdrop-blur:bg-background/60 fixed left-0 right-0 top-0 z-20 backdrop-blur md:hidden text-white">
8+
<div className="supports-backdrop-blur:bg-background/60 fixed left-0 right-0 top-0 z-20 backdrop-blur md:hidden text-white">
109
<nav className="flex h-16 items-center justify-between px-4">
1110
<div>
1211
<MobileSidebar />
@@ -21,18 +20,6 @@ export default function Navbar() {
2120
>
2221
Login
2322
</Button>
24-
{/* {sessionData?.user ? ( */}
25-
{/* <UserNav user={sessionData.user} /> */}
26-
{/* ) : ( */}
27-
{/* <Button */}
28-
{/* size="sm" */}
29-
{/* // onClick={() => { */}
30-
{/* // void signIn(); */}
31-
{/* // }} */}
32-
{/* > */}
33-
{/* Sign In */}
34-
{/* </Button> */}
35-
{/* )} */}
3623
</div>
3724
</nav>
3825
</div>

‎apps/frontend/src/components/chess-board/ChessSquare.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const ChessSquare = ({
1313
<div className="h-full justify-center flex flex-col ">
1414
{square ? (
1515
<img
16-
className="w-14"
16+
className="w-[4.25rem]"
1717
src={`/${square?.color === 'b' ? `b${square.type}` : `w${square.type}`}.png`}
1818
/>
1919
) : null}

‎apps/frontend/src/components/constants/side-nav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const LowerNavItems = [
3939
{
4040
title: 'Settings',
4141
icon: SettingsIcon,
42-
href: '/',
42+
href: '/settings',
4343
color: 'text-green-500',
4444
},
4545
];

‎apps/frontend/src/components/side-nav.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export function SideNav({ items, setOpen, className }: SideNavProps) {
5656
value={openItem}
5757
onValueChange={setOpenItem}
5858
>
59-
<AccordionItem value={item.title} className="border-none ">
59+
<AccordionItem value={item.title} className="border-none">
6060
<AccordionTrigger
6161
className={cn(
6262
buttonVariants({ variant: 'ghost' }),
@@ -110,6 +110,7 @@ export function SideNav({ items, setOpen, className }: SideNavProps) {
110110
</Accordion>
111111
) : (
112112
<div
113+
key={item.title}
113114
hidden={
114115
(user && item.title == 'Login') ||
115116
(!user && item.title == 'Logout')
@@ -119,22 +120,19 @@ export function SideNav({ items, setOpen, className }: SideNavProps) {
119120
>
120121
{' '}
121122
<a
122-
key={item.title}
123123
href={item.href}
124124
onClick={() => {
125125
if (setOpen) setOpen(false);
126126
}}
127127
className={cn(
128-
buttonVariants({ variant: 'ghost' }),
129-
'group relative flex h-12 justify-start',
130-
location.pathname === item.href &&
131-
'bg-muted font-bold hover:bg-muted',
128+
buttonVariants({ variant: 'default' }),
129+
'group relative bg-transparent flex h-12 justify-start hover:bg-transparent]'
132130
)}
133131
>
134132
<item.icon className={cn('h-5 w-5', item.color)} />
135133
<span
136134
className={cn(
137-
'absolute left-12 text-base duration-200',
135+
'absolute left-12 text-white text-base duration-200',
138136
!isOpen && className,
139137
)}
140138
>

‎apps/frontend/src/components/sidebar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,27 +35,27 @@ export default function Sidebar({ className }: SidebarProps) {
3535
return (
3636
<nav
3737
className={cn(
38-
`relative hidden h-screen pt-4 md:block bg-stone-800 text-muted-foreground w-12 lg:w-36`,
38+
`relative hidden h-screen pt-4 md:block bg-bgAuxiliary1 text-white w-12 lg:w-36 top-0 relative sticky`,
3939
className,
4040
)}
4141
>
4242
<div className="flex flex-col h-full justify-between">
4343
<div className="flex flex-col justify-start">
4444
{isOpen && (
45-
<span className="text-center text-white text-2xl font-bold tracking-tighter ">
45+
<span className="text-center text-2xl font-bold tracking-tighter ">
4646
100xchess
4747
</span>
4848
)}
4949

5050
<SideNav
51-
className="text-background opacity-0 transition-all duration-300 group-hover:z-50 group-hover:rounded group-hover:bg-foreground group-hover:opacity-100"
51+
className="opacity-0 transition-all duration-300 group-hover:z-50 group-hover:rounded group-hover:bg-foreground group-hover:opacity-100"
5252
items={UpperNavItems}
5353
/>
5454
</div>
5555

5656
<div className="flex flex-col justify-end mb-2">
5757
<SideNav
58-
className="text-background opacity-0 transition-all duration-300 group-hover:z-50 group-hover:rounded group-hover:bg-foreground group-hover:opacity-100"
58+
className="opacity-0 transition-all duration-300 group-hover:z-50 group-hover:rounded group-hover:bg-foreground group-hover:opacity-100"
5959
items={LowerNavItems}
6060
/>
6161
</div>

0 commit comments

Comments
 (0)