From 19669e017fbfc25bf15877e6565022fc5b2f9d5b Mon Sep 17 00:00:00 2001 From: Kislay Date: Thu, 30 May 2024 16:15:27 +0530 Subject: [PATCH] frontend: Restructure components and pages. Separated directories for library components and pages. Added skeleton for various pages. --- frontend/package-lock.json | 41 +++++++++++++++++++++++- frontend/package.json | 3 +- frontend/src/App.css | 42 ------------------------ frontend/src/App.tsx | 44 ++++++++++++++++++-------- frontend/src/Navbar.tsx | 2 +- frontend/src/library/button.tsx | 14 +++++--- frontend/src/pages.tsx/About.tsx | 14 ++++++++ frontend/src/pages.tsx/AppLayout.tsx | 15 +++++++++ frontend/src/pages.tsx/Error.tsx | 13 ++++++++ frontend/src/pages.tsx/Game.tsx | 11 +++++++ frontend/src/pages.tsx/Home.tsx | 12 +++++++ frontend/src/pages.tsx/PlayOptions.tsx | 26 +++++++++++++++ 12 files changed, 175 insertions(+), 62 deletions(-) create mode 100644 frontend/src/pages.tsx/About.tsx create mode 100644 frontend/src/pages.tsx/AppLayout.tsx create mode 100644 frontend/src/pages.tsx/Error.tsx create mode 100644 frontend/src/pages.tsx/Game.tsx create mode 100644 frontend/src/pages.tsx/Home.tsx create mode 100644 frontend/src/pages.tsx/PlayOptions.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a78c679..1e4534d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "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", @@ -561,6 +562,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", + "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.18.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz", @@ -2389,6 +2398,36 @@ "react": "^18.3.1" } }, + "node_modules/react-router": { + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz", + "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==", + "dependencies": { + "@remix-run/router": "1.16.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz", + "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==", + "dependencies": { + "@remix-run/router": "1.16.1", + "react-router": "6.23.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 7cb4ab1..0041083 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/App.css b/frontend/src/App.css index f44fb79..e69de29 100644 --- a/frontend/src/App.css +++ b/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; -} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8ab09a0..3aa9b53 100644 --- a/frontend/src/App.tsx +++ b/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: , + errorElement: , + + children: [ + { + path: '/', + element: , + }, + { + path: '/play', + element: , + + },{ + path: '/game', + element: + }, + { path: '/about', element: }, + ], + }, +]); function App() { - const [count, setCount] = useState(0); - const a = 5; - console.log(a); - return ( - <> - -

Lets play a game of UNO! Click the button to draw a card.

-

Card: {count}

- - - ); + return } export default App; diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx index a3ae34e..7babdad 100644 --- a/frontend/src/Navbar.tsx +++ b/frontend/src/Navbar.tsx @@ -1,7 +1,7 @@ function Navbar() { return (
- UNO!!! + Navbar
) } diff --git a/frontend/src/library/button.tsx b/frontend/src/library/button.tsx index 333580d..5dba089 100644 --- a/frontend/src/library/button.tsx +++ b/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 ( -
- -
+ ) } diff --git a/frontend/src/pages.tsx/About.tsx b/frontend/src/pages.tsx/About.tsx new file mode 100644 index 0000000..60ae277 --- /dev/null +++ b/frontend/src/pages.tsx/About.tsx @@ -0,0 +1,14 @@ + + +function About() { + return ( + <> +

+ About this project +

+

This project was developed as a part of CSOC, IIT(BHU)

+ + ) +} + +export default About diff --git a/frontend/src/pages.tsx/AppLayout.tsx b/frontend/src/pages.tsx/AppLayout.tsx new file mode 100644 index 0000000..33e1bcf --- /dev/null +++ b/frontend/src/pages.tsx/AppLayout.tsx @@ -0,0 +1,15 @@ +import { Outlet } from "react-router-dom" +import Navbar from "../Navbar" + + +function AppLayout() { + return ( +
+ + + {/* todo: Add a footer component */} +
+ ) +} + +export default AppLayout diff --git a/frontend/src/pages.tsx/Error.tsx b/frontend/src/pages.tsx/Error.tsx new file mode 100644 index 0000000..b5b6344 --- /dev/null +++ b/frontend/src/pages.tsx/Error.tsx @@ -0,0 +1,13 @@ +import { Link } from "react-router-dom" + + +function Error() { + return ( +
+ This page does not exist! + Go back to homepage +
+ ) +} + +export default Error diff --git a/frontend/src/pages.tsx/Game.tsx b/frontend/src/pages.tsx/Game.tsx new file mode 100644 index 0000000..5b8c6ff --- /dev/null +++ b/frontend/src/pages.tsx/Game.tsx @@ -0,0 +1,11 @@ + + +function Game() { + return ( +
+
X's turn
+
+ ) +} + +export default Game diff --git a/frontend/src/pages.tsx/Home.tsx b/frontend/src/pages.tsx/Home.tsx new file mode 100644 index 0000000..4e550d0 --- /dev/null +++ b/frontend/src/pages.tsx/Home.tsx @@ -0,0 +1,12 @@ +import { Link } from "react-router-dom" + +function Home() { + return ( + <> +
Home Page
+ Play + + ); +} + +export default Home diff --git a/frontend/src/pages.tsx/PlayOptions.tsx b/frontend/src/pages.tsx/PlayOptions.tsx new file mode 100644 index 0000000..f3809e0 --- /dev/null +++ b/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 ( + <> +
+

Create a new game

+ +
+
+

Join a game

+ +
+ + ); +} + +export default PlayOptions;