Setup Create Tournament

2a1d503d · Bauer Lucca · 292c6d62 · 2a1d503d · 2a1d503d · 2a1d503d
Commit 2a1d503d authored 1 year ago by Bauer Lucca
--- a/sth-frontend/public/index.html
+++ b/sth-frontend/public/index.html
@@ -2,19 +2,19 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
@@ -29,6 +29,7 @@
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

--- a/sth-frontend/package-lock.json
+++ b/sth-frontend/package-lock.json
--- a/sth-frontend/package.json
+++ b/sth-frontend/package.json
@@ -10,14 +10,11 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.20.1",
-    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "vite build"
  },
  "eslintConfig": {
    "extends": [
@@ -38,8 +35,10 @@
    ]
  },
  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.32",
-    "tailwindcss": "^3.3.6"
+    "tailwindcss": "^3.4.0",
+    "vite": "^5.0.10"
  }
 }
--- a/sth-frontend/src/App.js
+++ b/sth-frontend/src/App.js
 import Navbar from "./layouts/Navbar";
 import {Outlet} from "react-router-dom";
 import "./index.css"
-import Sidebar from "./layouts/Sidebar";
+import Test from "./components/Test";

 function App() {
  return (
@@ -10,6 +10,7 @@ function App() {
          <div className={'p-6'}>
              <Outlet />
          </div>
+
      </>
  );
 }

--- a/sth-frontend/src/components/Modal.jsx
+++ b/sth-frontend/src/components/Modal.jsx
+import {useEffect, useRef, useState} from "react";
+import * as events from "events";
+
+
+export default function Modal({isOpen, onClose, children}){
+
+    const [isModalOpen, setModalOpen] = useState(false);
+    const modalRef = useRef();
+
+    useEffect(() => {
+        setModalOpen(isOpen);
+    }, [isOpen]);
+
+    useEffect(() => {
+        const modalElement = modalRef.current;
+        if (modalElement) {
+            if (isModalOpen) {
+                modalElement.showModal();
+            } else {
+                modalElement.close();
+            }
+        }
+    }, [isModalOpen]);
+
+    const handleKeyDown = (event) => {
+        if(event.key === "Escape"){
+            onClose()
+            setModalOpen(false)
+        }
+    }
+
+    return (
+        <dialog onKeyDown={handleKeyDown} ref={modalRef} className={'bg-gray-300 shadow shadow-gray-500 rounded-[25px] p-3 backdrop:backdrop-blur-sm backdrop:bg-white/30 backdrop:duration-700'}>
+            {children}
+        </dialog>
+    )
+}
\ No newline at end of file
--- a/sth-frontend/src/components/Test.js
+++ b/sth-frontend/src/components/Test.js
-
-
-export default function Test() {
+export default function Test({style}) {
    return (
-        <div>
+        <div className={`font-bold ${style}`}>
            <h1>Test</h1>
        </div>
    )

--- a/sth-frontend/src/components/TournamentForm.jsx
+++ b/sth-frontend/src/components/TournamentForm.jsx
+
+
+export default function TournamentForm(){
+
+    return (
+        <form className={'flex flex-col'}>
+            <label htmlFor='tName'>Tournament Name</label>
+            <input type='text' id='tName'/>
+            <label htmlFor='teamCount'>Player Count</label>
+            <input type='number' id='teamCount'/>
+            <label htmlFor='tournamentType'>Tournament Type</label>
+            <select id='tournamentType'>
+                <option value='bracketing'>Bracketing</option>
+            </select>
+            <input type='submit'/>
+        </form>
+    )
+}
\ No newline at end of file
--- a/sth-frontend/src/index.js
+++ b/sth-frontend/src/index.js
--- a/sth-frontend/src/layouts/Navbar.jsx
+++ b/sth-frontend/src/layouts/Navbar.jsx
-import {Link, Outlet} from "react-router-dom";
+import {Link} from "react-router-dom";
+import Modal from "../components/Modal";
+import {useState} from "react";
+import TournamentForm from "../components/TournamentForm";

 export default function Navbar() {
+    const [isOpen, setIsOpen] = useState(false)
+
+
    return (
-            <nav className="flex items-center justify-evenly h-14 bg-white shadow fixed w-full top-0 left-0 z-10">
-                <ul className="flex justify-evenly w-full h-full text-gray-400">
-                    <li className={'flex items-center justify-center w-1/2 h-full hover:bg-gray-200'}>
-                        <Link to="/">Search</Link>
-                    </li>
-                    <li className={'flex items-center justify-center w-1/2 h-full hover:bg-gray-200'}>
-                        <Link to="/">Create</Link>
-                    </li>
-                </ul>
+            <nav className="flex items-center justify-end h-14 bg-gray-100 fixed w-full top-0 left-0 z-10 hover:shadow duration-100">
+                <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+                    <div className={'w-[40vw] h-[50vh] relative'}>
+                        <button className={'absolute top-0 right-0 m-1'}
+                                onClick={() => setIsOpen(false)}>❌
+                        </button>
+                        <TournamentForm />
+                    </div>
+                </Modal>
+                <div className={'mr-12'}>
+                    <ul className="flex justify-evenly items-center w-full h-full text-gray-400">
+                        <button className={'flex items-center justify-center w-24 h-8 rounded-xl hover:bg-gray-200'} onClick={() => setIsOpen(true)}>
+                            Create
+                        </button>
+
+                        <li className={'flex items-center justify-center w-24 h-8 rounded-xl hover:bg-gray-200'}>
+                            <Link to="/">Home</Link>
+                        </li>
+                        <li className={'flex items-center justify-center w-24 h-8 rounded-lg h-full hover:bg-gray-200 duration-100'}>
+                            <Link to="/">About</Link>
+                        </li>
+                    </ul>
+                </div>
            </nav>
    )
 }
\ No newline at end of file
--- a/sth-frontend/src/pages/Tournament.js
+++ b/sth-frontend/src/pages/Tournament.js
--- a/sth-frontend/src/router.js
+++ b/sth-frontend/src/router.js
 import {createBrowserRouter} from "react-router-dom";
 import Tournament from "./pages/Tournament";
 import App from "./App";
-import Test from "./components/Test";

 const router = createBrowserRouter([
    {

--- a/sth-frontend/tailwind.config.js
+++ b/sth-frontend/tailwind.config.js
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
  theme: {
-    extend: {},
+    extend: {
+
+    },
  },
  plugins: [],
-}
-
+}
\ No newline at end of file