frontend: Restructure components and pages.

Separated directories for library components and pages.
Added skeleton for various pages.

frontend/package.json

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

frontend/src/App.css

@@ -1,42 +0,0 @@
-#root {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 2rem;
-    text-align: center;
-}
-
-.logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
-}
-.logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-    filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    a:nth-of-type(2) .logo {
-        animation: logo-spin infinite 20s linear;
-    }
-}
-
-.card {
-    padding: 2em;
-}
-
-.read-the-docs {
-    color: #888;
-}

frontend/src/App.tsx

@@ -1,19 +1,37 @@
-import { useState } from 'react';
 import './App.css';
-import Navbar from './Navbar';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import Home from './pages.tsx/Home';
+import AppLayout from './pages.tsx/AppLayout';
+import Error from './pages.tsx/Error';
+import Game from './pages.tsx/Game';
+import About from './pages.tsx/About';
+import PlayOptions from './pages.tsx/PlayOptions';
+
+const router = createBrowserRouter([
+    {
+        element: <AppLayout />,
+        errorElement: <Error />,
+
+        children: [
+            {
+                path: '/',
+                element: <Home />,
+            },
+            {
+                path: '/play',
+                element: <PlayOptions />,
+
+            },{
+                path: '/game',
+                element: <Game/>
+            },
+            { path: '/about', element: <About /> },
+        ],
+    },
+]);
 
 function App() {
-    const [count, setCount] = useState(0);
-    const a = 5;
-    console.log(a);
-    return (
-        <>
-            <Navbar></Navbar>
-            <p>Lets play a game of UNO! Click the button to draw a card.</p>
-            <p>Card: {count}</p>
-            <button onClick={() => setCount(count + 1)}>Draw a card</button>
-        </>
-    );
+   return <RouterProvider router={router}/>
 }
 
 export default App;

frontend/src/Navbar.tsx

@@ -1,7 +1,7 @@
 function Navbar() {
     return (
         <div>
-            UNO!!!
+            Navbar
         </div>
     )
 }

frontend/src/library/button.tsx

@@ -5,12 +5,18 @@
 // - Customize the shape of the button (rectangle, rounded, circle)
 // - Handles click events
 
+type ButtonProps = {
+    onClick: () => void;
+    children: React.ReactNode;
+}
 
-function Button() {
+function Button({onClick, children}:ButtonProps) {
     return (
-        <div>
-
-        </div>
+        <button onClick={onClick}>
+            {
+                children
+            }
+        </button>
     )
 }
 

frontend/src/pages.tsx/About.tsx

@@ -0,0 +1,14 @@
+
+
+function About() {
+    return (
+        <>
+        <h1>
+            About this project
+        </h1>
+        <p>This project was developed as a part of CSOC, IIT(BHU)</p>
+        </>
+    )
+}
+
+export default About

frontend/src/pages.tsx/AppLayout.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom"
+import Navbar from "../Navbar"
+
+
+function AppLayout() {
+    return (
+        <div>
+            <Navbar/>
+            <Outlet/>
+            {/* todo: Add a footer component */}
+        </div>
+    )
+}
+
+export default AppLayout

frontend/src/pages.tsx/Error.tsx

@@ -0,0 +1,13 @@
+import { Link } from "react-router-dom"
+
+
+function Error() {
+    return (
+        <div>
+            This page does not exist!
+            <Link to="home">Go back to homepage</Link>
+        </div>
+    )
+}
+
+export default Error

frontend/src/pages.tsx/Game.tsx

@@ -0,0 +1,11 @@
+
+
+function Game() {
+    return (
+        <div>
+            <div>X's turn</div>
+        </div>
+    )
+}
+
+export default Game

frontend/src/pages.tsx/Home.tsx

@@ -0,0 +1,12 @@
+import { Link } from "react-router-dom"
+
+function Home() {
+    return (
+        <>
+            <div>Home Page</div>
+            <Link to="/play">Play</Link>
+        </>
+    );
+}
+
+export default Home

frontend/src/pages.tsx/PlayOptions.tsx

@@ -0,0 +1,26 @@
+import { useNavigate } from 'react-router-dom';
+import Input from '../library/input';
+import Button from '../library/button';
+
+function PlayOptions() {
+    const navigate = useNavigate();
+    function handleCreateGame() {
+        console.log("Creating a new game")
+        navigate('/game');
+    }
+
+    return (
+        <>
+            <div>
+                <h1>Create a new game</h1>
+                <Button onClick={handleCreateGame}>Create game</Button>
+            </div>
+            <div>
+                <h1>Join a game</h1>
+                <Input placeholder="Enter game code" />
+            </div>
+        </>
+    );
+}
+
+export default PlayOptions;