Refactor Friends component and add menu options in Login component

ProLoser · Oct 5, 2024 · 31a9d56 · 31a9d56
1 parent ba1b329
commit 31a9d56
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 53 deletions.
diff --git a/src/Friends.css b/src/Friends.css
@@ -44,53 +44,5 @@
                 margin-right: .2em;
             }
         }
-    }
-
-    [aria-haspopup="menu"] {
-        float: right;
-    }
-}
-
-/* Base styles for the button that triggers the popup menu */
-[aria-haspopup="menu"] {
-    padding: 5px 10px;
-    background: none;
-    border: none;
-    color: black;
-    cursor: pointer;
-
-    &:hover {
-        color: blue;
-    }
-
-    &+menu,
-    &+[role="menu"] {
-        display: none;
-        background-color: rgba(255, 255, 255, 0.9);
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        position: absolute;
-        padding: 0;
-        right: 0;
-        margin: 2em 0 0;
-        list-style-type: none;
-    }
-
-    /* active */
-    &[aria-expanded="true"] {
-
-        &+menu,
-        &+[role="menu"] {
-            display: block;
-        }
-    }
-}
-
-/* Styles for menu items */
-[role="menuitem"],
-menu>li {
-    padding: .5em;
-    text-decoration: none;
-    display: block;
-    white-space: nowrap;
+                }
 }
diff --git a/src/Friends.tsx b/src/Friends.tsx
@@ -137,6 +137,12 @@ export default function Friends({ authUser, toggle, load, reset }) {
                         Reset Match
                     </a>
                 </li>
+                <li>
+                    <a href="https://github.com/ProLoser/PeaceInTheMiddleEast/issues/new" target="_blank">
+                        <span className="material-icons">bug_report</span>
+                        Report Bug
+                    </a>
+                </li>
                 <li>
                     <a onClick={() => firebase.auth().signOut()}>
                         <span className="material-icons">logout</span>

diff --git a/src/Login.tsx b/src/Login.tsx
@@ -6,6 +6,7 @@ import 'firebaseui/dist/firebaseui.css';
 import * as firebaseui from 'firebaseui';
 import firebase from 'firebase/compat/app';
 import 'firebase/compat/auth';
+import ToggleFullscreen from './ToggleFullscreen';
 
 // Configure FirebaseUI.
 const uiConfig = {
@@ -39,9 +40,10 @@ interface Props {
 }
 
 
-export default function Login() {
+export default function Login({ reset }) {
     const [userSignedIn, setUserSignedIn] = useState(false);
     const elementRef = useRef(null);
+    const [isExpanded, setIsExpanded] = useState(false);
 
     useEffect(() => {
         // Get or Create a firebaseUI instance.
@@ -68,7 +70,36 @@ export default function Login() {
 
     return (
         <section id="login">
-            <h1>Play Online</h1>
+            <header>
+                <button
+                    aria-haspopup="menu"
+                    aria-expanded={isExpanded}
+                    onClick={() => setIsExpanded(!isExpanded)}
+                    className="material-icons"
+                >
+                    settings
+                </button>
+                <menu>
+                    {document.fullscreenEnabled ?
+                        <li>
+                            <ToggleFullscreen />
+                        </li>
+                        : null}
+                    <li>
+                        <a onClick={reset}>
+                            <span className="material-icons">restart_alt</span>
+                            Reset Match
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://github.com/ProLoser/PeaceInTheMiddleEast/issues/new" target="_blank">
+                            <span className="material-icons">bug_report</span>
+                            Report Bug
+                        </a>
+                    </li>
+                </menu>
+                <h1>Play Online</h1>
+            </header>
             <div ref={elementRef} />
         </section>
     );

diff --git a/src/index.css b/src/index.css
@@ -58,9 +58,30 @@ dialog {
   z-index: 1;
   background: rgba(255, 255, 255, 0.4);
   backdrop-filter: blur(10px);
-  header h1:first-of-type {
+  header {
+      >h1:first-of-type {
       margin-block-start: 0;
     }
+        >button[aria-label="Close"] {
+          float: right;
+          margin: 0;
+          padding: 0;
+          border: none;
+          background: none;
+          font-size: 1.5em;
+          cursor: pointer;
+        }
+
+        >button[aria-haspopup="menu"] {
+          float: right;
+          margin: 0;
+          padding: 0;
+          border: none;
+          background: none;
+          font-size: 1.5em;
+          cursor: pointer;
+        }
+        }
   /* Portrait layout (mobile) */
   @media (max-aspect-ratio: 1) {
     top: 100px;
@@ -74,4 +95,48 @@ dialog {
     top: 40px;
     left: 100px;
   }
+}
+/*** MENU BUTTON ***/
+[aria-haspopup="menu"] {
+  padding: 5px 10px;
+  background: none;
+  border: none;
+  color: black;
+  cursor: pointer;
+
+  &:hover {
+    color: blue;
+  }
+
+  &+menu,
+  &+[role="menu"] {
+    display: none;
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    position: absolute;
+    padding: 0;
+    right: 0;
+    margin: 2em 0 0;
+    list-style-type: none;
+    z-index: 1;
+
+    /*** MENU ITEM ***/
+    [role="menuitem"],
+    menu>li {
+      padding: .5em;
+      text-decoration: none;
+      display: block;
+      white-space: nowrap;
+    }
+  }
+
+  /* MENU ACTIVE */
+  &[aria-expanded="true"] {
+
+    &+menu,
+    &+[role="menu"] {
+      display: block;
+    }
+  }
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -237,7 +237,7 @@ export function App() {
               : state === 'chat'
                 ? <Chat chats={chats} user={user} />
                 : null
-          : <Login />}
+          : <Login reset={reset} />}
       </dialog>
 
       <div id="board">