Tweaked friends

ProLoser · Oct 9, 2024 · 1d165a4 · 1d165a4
1 parent 596b697
commit 1d165a4
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 45 deletions.
diff --git a/src/Avatar.css b/src/Avatar.css
@@ -0,0 +1,7 @@
+.avatar {
+    width: 5em;
+    border-radius: 50%;
+    aspect-ratio: 1;
+    /* border: 2px solid #AAA; */
+    object-fit: cover;
+}
diff --git a/src/Avatar.tsx b/src/Avatar.tsx
@@ -0,0 +1,13 @@
+import { UserData } from './Types';
+import './Avatar.css';
+
+export type AvatarProps = {
+    user?: UserData;
+    onClick?: () => void;
+}
+
+export default function Avatar({ user, onClick }: AvatarProps) {
+    return user
+        ? <img className="avatar" onClick={onClick} src={user.photoURL || `https://i.pravatar.cc/100?u=${user.uid}`} alt={user.name} />
+        : <img className="avatar" onClick={onClick} src="https://i.pravatar.cc/100" />
+}
diff --git a/src/Dialogues/Friends.css b/src/Dialogues/Friends.css
@@ -17,31 +17,24 @@
             margin-bottom: 1em;
 
             h3 {
-                margin-bottom: 0;
-            }
-        }
-
-        img {
-            width: 5em;
-            height: 5em;
-            border-radius: 50%;
-            margin-right: 1em;
-            /* border: 2px solid #AAA; */
-            object-fit: cover;
-        }
-    }
-
-    h1 {
-        vertical-align: text-top;
-        display: flex;
-        justify-content: space-between;
-
-        span {
-            display: flex;
-            overflow: hidden;
-
-            span {
-                margin-right: .2em;
+                margin: 0;
+
+                    img {
+                    margin-right: 1em;
+
+
+                                                h1 {
+                                                        vertical-align: text-top;
+                                                        display: flex;
+                                                        justify-content: space-between;
+
+                span {
+                        display: flex;
+                        overflow: hidden;
+
+                    span {
+                            margin-right: .2em;
+
             }
         }
                 }

diff --git a/src/Dialogues/Friends.tsx b/src/Dialogues/Friends.tsx
@@ -6,7 +6,7 @@ import firebase from 'firebase/compat/app';
 import 'firebase/compat/auth';
 import 'firebase/compat/database';
 import { UserData, Match } from '../Types';
-import { Avatar } from './Profile';
+import Avatar from '../Avatar';
 import './Friends.css'
 import ToggleFullscreen from '../ToggleFullscreen';
 type Users = { [key: string]: UserData }

diff --git a/src/Dialogues/Profile.css b/src/Dialogues/Profile.css
@@ -1,8 +1,3 @@
-.avatar {
-    max-width: 100px;
-    max-height: 100px;
-}
-
 #profile {
     label {
         display: flex;

diff --git a/src/Dialogues/Profile.tsx b/src/Dialogues/Profile.tsx
@@ -1,10 +1,10 @@
 // Import FirebaseAuth and firebase.
-import { useState, useCallback, useContext, ChangeEvent } from 'react';
+import { useState, useCallback, ChangeEvent } from 'react';
 import firebase from 'firebase/compat/app';
 import 'firebase/compat/auth';
 import 'firebase/compat/database';
-import { AuthContext, UserData } from '../Types';
-import { ModalContext } from '../Types';
+import Avatar from '../Avatar';
+import type { UserData } from '../Types';
 import './Profile.css'
 
 export const LANGUAGES = ["af", "af-NA", "af-ZA", "agq", "agq-CM", "ak", "ak-GH", "am",
@@ -108,14 +108,6 @@ export const LANGUAGES = ["af", "af-NA", "af-ZA", "agq", "agq-CM", "ak", "ak-GH"
     "zh-Hans-MO", "zh-Hans-SG", "zh-Hant", "zh-Hant-HK", "zh-Hant-MO",
     "zh-Hant-TW", "zu", "zu-ZA"];
 
-export type AvatarProps = {
-    user?: UserData;
-}
-
-export const Avatar = ({ user }: AvatarProps) =>
-    user
-        ? <img className="avatar" src={user.photoURL || `https://i.pravatar.cc/100?u=${user.uid}`} alt={user.name} />
-        : <img className="avatar" src="https://i.pravatar.cc/100" />
 
 export default function Profile({ authUser, toggle }) {
     const [editing, setEditing] = useState<UserData>(authUser?.val() || { uid: '', name: '', language: '', photoURL: '' });

diff --git a/src/index.tsx b/src/index.tsx
@@ -5,6 +5,7 @@ import 'firebase/compat/database';
 // TODO: Upgrade to modular after firebaseui upgrades
 // import { initializeApp } from 'firebase/app';
 import type { Match, Move, GameType, SnapshotOrNullType, UserData, ModalState } from "./Types";
+import Avatar from "./Avatar";
 import Friends from "./Dialogues/Friends";
 import Chat from "./Dialogues/Chat";
 import Profile from "./Dialogues/Profile";
@@ -237,7 +238,7 @@ export function App() {
     }
   }, [selected, move])
 
-  const renderFriend = friend ? <h2>{friend.val().name}</h2> : null;
+  const friendData = friend?.val();
 
   const toggleFriends = useCallback(() => { toggle(!state) }, [state])
 
@@ -257,8 +258,10 @@ export function App() {
 
       <div id="board">
         <div id="toolbar">
-          <a className={`material-icons ${state && 'active' || ''}`} onClick={toggleFriends}>account_circle</a>
-          {renderFriend}
+          {friendData
+            ? <Avatar user={friendData} onClick={toggleFriends} />
+            : <a className={`material-icons ${state && 'active' || ''}`} onClick={toggleFriends}>account_circle</a>}
+          <h2>{friendData?.name}</h2>
         </div>
 
         <Dice onClick={rollDice} values={game.dice} color={game.color} />