Make main pit display (#1)

Signed-off-by: Paul Hodges <paul.hodges@student.education.wa.edu.au>
Authored-by: Paul Hodges <paul.hodges@student.education.wa.edu.au>

README.md

@@ -1,36 +1,31 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Pit Display
 
-## Getting Started
+A tool to display information on a screen in the pits.
 
-First, run the development server:
+## Setup
+
+To setup the project, first clone it:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+git clone https://github.com/CurtinFRC/PitDisplay.git
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+Then install dependancies with pnpm:
 
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
+```bash
+pnpm install
+```
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Then run with:
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```
+pnpm run dev
+```
 
-## Deploy on Vercel
+## Building
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+To build locally use:
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```bash
+pnpm run build
+```

package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-navigation-menu": "^1.1.4",
@@ -49,6 +50,7 @@
     "react-day-picker": "^8.10.0",
     "react-dom": "^18",
     "react-hook-form": "^7.50.0",
+    "react-icons": "^5.0.1",
     "react-resizable-panels": "^2.0.3",
     "sonner": "^1.4.0",
     "tailwind-merge": "^2.2.1",

src/app/globals.css

@@ -65,12 +65,79 @@
     --ring: 212.7 26.8% 83.9%;
   }
 }
-
+
+@layer base {
+  html {
+    overflow-y: hidden;
+    overflow-x: hidden;
+  }
+
+  .cardGrid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px; /* Adjust as needed */
+  }
+
+  .mainGrid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+
+  .overallGrid {
+    display: flex;
+    flex-direction: column;
+
+    overflow-y: hidden;
+  }
+
+  .nav {
+    overflow-y: hidden;
+    min-width: 100%;
+  }
+
+  .nav-spacing {
+    /* make gap relative to screen size so that the items slowly come together as the screen gets smaller */
+    gap: 10%;  
+  }
+
+  .match {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+  }
+
+  .match-info {
+    padding: 6px;
+  }
+
+  .red {
+    background-color: #ff0000; /* Red color */
+    color: #ffffff; /* White text */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optional box shadow */
+  }
+
+  .blue {
+    background-color: #0000ff; /* Blue color */
+    color: #ffffff; /* White text */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optional box shadow */
+  }
+
+  .rankingsGrid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 10px;
+
+    overflow-y: hidden;
+  }
+}
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}
+

src/app/layout.tsx

@@ -17,7 +17,7 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" className='dark'>
+    <html lang="en" className='dark min-h-[100vh]'>
       <body className={inter.className}>
         {children}
         <Toaster/>