Accept invitation

ProLoser · Oct 13, 2024 · 9926d12 · 9926d12
1 parent f71a827
commit 9926d12
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 24 deletions.
diff --git a/src/Dialogues/Login.css b/src/Dialogues/Login.css
@@ -0,0 +1,12 @@
+#login {
+    .local {
+        border-radius: 2px;
+        min-width: 185px;
+        box-sizing: border-box;
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+        padding: 8px 16px;
+        border: 1px solid #ccc;
+        margin: 10px auto;
+        display: block;
+    }
+}
diff --git a/src/Dialogues/Login.tsx b/src/Dialogues/Login.tsx
@@ -1,12 +1,13 @@
 // TODO: Cleanup this file 
 // https://github.com/firebase/firebaseui-web-react/pull/173#issuecomment-1151532176
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { onAuthStateChanged } from 'firebase/auth';
 import 'firebaseui/dist/firebaseui.css';
 import * as firebaseui from 'firebaseui';
 import firebase from 'firebase/compat/app';
 import 'firebase/compat/auth';
 import ToggleFullscreen from '../ToggleFullscreen';
+import './Login.css';
 
 // Configure FirebaseUI.
 const uiConfig = {
@@ -39,8 +40,12 @@ interface Props {
     className?: string;
 }
 
+type LoginProps = {
+    reset: () => void;
+    friend?: { name: string };
+};
 
-export default function Login({ reset }) {
+export default function Login({ reset, friend, load, toggle }: LoginProps) {
     const [userSignedIn, setUserSignedIn] = useState(false);
     const elementRef = useRef(null);
     const [isExpanded, setIsExpanded] = useState(false);
@@ -68,6 +73,11 @@ export default function Login({ reset }) {
         };
     }, [firebaseui, uiConfig]);
 
+    const decline = useCallback(() => {
+        load()
+        toggle(false)
+    }, [load]);
+
     return (
         <section id="login">
             <header>
@@ -98,9 +108,13 @@ export default function Login({ reset }) {
                         </a>
                     </li>
                 </menu>
-                <h1>Play Online</h1>
+                <h1>Play {friend?friend.name:'Online'}</h1>
             </header>
             <div ref={elementRef} />
+            {friend ? <>
+                <h1>Play Locally</h1>
+                <button className="local" onPointerUp={decline}>Decline Invitation</button>
+            </>:null}
         </section>
     );
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -65,40 +65,41 @@ export function App() {
     });
   }, [lastState]);
 
-  const load = useCallback(async (userId?: string) => {
-    console.log('Loading', userId);
+  const load = useCallback(async (friendId?: string) => {
+    console.log('Loading', friendId);
 
-    if (!user || !userId) {
+    if (!friendId) {
       setMatch(null);
       setChats(null);
       setFriend(null);
       return;
     }
 
-    window.history.pushState(null, '', `${userId}`);
-    const userSnapshot = await database.ref(`users/${userId}`).get();
-    if (!userSnapshot.exists()) {
-      console.error('User not found', userId);
+    window.history.pushState(null, '', `${friendId}`);
+    const friendSnapshot = await database.ref(`users/${friendId}`).get();
+    if (!friendSnapshot.exists()) {
+      console.error('User not found', friendId);
       return;
     }
 
-    setFriend(userSnapshot);
-    const matchSnapshot = await database.ref(`matches/${user.key}/${userId}`).get();
-    if (!matchSnapshot.exists()) {
+    setFriend(friendSnapshot);
+    if (!user) return;
+    const matchSnapshot = await database.ref(`matches/${user.key}/${friendId}`).get();
+    if (matchSnapshot.exists()) {
+      setMatch(await matchSnapshot.val());
+    } else {
       // Create new match
       const gameRef = database.ref('games').push();
       const chatRef = database.ref('chats').push();
       // Point match to game
       const data: Match = {
-        sort: new Date().toISOString(),
-        game: gameRef.key!,
-        chat: chatRef.key!,
+      sort: new Date().toISOString(),
+      game: gameRef.key!,
+      chat: chatRef.key!,
       };
-      database.ref(`matches/${user.key}/${userId}`).set(data);
-      database.ref(`matches/${userId}/${user.key}`).set(data);
+      database.ref(`matches/${user.key}/${friendId}`).set(data);
+      database.ref(`matches/${friendId}/${user.key}`).set(data);
       setMatch(data);
-    } else {
-      setMatch(await matchSnapshot.val())
     }
   }, [user]);
 
@@ -115,10 +116,16 @@ export function App() {
 
   // Autoload Match upon Login
   useEffect(() => {
-    if (!user) return;
+    const friendId = location.pathname.split('/').pop()
+    if (friendId && friendId !== 'PeaceInTheMiddleEast') {
+      if (user) {
+        load(friendId)
+      } else {
+        load(friendId);
+        toggle('friends');
+      }
+    }
 
-    const friendLocation = location.pathname.split('/').pop()
-    if (friendLocation && friendLocation !== 'PeaceInTheMiddleEast') load(friendLocation);
   }, [load, user]);
 
   // onLogin/Logout
@@ -257,7 +264,7 @@ export function App() {
               : state === 'chat'
                 ? <Chat chats={chats} user={user} />
                 : null
-          : <Login reset={reset} />}
+          : <Login reset={reset} friend={friendData} toggle={toggle} load={load} />}
       </dialog>
 
       <div id="board">